MDBSelect multiselect: can I programmatically change the tex


Topic: MDBSelect multiselect: can I programmatically change the text showing selected values?

linx pro premium priority asked 2 months ago

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?


Krzysztof Wilk staff answered 2 months ago

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:

  1. 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
  2. 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!


linx pro premium priority answered 1 months ago

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 1 months 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 1 months 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 1 months 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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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