Description
Bug Report
User cannot enter space on input that is on a control triggered from the Dropdown.
This bug seems similar to #3768 but my use-case is different (I'm not using the Input directly as a trigger to the Dropdown itself).
This is still an issue in Semantic UI React 0.88.1, so it seems the fix documented in PR #3766 doesn't fix this particular issue.
I have tried to create a new Dropdown that extends the regular Dropdown and overrides the openOnSpace function as described here: #2229
That almost works, but the result is that the first time a user enters a 'space' for any given Input, the space key is ignored. Subsequent spaces work as expected on the Input.
Steps
Create a Dropdown component with a Dropdown.Menu. Inside of the Dropdown.Menu, place a Modal with a trigger as a Dropdown.Item. Inside of the Modal is a Form with Form.Input. The user will not be able to press the Space bar when typing inside of the Input. Instead, the Dropdown will open and close from behind the modal.
Setting autoFocus on the input almost seems to fix it, but if you have multiple Inputs in the Modal, switching between them causes the spacebar issue to re-appear. It seems as though the Dropdown steals focus from the modal somehow.
Here is a CodeSandbox with a minimum example showcasing the issue:
https://codesandbox.io/s/semantic-ui-example-wqyf1
Expected Result
User can enter text freely in the Input without triggering the Dropdown.
Actual Result
Dropdown opens and closes when the user presses space inside of the Input
Version
0.88.1