Topic: MDBSelect onChange event do not work

zkrapavickas free asked 5 years ago


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>

tokerodev priority answered 3 years ago


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 priority commented 3 years ago

Hey @Wojciech Staniszewski,

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?


Aliaksandr Andrasiuk staff answered 5 years ago


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 premium commented 4 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 commented 4 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 premium commented 4 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?


zkrapavickas free answered 5 years ago


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 commented 4 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


Aliaksandr Andrasiuk staff answered 5 years ago


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.



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

  • ForumUser: 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