How to avoid the Dropdown to autoselect an option

Question

I'm using Dropdown from Semantic UI and it if I don't select an option when it is open it automatically selects the first one from the list.

This is the code:

import Dropdown from '../../../components/Dropdown/Dropdown.component';

       <Dropdown
          className="hello-dropdown"
          placeholder="Company"
          onChange={this.searchHandlerCompany}
          options={companyOptions}
        />

it is based on Semantic UI:

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

export default ({ placeholder, options, onChange, name, className }) => (
  <Dropdown
    className={className}
    name={name}
    placeholder={placeholder}
    search
    selection
    options={options}
    onChange={onChange}
    clearable
  />
);

I don't know if onChange function and options are useful for this but here they are:

 searchHandlerCompany = (event, data) => {
    const { getCompanies } = this.props;
    getCompanies({
      name: data.value,
      fridges: this.props.query.fridges,
      city: this.props.query.city,
      salesContact: this.props.query.salesContact,
      pagination: {
        currentPage: data.activePage,
        totalPages: this.props.query.pagination.totalPages,
      },
    });
  };

    const companyOptions = [
      { text: '0 - 2', value: '0-2' },
      { text: '3 - 5', value: '3-5' },
      { text: '5 - 10', value: '5-10' },
      { text: '+ 10', value: '11' },
    ];

Any idea why is it auto-selecting and how to solve it?

Answer 1

The change should be made in Dropdown component and it will not autoselect after that.

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

export default ({ placeholder, options, onChange, name, className }) => (
  <Dropdown
    className={className}
    name={name}
    placeholder={placeholder}
    search
    selection
    options={options}
    onChange={onChange}
    clearable
    forceSelection={false} // added here 
    selectOnBlur={false} // and here
  />
);