Popover hijacks space keystroke events
yairau opened this issue · 4 comments
When the Popover component wraps a text InputField, the input field doesn't receive space keystroke events.
Expected Behavior
The input field should allow the user to type spaces.
Current Behavior
Spaces are not typed into the input field
Steps to Reproduce
I made this codesandbox. I shows the bug as well as my workaround, which is to have the popover wrap a div under the input field, instead of the input field itself.
Context (Environment)
It uses orbit-components v4.2, but this happens in v5 as well.
I am trying to create a date-time picker, were the user can either type a date-time text that is parsed onBlur, or select the date from a calendar that is rendered on a popover.
Hi
The Popover component should not wrap the Input, as the Input is not what triggers the Popover. Do you have any reasoning for doing it like that?
Your workaround seems to be a valid solution.
Hi,
I thought the popover should wrap the input because it is triggered by a button inside the input. I tried wapping just the button, but that caused layout bugs. If you don't see any problems with my workaround, I'm happy to leave it like that. Though I am curious as to why the space events not registering?
Many thanks for your reply.
I understand your thought, but yeah, in this case, there should be a wrapper around the component so that the positioning of the Popup is the one desired.
The keydown event for the space key is being captured on children of the Popover, so that one can open the Popover using the space key. It is defined here, and is the desired behavior. Therefore, if the Input is a children of the Popover, the SPACE event will be captured and not propagated.
I see, thanks for clearing this.