Semantic-ui-react: Dropdown selection auto select first option

[nhducit]

Is it intended behavior and how to disable this?

Steps

1. open http://react.semantic-ui.com/collections/form#onsubmit
2. Do nothing => click submit

Expected Result

gender is null

Actual Result

gender dropdown automatically select first value

Version

0.59.2

Testcase

http://react.semantic-ui.com/collections/form#onsubmit

[levithomason]

Confirmed bug, thanks. There is a hidden select in the Dropdown that holds the value for the DOM. It currently defaults to the first item because it has no option with an empty value. Here it is revealed:

I believe the fix is as simple as adding an always present option with a value='' to the hidden select in Dropdown.js.

[nhducit]

I found these lines in Dropdown source

if (!selectedIndex || selectedIndex < 0) {
      const firstIndex = enabledIndicies[0]

      // Select the currently active item, if none, use the first item.
      // Multiple selects remove active items from the list,
      // their initial selected index should be 0.
      newSelectedIndex = multiple
        ? firstIndex
        : this.getMenuItemIndexByValue(value, options) || enabledIndicies[0]

https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.js#L738-L740

[levithomason]

This is a little confusing at first, but in Semantic-UI selected means the item is highlighted but not active. The selected item changes as you press the up and down arrows or perform a search. However, the active item(s) are what comprise the value. You can make a selected item active by pressing enter.

So, there is no default active item which is why the image I pasted above does not show "Male" in the Semantic-UI Dropdown value.

[nhducit]

I still see this bug in the latest 0.61.3 version
@levithomason

[neokio]

@levithomason Any advice on how to resolve this with the <div> variant of the dropdown?

http://jsfiddle.net/designosis/2mw588nf/1/

Adding a blank item ... http://jsfiddle.net/designosis/2mw588nf/2/ ... is problematic. If there's no easy solution, I'd suggest re-opening the issue.

[levithomason]

The original bug described in this issue was properly resolved (see gif below). If you believe you are experiencing a new bug, please file a new report with all the necessary details.

---

[jay-almaraz]

@neokio probably a little late with the response but...

just set selectOnBlur to false

This will stop the Dropdown from auto selecting when you click away

e.g.

<Dropdown
    selectOnBlur={false}
    selection
    placeholder={'No Auto Select...'}
    options={[{key: 0, text: 'abc', value: 'abc'}, {key: 1, text: 'xyz', value: 'xyz'}]} 
/>

[neokio]

@jay-grant adding selectOnBlur to http://jsfiddle.net/designosis/2mw588nf/1/ ... either in the tag or as a .dropdown() parameter ... seems to have no effect! How are you able to get it working?

[mexiQQ]

@neokio $('.ui.dropdown').dropdown({forceSelection: false});

[levithomason]

@neokio @mexiQQ This repo is for the React port of Semantic UI. There is no jQuery and therefore no .dropdown() method to call. All jQuery has been replaced by vanilla JS and React components.

See https://react.semantic-ui.com/modules/dropdown for a list of valid props you can pass.

If you wish to file a bug or use a playground, you must fork http://codepen.io/levithomason/pen/ZpBaJX which is the React implementation. The jsfiddle linked above does not support Semantic UI React.

[pavship]

In Semantic-UI-React Dropdown we need a property which will prevent dropdown to autoselect some option on dropdown open. In my case, dropdown somehow remembers previous state and selected !== active when opened again. While we have full control over active item by means of "value" prop, it would be nice to have a prop to control selected option as well.