Topic: MDBSelect onChange event do not work
Expected behavior Fire onChange event
Actual behavior onChange event do not work.
Resources (screenshots, code snippets etc.)
<MDBSelect label="Ticket type" onChange={() => { alert("changed")}}>
<MDBSelectInput selected="Choose ticket type" />
<MDBSelectOptions>
<MDBSelectOption disabled>Choose ticket type</MDBSelectOption>
<MDBSelectOption value="1">Billing</MDBSelectOption>
<MDBSelectOption value="2">Technical</MDBSelectOption>
</MDBSelectOptions>
</MDBSelect>
Hi,
getValue invokes every time you change the selected value, it works similar to onChange event but gives access to the only value's, not event object.
All the properties are presented on the page's API tab -> as I mentioned before : choose the API tab on the top of the page.
Hope I could help.
Best regards.
kalmservices pro premium commented 5 years ago
So if we need to do something with a control, such as perform basic validations, how are we supposed to access the control on change? getValue gives us the value, getTextContent gives the text value, but I need the control name in the event. This is 9 months old, and you still haven't made any updates to it based on the API documentation, do you at least have a work around for those of us with forms that might have more than one select input who need to know more than the value?
Jakub Chmura staff premium commented 5 years ago
HI @kalmservices,
We are currently working on a Selecta code refactor. We plan to add onChange to the functionality of the new select.
We are at the last stage of work on this component and plan to make it available on the next release.
kalmservices pro premium commented 5 years ago
The new release is here and there is no onChange functionality on the new select v5, is there an estimated timeframe for when you plan to implement the onChange property?
Hi,
Select component does not support onChange event. Instead, you can use getValue or getTextContent methods.
You can familiarize with MDBSelect's API by following the link and choosing the API tab on the top of the page.
Hope I could help.
Best regards.
So, how to detect change in Select control ? Pulling getValue on timer every second sounds like horrible workaround.
https://mdbootstrap.com/docs/react/forms/multiselect/ <-- there is no documentation there, only some samples, where to find a list of properties and events ?
Jakub Chmura staff premium commented 5 years ago
Hi @zkrapavickas,
It's not possible right now, we will add this feature in near future. For now, we have another big task with high priority.
You can do a walkaround for this. Please listen to a getValue output in componentDidUpdate, and when this value was changed do an action what you want.
You can read more about this component in an API tab on the select documentation page:
https://mdbootstrap.com/docs/react/forms/multiselect/#docsTabsAPI
Best, Kuba
Hey, any updates regarding the onChange event? In a comment above (1 year old), it's mentioned that the onChange event is going to be added in an upcoming release, but I've noticed it's still not triggering.
Wojciech Staniszewski staff commented 3 years ago
We have already added it, but since the select does not support the onChange event, something might not work correctly. For now, just try to do it as above.
tokerodev pro premium priority commented 3 years ago
Unfortunately, the above solution with getValue does not work in my scenario as I need access to the change event itself (the validation library I have integrated needs access to the whole event, not just the new value).
Is there at least a workaround that could give me access to the onChange event?
Wojciech Staniszewski staff commented 3 years ago
Could You send me some test code with which I can try to implement a workaround to your case?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.18.0
- Device: PC
- Browser: Google Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No