TimePicker dropdown interferes with other dropdowns

[nhazar]

Add a TimePicker and a readonly Combobox 2. click on the TimePicker, dropdown opens. 3. leave the TimePicker and click on the other combobox. the TimePicker dropdown stays open. it should get closed since there's a click outside the TimePicker.

[garygong]

I tracked this behavior down to:

https://github.com/salesforce/design-system-react/blob/master/components/combobox/combobox.jsx#L1058

where ignore-react-onclickoutside is added to the Combobox. It looks like this has been there from the beginning. Maybe @interactivellama knows why this is needed.

If this is in fact needed, I'd suggest modifying TimePicker to use a controlled MenuDropdown and manage its own open/close state (similar to how it's done in Combobox).

[interactivellama]

I believe the goal is to prevent the dropdown menu from closing when the input is clicked. If this is removed I believe that the menu will be closed on input focus or possibly have an event race condition on whether the menu should be open.

I imagine the best direction forward would be to add a unique identifier that maps the className of the input only to that single instance of the Combobox. ignore-react-onclickoutside-sldkfjldkjfdklj. it would need to use shortid and override with the id prop. See https://github.com/salesforce/design-system-react/blob/master/components/combobox/combobox.jsx#L434

In summary, generatedId would be moved up a level and then passed via id prop with minimal changes. Does that sound like a good solution?

[garygong]

Yes, that sounds good to me!

[interactivellama]

Let me step back, I misunderstood the issue and thought we were stating that the bug was in Combobox, but the contribution of putting Combobox inside of TimePicker was never merged last year. Yes, wrapping TimePicker in react-onclickoutside could would fix TimePicker.

[garygong]

@interactivellama TimePicker currently uses MenuDropdown, which is already wrapped with react-onclickoutside. The problem is that this click outside is ignored when clicking on the Combobox input.

I think your original suggestion of having a unique class name is still needed.

[DivyanshiSingh]

Is this issue open to work?

[garygong]

Yes, please feel free to work on this issue! Thanks a lot!

[DivyanshiSingh]

Ok ...I am working on this issue now. Thank you

[nhazar]

How is this one going @DivyanshiSingh ?

[AubreyHewes]

@DivyanshiSingh Were you able to work on / solve this issue?

The same problem is also in the datepicker component, so if you solve this one then you may solve that one as well ;-)

[stale[bot]]

This issue has been automatically marked as stale, because it has not had recent activity. It will be closed if no further activity occurs. Maintainers are responsible for tech debt and project health. This is most likely a new components or component feature request. Please submit a pull request for or request feedback on this feature. Thank you.