Question

132

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

rated 0 times [ 134] [ 2] / answers: 1 / hits: 15706 / 6 Years ago, wed, july 11, 2018, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stacie

Add To Favorites

Follow

Total Points: 476

Total Questions: 92

Total Answers: 102

Location: Bosnia and Herzegovina

Member since Tue, Mar 29, 2022

2 Years ago

stacie questions

1 How to perform validation of a array field using formik and yup validation

Wed, Mar 31, 21, 00:00, 3 Years ago

1 Validation not working on angular reactive forms

Fri, Jun 26, 20, 00:00, 4 Years ago

1 CropperJS Not working well when using it in modal

Thu, Jan 23, 20, 00:00, 4 Years ago

1 Keyboard shortcuts in React, the react-hotkeys library

Fri, Aug 30, 19, 00:00, 5 Years ago

1 Date Pipe in Angular 8

Fri, Aug 2, 19, 00:00, 5 Years ago

View All

answered 6 Years ago ashli · Accepted Answer

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:

when create is selected, you toggle the Select for an Input

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.