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?
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
I am working with react admin and I am using TabbedForm to add data, the problem is that when I select item from dropDownSelectTree, and then add text to TextInput, the create button change from disable to able and my selected itemed disappeared, I want to know how to keep my selected items when the button change.
This could be a lot of things from incorrect state handling to incorrect props setup. However, without the actual code to check not many people will be able to help you out. So if you may, share your code with us.
I am new to react and need your help.
I have a dropdown and on selecting a value I am checking if selected value is not meeting a condition I need to prompt a dialog box to user if he wants to continue to go with the selection,if he selects yes then selected value to be saved in database.
On select and on selecting yes are two callback functions. My query is how to set the state for current selected value during OnSelect callback so that I can make it available within OnSelectYes also.
You should look into https://react-select.com/async
Will make it easier to make this select component that you want.
With Reactjs I'm using Material UI (core v4.12.3, lab 4.0.0-alpha.60) autocomplete which has been set up as a multiselectible drop down and I'm having trouble keeping the menu open. Whenever an option is selected the popup menu closes and I have to manually open it again just to select another option.
I have already set disableCloseOnSelect={true} But it still doesn't work
From trying to create a minimal example i noticed the issue seems to be due to a MaterialTable component as shown in this example here:
https://codesandbox.io/embed/agitated-payne-h5hqk?codemirror=1
In this example if you expand the drop down, and pick one option the menu closes hence you have to re-expand in order to select a second option
However, if you remove the material table/component/toolbar lines (Such that the render method only returns the autocomplete)
<MaterialTable
components={{
toolbar: props => (
After removing the above you would then see the expected functionality is now seen (expand the dropdown, select an option, the menu still remains open for you to select a second option)
I'm not very experienced on the front end side but does anyone have any advice?
The example link is a very stripped down version and I'm not sure how feasible it would be for me to just remove this without breaking something
I am using material-UI autocomplete for a project that involves rendering a dynamic array based on what you select from the menu. I am finished with the project and now trying to implement multi-select to make choosing things from the menu easier. When you have everything you want from the menu, you click an "Add" button that takes everything you currently have selected and adds it to a table (and adds the properly formatted text into a query on the side, the goal is to build queries for users without them worrying about syntax). When I was not using multiselect, and only adding one thing at a time to the query, I was easily able to clear the autocomplete field by changing the value prop to null. This prevents users from adding the same fields to the query over and over (when add is clicked the options that were added are popped from the list of options). When using multi the rules seem to change and now changing value directly causes an error. My question is, does anyone know of a way to programattically click the x button built in to material-ui autocomplete fields to clear that text field in an event handler? Or is there any reliable way of clearing that on my end?
I'm trying to figure out how to work around what appears to be greedy-focus issues with react-select.
I'm using custom components in my MenuList component that need the focus to work (rc-slider). Basically, I'd like the select to support an additional value for each option and I'm using a Slider to do that.
The issue with the sliders is that I can click on them to change the value, but can't drag the handles, as the Select seems to take back the focus (and even close the drop-down if menuIsOpen is not controlled).
The select does need to re-render when the values change, but I can't figure out why the focus has to change.
https://codesandbox.io/s/epic-moon-cv33b