Dropdown cell type placeholder not showing

Tags: #<Tag:0x00007f8b2b01e268> #<Tag:0x00007f8b2b01e0d8>
#1

Hello and Happy new year!

I’m having trouble adding a placeholder on dropdown lists so that if the source is empty, a placeholder null appears.
However, with the below code the htPlaceholder class is added to the empty cell in the list but the placeholder does not appear.

image

Code

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['Tesla', 2017, 'black', 'black'],
        ['Nissan', 2018, 'blue', 'blue'],
        ['Chrysler', 2019, 'yellow', 'black'],
        ['Volvo', 2020, 'white', 'gray']
      ]}
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
      columns={[
        {},
        { type: 'numeric' },
        {
          type: 'dropdown',
          source: ['', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],
          handsontable: {
          	placeholder: 'null',
          }
        },
        {
          type: 'dropdown',
          source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
        }
      ]}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));
#2

Hi @hjeong1200

I can see a few problems here. First one is that you are declaring handsontable cell type configuration object inside the column that is defined as dropdown type. It should be either handsontable or dropdown type, they shouldn’t be combined.

The placeholder will work if the configuration is correct, but it will not show in the dropdown list, as the list is generated from the source data, and placeholder will show only on empty cell as the value is added to the cell editor:

image

#3

HI @adrian.szymanski,

I assumed that Dropdown type builds upon Handsontable type so that I can use the methods in Handsontable… I’ll just stick with Handsontable type for now.

Thank you for the info and you can assume the topic as resolved.

#4

Hi @hjeong1200

Thank you for the update. I will close this topic, but if you have any other questions, feel free to open a new one.

#5