Topic: MDBSelect multiselect: can I programmatically change the text showing selected values?
I'm working with an MDBSelect multiselect. Is there a way to programmatically change the selected values text that is rendered in .select-input (e.g. "One, Two, Three")?
My React app uses Redux. I have an onClick handler for MDBSelect that updates the app state with the selected values. When a new state is dispatched, the MDBSelect option checkboxes render correctly, but the text in .select-input is out of sync with the state.
In my onClick handler, I tried using document.querySelector to access .select-input and change its value manually, but that didn't work. How can I change the selected values text?
Thanks for reporting that. It is a bug. I'm afraid there's no other way to set this value programmatically - our goal is to take advantage of the React State management and make it this way. But I think there's a workaround for that. You can try to:
- Wrap your select component into the simple functional component with properties like "data". When some props of the outer component will change - it will cause the whole Select one to rerender, so the label should be also updated
- You can write a simple custom hook to force a refresh of the app. It will also cause the Select to rerender - not only some states inside our package.
Anyway - we will fix that as soon as possible :)
Thanks. I tried workaround #1, but the issue persists. I'm looking into what #2 would entail.
While using Redux with MDB Multiselect, I've also noticed that when the Select All option is checked, clicking it again does not toggle the options off. It doesn't fire the getData event either, so I can't put a workaround in the handler. Could this be a symptom of the same underlying issue?
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 3.0.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No