Dropdown: allowAdditions with Space key does not work

[tomasz-grzesik]

Hi,

Why does not the dropdown component allow for space character from version 0.88.0?
It works nice in version 0.87.3.

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

Looks like a valid bug. Also linking #3146 as it can be the same issue.

[layershifter]

@tomasz-grzesik can please you try it on CodeSandbox (https://codesandbox.io/s/jwlr7?module=/example.js)? I can't repro it, only in our docs...

[tomasz-grzesik]

Unfortunately I can't reproduce it in sandbox.
I have two the same dropdowns - one in the modal, and one in the page. The problem is only with dropdown in the modal, but on the sandbox it works correctly. Maby some of my other scripts make this problem happen.

[layershifter]

@tomasz-grzesik so it's not a regression actually. I don't know from what version we have this behavior however it's related to key handling. This is possible when you have two or more Dropdowns opened at the same time.

The attached GIFs shows to issues:

• Spacebar does not work
• ArrowUp/ArrowDown affects both Dropdowns

I updated https://codesandbox.io/s/zen-sun-q1s0f?file=/example.js to simplify testing and highlight the issue. #4004 will fix it.

[tomasz-grzesik]

Maby this fix will solve my problem. I will wait for new version and inform you about results.

[tomasz-grzesik]

Hi,

I still have the same problem - can't write the space char inside a new tag.

I don't know from what version we have this behavior however it's related to key handling. This is possible when you have two or more Dropdowns opened at the same time.

It can be the problem reason, because when I press space key I see in the modal background another Dropdown is focused and open/close alternately.

When I close a Modal I still see Dropdown opened, so the problem is not closed Dropdown after item selection.

<Modal 
        closeIcon
        closeOnDimmerClick="false"
        closeOnDocumentClick="false"
        open={this.state.open}
        onClose={this.handleCloseIcon}
        dimmer="true"
        trigger={<Dropdown.Item 
          onClick={(e) => this.handleOpen()}
          >Open Modal and feel the tags
          </Dropdown.Item>}
>

[layershifter]

@tomasz-grzesik Please create a minimal repro on CodeSandbox 🙏

[tomasz-grzesik]

https://codesandbox.io/s/loving-smoke-tje06?fontsize=14&hidenavigation=1&theme=dark