when a cloumn use "select" component, you need to click two or more time to pop up select options!

[park365]

Describe the bug

To Reproduce

when a cloumn use "select" component, you need to click two or more time to pop up select options!

like demons: https://adazzle.github.io/react-data-grid/#/common-features, you will find first time you shuold click one more time to pop up select options

[godon019]

I don't think this is a bug. it is just that the demo's select component is implemented that way.

you can create your own Select component and have it open when the cell is focused basically when the cell is clicked, it renders its child component and the child component is what you can create by your own in a way that the component opens up when it is being rendered

something like this below

export default function DropDownEditor() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    setOpen(true);
  }, []);

  return <Select open={open} />;
}

[farooq7124]

@godon019 I have used react-select as dropdown component. But the problem is it will take width of column and because of that we can not set zindex to options container. Hence it results in having horizontal scroll bar.

Any suggestion how to avoid the scroll bar

https://github.com/adazzle/react-data-grid/assets/12643480/e2e5b7dd-13ab-4698-8050-745c8139f99b

[godon019]

I am not familiar with react-select but I think there must be a way to pass style into react-select to make it bigger

[DVGY]

@farooq7124 can you pls tell me how you achieved this ?