Home > Blockchain >  React Select: Does not show the selected values in the field after closing the dropdown
React Select: Does not show the selected values in the field after closing the dropdown

Time:12-29

Good evening, i'm using this npm for selecting mutiple values: https://www.npmjs.com/package/react-select

A issue is occurring after choosing multiple values. The select compoment do not show the selected values if I close it and opening it again. The function works but I dont know why the values isn't showing afterwards. I would like to allow a user to see their selected choices and continue to add or remove values without losing it when they close it.

Code here: https://codesandbox.io/s/nice-stonebraker-vx73t?file=/src/App.js

Any reason why?

CodePudding user response:

You cannot wrap the react-select with the MUI select, that's causing the react-select to go on and off from the DOM, and every time it is back it's empty as the state it holds gets reset.

If you check the documentation from MUI select you can tell it is intended to have MenuItem elements inside, not other things.

TL;DR, just don't wrap react-select with the MUI select and you should be fine.

  • Related