[Bug]: onChange Event not triggered on event inline html in React
InitialCrow opened this issue · comments
Before submitting...
- I have searched for duplicate or closed issues.
- I have read the CONTRIBUTING document and my issue is following the guidelines.
- I have read the template completely before filling it in.
Context
Hello again,
I have that select in react since alpha release I cant trigger onChange event in react on change work on html but not work anymore on react
Current Behavior
I have that select
<div className="input-field col s12 outlined" key={classNo + state.title + "_" + i} >
<select ref={(node) => { M.FormSelect.init(node,{}) }} id={form.id} name={form.name} defaultValue={form.defaultValue} className={form.class} onChange={(evt) => { form.onChange ? form.onChange(evt, form, { state: state, setState: setState }) : null }} >
{form.option.map((opt, i) => (<option key={"opt_" + i} value={opt.value} disabled={opt.disabled}>{opt.text}</option>))}
</select>
<label htmlFor={form.id}>{form.label}</label>
{renderRequiredMessage(form)}
</div>
the onChange is not firering if I remove the select initialisation M.FormSelect.init(node,{}), the event is triggered on default select, that worked before the alpha release
Expected behavior
the onChange should trigger by default
Possible Solutions or Causes
Maybe an evt.stopPropagation on bad state or preventDefault
Steps to reproduce
Just try trigger onChange event on select in react
Your Environment
- Version used: latest
- Browser Name and version: firefox latest
- Operating System and version (desktop or mobile): ubuntu latest
- Additional information you want to tell us:
I found the bug so its at this line if (selectionHasChanged) this.el.dispatchEvent(new Event('change'));
line 163 of select.ts you need to add option to event to allow propagation , because react overload default onchange with onChange function on his core and with your dispatchEvent you prevent this so the right way should be
if (selectionHasChanged) this.el.dispatchEvent(new Event('change'),{bubbles: true});
I will try to make a fix of all events of all composents if your are agree? because for now materialize is unusable to front framework like react and emberjs for example
I'll like to fix that soon of possible cause it block me for work. ty