Picker does not close
See original GitHub issueI am not able to close the pickers I open by clicking outside the picker element.
This is because I have put the picker in a component which has transform
applied to an ancestor. Therefore, the cover
element in Picker, which has a position: fixed
actually starts behaving like a position: absolute
element (transforms change the container element of fixed-pos elements)
Issue Analytics
- State:
- Created 8 years ago
- Comments:11 (2 by maintainers)
Top Results From Across the Web
Date picker window is not close - Stack Overflow
As you mentioned this is an issue with IE. However, you can add a custom function to check when one leaves or clicks...
Read more >picker is not closing on modal · Issue #117 - GitHub
Hey! I had resolved this issue with hook. Add ref to your DatePicker component and use closeCalendar() method. Example: useOnClickOutside( ...
Read more >[DateTimePicker] Picker does not close when popup is hidden
Click outside of the picker to close it 4. Open the picker again by clicking on the input box Expected: The picker should...
Read more >Time picker and date picker are not closing after selecting the ...
1) Everything is working fine. But it doesnot close on selecting the values. I need to do it twice then it will close...
Read more >Close date picker after selecting the date - MDBootstrap
Hello, Is it possible to close date picker automatically once the date is selected there, so I don't need to click close button...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I think the easiest way to handle this is to put a wrapper around the color picker, which you already do so that it displays above content around it. Then just apply a
onMouseLeave
event to close it. I think this is better than having to create refs for each color picker. This will create theonBlur
effect which I think is ideal.components.js
component.js
@liziver Nice trick, thanks for sharing. I had a solution of my own using onMouseEnter and onMouseLeave, but your seems better / simpler.