Search code examples
semantic-ui-react

Semantic UI React - Input in Dropdown does not allow space


I have a dropdown with nested text inputs. After adding onClick={event => event.stopPropagation()} to the inputs I am able to select an input and type in it, however as soon as I press the space bar the dropdown is closed.

I have worked out that adding multiple or closeOnChange={false} to the dropdown keeps the dropdown open, however the onChange of the input is not fired, which means that the space is not added to the string and it effectively results in a noop.

I have created a simple pen to show the issue which may be found here.


Solution

  • Quick and dirty solution would be to add

        onKeyUp = {(e) => {
          if (e.keyCode === 32) {
            e.target.value = e.target.value + " " 
            e.stopPropagation()}
          }
        }
    

    to the Input