onBlur event
DoctorFishy opened this issue · 3 comments
I am trying to tie this component to a text box. Ideally it will open when a user focuses on the text box and go away when focus is elsewhere.
To do this I need to capture both focus on the text box (which I can do) and focus/blur on the timekeeper element ( so I know if the user is in the timekeeper, to keep it open, or elsewhere - to close it).
However, assigning onFocus to the div containing the timekeeper, or to the element itself, doesn't trigger when the clockface is clicked (an svg element). It will trigger when the am/pm elements are clicked.
How do I either capture focus for the whole component or else manage some other way to tie a text box together with the time picker?
It seems like what I'm looking for is bubbling behavior. I can replicate that in components I control, but since I don't control the inner workings of the react-timekeeper, I guess I'm looking for an over-arching onFocus / onBlur effect or some work around / wrapper that has the same effect.
Gonna add the enhancement tag to it, but I'm not sure when I'll have time to get to it.
I looked some more into this and you should be able to do it without a blur/focus event from the component. Just wrap it in another component, and when it opens up, listen for click events. If there are clicks outside the container, close it.
Sandbox demonstrating what I mean - https://codesandbox.io/s/cool-voice-3ppyv
Gonna close the issue. Let me know if you have any questions.