materializecss / materialize

Materialize, a web framework based on Material Design

Home Page:https://materializeweb.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug]: onChange Event not triggered on event inline html in React

InitialCrow opened this issue · comments

Before submitting...

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