Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
3 tasks done
InitialCrow opened this issue Jul 17, 2023 · 1 comment · Fixed by #399
Closed
3 tasks done

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

InitialCrow opened this issue Jul 17, 2023 · 1 comment · Fixed by #399
Labels
bug Something isn't working

Comments

@InitialCrow
Copy link

InitialCrow commented Jul 17, 2023

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:
@InitialCrow InitialCrow added the bug Something isn't working label Jul 17, 2023
@InitialCrow InitialCrow reopened this Jul 17, 2023
@InitialCrow
Copy link
Author

InitialCrow commented Jul 18, 2023

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

InitialCrow added a commit to InitialCrow/materialize that referenced this issue Jul 18, 2023
… with framework (e.g react)

Actualy materialize is broken on react and ember js due to non propageable event for e.g react
overload default onchange event with onChange custom event since alpha release materialize not fired
event due to non propageable event on components

fix  materializecss#398
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants