Dropdown: automatically highlights the first element

[Brqqq]

Bug Report

Steps

1. Create a dropdown with static data inside of it, with 2 or more items to illustrate it better
2. Open the dropdown by clicking on it.

Expected Result

None of the options should be highlighted, until you hover over it with your mouse or use your "up" or "down" arrow keys.

Currently the non-React version of Semantic UI already behaves like this.

Actual Result

The first item is highlighted. So it acts as if you have your mouse hovered over this first item.

Version

0.82.3

Testcase

This issue can be seen on the doc page demos. A specific example of a simple dropdown where this issue can be seen: https://codesandbox.io/s/218np7y82j

Compare this to the non-React version where this issue is NOT present: https://jsfiddle.net/7adbsm6r/5/

I have assumed it's a bug, because of this behaviour is different than the non-React version. The non-React version behaves in the way that I described in the "expected result".

Here's an image showing the difference. This is an uncontrolled dropdown and when you first open it, without hovering your mouse over any option

[welcome[bot]]

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

[fifthsegment]

I think this is the author's intended behaviour, because there's a test case in the Dropdown-test.js file which specifically tests if the first item is selected in the case that no value or default value is provided. But you're right, the first value shouldn't be selected by default.

describe('selected item', () => {
    it('defaults to the first item', () => {
      wrapperShallow(<Dropdown options={options} selection />)
        .find('DropdownItem')
        .first()
        .should.have.prop('selected', true)

[yuritoledo]

hey @Brqqq , try to add this props on Dropdown, setting it to false

[Brqqq]

Thanks for the suggestion @yuritoledo . Unfortunately it doesn't work. Those props concern whether a value is picked onblur/navigation, but not if an entry is highlighted when you first open the dropdown.

[yuritoledo]

Nop. I guess I saw a behaviour when have the multiple props, but its to use only when is multiple :/

[Gerson4G]

Greetings. Any progress on this? Or as @fifthsegment says, is expected behavior so it won't be "fixed"? Thank you.

[willbryk720]

Try selectOnBlur={false} Found in #811 It works with Form.Select at least

[Brqqq]

@willbryk720 It was suggested in the replies here too. It does not work.

Note what is said here. The issue is that "selected" is set to the first option when you open the dropdown. So you open the dropdown and you see the first option highlighted. I was looking for a way to not have the first option highlighted, like in the normal semantic ui. However, this behavior might be intended as mentioned in one of the previous posts.

selectOnBlur means you can close the dropdown and it will or won't actually select the highlighted value. I'm only looking to lose the highlight off the first option when you open the dropdown with no value selected

[Brqqq]

I think I didn't describe the issue very well, so I wrote it differently. The clearest way to see the issue is to check the react and non-react versions side by side and see how the dropdown looks when you first open it.

[aaronetto]

You can fix this problem setting the prop selected in your options like

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

const options = [
  { key: 1, text: 'Choice 1', value: 1, selected: false },
  { key: 2, text: 'Choice 2', value: 2 },
  { key: 3, text: 'Choice 3', value: 3 },
]

const DropdownExample = () => <Dropdown selection options={options} />

export default DropdownExample

:)

[Brqqq]

Thanks, that does get around the issue!

Ideally the first value would not be shown as selected when you open it (in the image, the non-React version shows a grey "Options" and the React version shows a black "option 1") but this is already better.

[CarlosReyesM]

I have notice that hard writing the value selected to false actually make it not possible the arrow navigation to the items with this value hard written, have we find any other option to change this?

[steinwachs]

My project is on version 0.88.1 of semantic-ui-react.

I also ran into this issue. I do not want the value to change on open either. The value should only be changed when the user actively clicks on one of the items in the drop-down.

Setting selectOnBlur={ false } alone did not work with the Dropdown component. Further, as @CarlosReyesM mentioned, setting selected to false leads to another issue with the arrow navigation.

The following workaround did the trick in my case, using the Dropdown component and a combination of selectOnBlur={ false } and resetting the selection onOpen.

  onOpen={ () => { !this.state.value && this.setState({ value: undefined }) }}
  selectOnBlur={ false }

Entire Dropdown example:

<Dropdown
  placeholder='Placeholder'
  options={ options }
  value={ value }
  onOpen={ () => { !this.state.value && this.setState({ value: undefined }) }}
  selectOnBlur={ false }
  floating
  button
  className='icon'
/>

Note the !this.state.value && ... bit in onOpen. This is needed because otherwise the value is reset even if one had been selected by the user. In the latter case, you don't want to reset the current value. I only want the value to be reset if no value had been selected yet, thus overriding the automatic selection by the component on open.

I forked @Brqqq's sandbox and made a new one that also contains the Dashboard component: https://codesandbox.io/embed/semantic-ui-react-form-and-dropdown-yrjex

[dennnis0204]

My solution to this issue, placeholder property must be there for styling.

import _ from 'lodash';

const [option, setOption] = useState({});

<Dropdown
  onChange={(e, { value }) => {
    setOption(_.find(options, { value }));
  }}
  selectOnBlur={false}
  options={options}
  placeholder="Choose an option"
  selection
  text={option.text || 'Choose an option'}
  value={option.value}
/>;

[geoadamo]

One possible work around would be to add a dummy option as the first element in your options array and set it to display none in your css

const options = [
 { key: 'dummy-option', text: '', value: '' },
  { key: 1, text: 'Choice 1', value: 1 },
  { key: 2, text: 'Choice 2', value: 2 },
  { key: 3, text: 'Choice 3', value: 3 },
]

//in your css
#dummy-option{
display:none
}