It is an input with a dropdown.

The dropdown gets triggered on focus.

The input has the bootstrap class form-control but bootstrap is not needed.

Now the value typed is added to the dropdown so you can select it like an option of the array.

handleChange is not needed anymore since the value typed can be handle with handleSelected, you can still use it but it's optional.

Live demo

• values -> is an array and it will be shown as options in the dropdown

const options1 = [
      { id: 1, label: 'John' },
      { id: 2, label: 'Miles' },
      { id: 3, label: 'Charles' },
      { id: 4, label: 'Herbie' },
    ];

• handleSelected -> gets called everytime the user clicks on a dropdown option

 handleSelected = (option) => {
    ///option is the option selected on the dropdown
  }

• handleChange -> gets called everytime the user types on the input

handleChange = (value) => {
    //value is the input typed
  }

<CustomDropdownInput values={options1} handleSelected={this.handleSelected}/>