Date pickers not closing when clicking on other input.

[robertovg]

Basically, when you open the date picker to input a date and before you select the value you click in other input, the open date picker is not closed automatically as it's happening with combo boxes, dropdowns any other input component you provide.

I prepared a very simple code sandbox where you can test it.

https://codesandbox.io/s/pyj9olvqj

I hope it's easy to understand, I tried using all the properties provided in the official docs: and it's always happening. Even tried to control the isOpen manually rendering a controlled <Input /> inside the <DatePicker /> but the problem is when it's open the inner <Input /> always loses the focus because of the dropdown date picker gets it.

How do you think I could make them close automatically after any other click outside the inner <Input /> or Datepicker dropdown even if it's another input the new one which gets the focus?

[interactivellama]

Those are managed by react-onclickoutside https://github.com/salesforce/design-system-react/blob/master/components/combobox/index.jsx#L9

I'm guessing that if you have the same css classname (that is two of the same components) or maybe the same React Class/object prototype, it doesn't know the difference and doesn't close the old one. Maybe they need a handleClickOutside function added to them. (that would trigger onRequestClose if this handleClickOutside doesn't pass in this instance of the component kind of thing. There may be a way to pass that library an id of each component or something, I'm not sure. Instances seem to be the cleaner way.

Oh and thank you for sharing. We don't have any multiple component unit testing going and this seems to be a side effect of that.

[robertovg]

I updated the CodeSandbox (https://codesandbox.io/s/pyj9olvqj) with this 2 ideas you said:

• Adding different className (and also id). But still the same behaviour.
• Adding handleClickOutside callback, but then this callback is not executed when clicking on the second date picker, just when clicking outside so in the same scenario.

I'm pretty sure that is because this component is different from the comboboxes because the inner input doesn't have the focus when you click on it. So honestly no idea how to resolve it as there is no way to have the function triggered when you click on other combobox or datepicker once one datepicker is open.

PD: And thanks to you guys for maintaining and create this library. To report bugs is the less we can do 🙏

[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.

[robertovg]

Any update on this one guys?