CODEWITHSUNDEEP
reactjsmaterial-ui
Netanel Vaknin
Netanel Vaknin

Reputation: 1153

How to filter Material-UI Select component

I want to have the ability of filtering option list in Select component.

Material-UI already have this options in The Autocomplete component API (see filterOptions prop) but not in Select component.

Current behavior:

I have 4 different text fields that using the same options list (state), When I choose one option in one of the text fields I can add him again in the other (3) fields.

Expected behavior

When I choose one option in one of the text fields I want this option to be "hidden" \ "removed" in the other text fields. In addition, When I remove the value from one of the text fields I want him to be available again in the other text fields.

Thank you.

Upvotes: 1

Views: 9059

Answers (2)

Goutham J.M
Goutham J.M

Reputation: 2194

You need to maintain three variables , for example lets say

// contains the list of all users
 var originalList=[users]

// contains list of unselected users , initally will be originalList
var unselectedList=[]

// contains object of selected users
var selectedFields={textfield1:val, textfield2:val}

if user selects a value then remove that user from unselected variable , if he selects different user then add the unselected user from originalList and put back , you can refer to this code sandbox on how to implement it

Edit Material demo (forked)

Upvotes: 0

Sowam
Sowam

Reputation: 1736

You can just add another array named chosenValues or something like that and add values there if they will be selected. In each <TextField/> you can just add filter to options so it will not show values that are in the chosenValues array like:

 options = { options.filter(x => !chosenValues.includes(x) ) }

Upvotes: 1

Related Questions