CODEWITHSUNDEEP
semantic-ui-react
Jacques Botha
Jacques Botha

Reputation: 13

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.

Upvotes: 1

Views: 1483

Answers (2)

Tsvetan Ovedenski
Tsvetan Ovedenski

Reputation: 3518

The onKeyUp workaround did not work for me, but I found another one (thanks arjitacharya1994) which works. Just add the following to the Input:

onKeyDown={(e) => e.code === 'Space' ? e.stopPropagation() : null}

Upvotes: 0

radulle
radulle

Reputation: 1515

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

Upvotes: 0

Related Questions