Dropdown: Closes whenever input field focused

[maciej-gurban]

Steps to Reproduce

1. Open dropdown that contains an input field (the one in the docs)
2. Click on the input field

Link copied using "Direct link" functionality, pasting to the browser address bar doesn't navigate to correct place for me.

Expected Input is focused, dropdown stays opened until clicking outside the dropdown, or manually triggering closing of the dropdown

Result Dropdown closes

[maciej-gurban]

Possibly related: Another demo has a nested dropdown (Shopping -> Clothing). Clicking or hovering the mouse over Clothing will never show dropdown contents. Clicking will close the current top level (Shopping) dropdown.

[GregoryPotdevin]

I had this problem and fixed it by adding onClick={e => e.stopPropagation()} to the input. Not sure if this should be the default onClick for input, as you basically never want a click on an input to bubble up ?

[maciej-gurban]

@GregoryPotdevin That does what I intended to do. Thanks! Perhaps the demo could be amended with your solution. Seeing dropdown closing immediately when focusing the input field led me to believe it's simply broken.

[GregoryPotdevin]

I posted a related issue for this kind of use case : the arrow keys don't work. https://github.com/Semantic-Org/Semantic-UI-React/issues/1597

To me it feels like like the dropdown with the search input should have a special treatment (stopPropagation on onClick, arrow keys, etc.). The current version with "custom" children component in the dropdown generate the correct HTML/CSS but doesn't have a valid behavior.

[levithomason]

We get this a lot, perhaps we need to make the messages into warnings or errors to get more attention?

Note the 📣 message above the example (and several others) which explains that the markup is not functional and that we do not yet support nested dropdowns. It also calls out for a PR for anyone who is up for it:

Why did you add broken "examples"?

• because we're in development, pre 1.0
• to keep visibility on what is missing
• to encourage PRs for missing features

What is needed to make this work?

Please use these duplicate issues for targeted convo instead:

• Sub menus RFC #1365
• Advanced Dropdown menu shorthand, see #889

[maciej-gurban]

Wouldn't it be easier for you guys to leave the docs to document what actually already works, instead of mixing in hypothetical and who-knows-if-needed PR suggestions?

Teams of Bootstrap 4, Angular 2 and others have done that at some point as well - they mixed the core functionality with nice to haves and future todos instead of focusing on a set of functionality that is reliable and works well. By doing so they got stuck in an endless beta chain.

But they recovered; defined clearly a minimal set of features that need to be there, made it clear what is supported and what is not, and moved on.

Landing in this repo a few days back and evaluating it whether to use in my project, I had really hard time understanding what is a bug on the component level, and what is "yet to be implemented". Getting errors logged to console while using an official demo of a seemingly simple and also seemingly supported component does not inspire confidence in choosing this framework for serious projects.

People like me filing issues that are not really issues probably doesn't help you either. It distracts you from doing the real work, and instead makes you conduct unnecessary investigations, write the same answer all over again.

/2c

[levithomason]

@maciej-gurban Thanks for the thoughts and suggestions.

I find that the extra visibility and attention these items show results in contributions and assistance that we'd not otherwise have gained. The trade off of marking issues as dupes is worth it to me.

At this stage, I'd rather gain developers than users. Once we hit 1.0, we'll design things with the user in mind first. For now, we'll keep the developer the priority.

[bennnjamin]

For anybody looking for an approach to solve this, here's a quick and dirty fix to get you started. This is the high level approach 1) Add an onClick event handler to search input that prevents the dropdown from closing 2) Add an onChange handler 3) Implement the search algorithm of your choice 4) Update the state of the dropdown menu with your search results

Here's some example code below, and it is by no means a production ready because of the messy state management but it does work

//const defaultOpts = [
//...  
//] 
//setup default state in the component
//class Example extends Component {
//...
state = {dropdownOptions: defaultOpts}
onInputClick = (e) => {
  e.preventDefault()
  e.stopPropagation()
}
//example search algorithm using lodash
onChange = (e) => {
  const searchQuery = e.target.value
  if(searchQuery == '') {
    this.setState({dropdownOptions: defaultOpts})
    return
  }
  var r = _.filter(this.state.dropdownOptions, function(o) {
    return _.startsWith(_.lowerCase(o.text), _.lowerCase(searchQuery))
  });
  this.setState({dropdownOptions: r})
}
render() {
  return (
   <Dropdown text='Filter Example' icon='plus' floating labeled button className='icon' onChange={this.onChange} >
    <Dropdown.Menu>
      <Input icon='search' iconPosition='left' className='search' onClick={this.onInputClick} />
        <Dropdown.Menu scrolling>
           {this.state.dropdownOptions.map(option => <Dropdown.Item key={option.value} {...option} />)}
         </Dropdown.Menu>
       </Dropdown.Menu>
    </Dropdown>
  )
}

[taniarascia]

I can use onClick={e => e.stopPropagation()} to prevent the input from closing, but if I want to attach an onKeyPress event to allow the Input to submit on enter, it doesn't let me.

[hari457627]

Hi i'm using Downshift material ui component. scroll bar up and down arrows with mouse clicks is working fine in normal pages, but its not working in material ui modals. in modal, when i'm clicking in Downshift suggestions scroll up and right arrow with mouse, then suggestions popup is closing. Can anybody help me to solve this issue?

[felixmosh]

For any one that encounters with this as well, I've added onClick on the dropdown menu with stopPropagation.

A working example: https://codesandbox.io/s/semantic-ui-example-ujior

[svek-code]

To fixe that you can write : (add input={{ autocomplete: 'off', onClick: (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => e.stopPropagation() }} to Input element)

<Dropdown.Menu>
        <Dropdown.Header content="FIND" />
        <Input icon="search" iconPosition="left" name="search" loading input={{ autocomplete: 'off', onClick: (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => e.stopPropagation() }} />
        <Dropdown.Header icon="user" content="ITEMS LIST" />
        <Dropdown.Divider />
        <Dropdown.Item
          label={{ color: 'red', empty: true, circular: true }}
          text="Important"
        />
        <Dropdown.Item
          label={{ color: 'blue', empty: true, circular: true }}
          text="Announcement"
        />
        <Dropdown.Item
          label={{ color: 'black', empty: true, circular: true }}
          text="Discussion"
        />
      </Dropdown.Menu>
    </Dropdown>