How to add the input field inside the select option using ant design and react

Question

I created select option using ant design .But I need create editable cell inside the select option.

This my select option code

<Select
  showSearch
  style={{ width: 400 }}
  placeholder="Select a Bank"
  optionFilterProp="children"
  onChange={this.handleChange.bind(this)}
>
  <option value="1">Bank1</option>
  <option value="2"> Bank2</option>
  <option value="3"> Bank3</option>
</Select> 

And onChange functions is

handleChange(value) {
  console.log(`selected ${value}`);
  this.setState({
    bank:value,
  });
}

Can you help me?

Answer 1

I suppose the question is whether or not this is an editable list.

The Select component has a mode prop that can be used to change the functionality with the following options:

'default' | 'multiple' | 'tags' | 'combobox'

Using the tags mode would allow you to add and remove items and generate a tokenized list when the form is submitted.

If you are looking at a fixed list and then wanting to create new items to add to the list:

If you want to be able to add new items to the list, this doesn't exist currently, as far as I am aware.

You may be able to refashion something from the Ant Design Pro components, or otherwise come up with a solution where:

1. when "create" is selected, you toggle the Select for an Input
2. when the input is submitted/blurred update the Options list, toggle the Select/Input once more and submit the value to the back-end.

I hope this helps.