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?
Hi!
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 :)
Keep coding!
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?
Krzysztof Wilk staff commented 3 years ago
Hi!
The getData event is deprecated. You can use the getValue one to get selected items. The problem with selecting all options seems to be also on your side, we'll check that.
linx pro premium priority commented 3 years ago
Thanks. I misspoke, I was using getValue. (For what it's worth, it's not clear from the MDB React docs that getData is deprecated.) How would you suggest detecting and handling a Select All click?
Krzysztof Wilk staff commented 3 years ago
I'm afraid there's no simple way to achieve that. You can store your data in the useState hook, select a "Select all" checkbox via JS selectors and append an event listener which will check if it is checked or not - then return data from state or an empty array. Sorry for the inconvenience.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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