Semantic-UI-React icon indicating copy to clipboard operation
Semantic-UI-React copied to clipboard

Spacebar is not working in the example of 'Dropdown in Menu'

Open fireHedgehog opened this issue 2 years ago • 3 comments

Bug Report

1658282138648

According to the screenshot, the spacebar is not working in the INPUT component.

Steps

Step 1: Open the dropdown component. Step 2: Type the things you want to search at the Input componenet. Step 3: Press spacebar.

Expected Result

There should be some spaces between words.

Actual Result

Nothing happened when press the spacebar 💣

Version

2.1.3

Testcase

[semantic-ui official website example]:

Thank you very much.

fireHedgehog avatar Jul 20 '22 02:07 fireHedgehog

👋 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.

welcome[bot] avatar Jul 20 '22 02:07 welcome[bot]

try this @fireHedgehog -

<Input
                icon={<Icon name="search" inverted />}
                placeholder="Search.."
                onClick={this.onInputClick}
                onKeyDown={(e) => {
                  e.code === 'Space' ? e.stopPropagation() : null;
                }}
   />

arjitacharya1994 avatar Aug 08 '22 13:08 arjitacharya1994

Thanks @arjitacharya1994 this helped. @fireHedgehog if you are using input tags in Menu, try using this field in input:

<input
   ...
   onKeyDown={(e: any) => {e.code === 'Space' && e.stopPropagation()}}
   ...
/>

tabed10 avatar Dec 12 '22 20:12 tabed10