onChange not firing when clicking on toolbar buttons

[zszep]

There is an inconsitency with the onChange function. When e.g. selecting some entered text and clicking the "bold" button from the toolbar, the onchange function is not fired immediately. Only when clicking back into the mui-rte textbox, the event is being fired.
I have an example on sandbox

[mmaass]

mui-rte binds to the onChange function of the draftJs editor and calls your onChange function. So onChange not being called as you described is a draftJs issue.

I don't know what your use-case is, but the onChange function gets called not only when you click back into the mui-rte textbox, but also when you click anywhere but the mui-rte toolbar. So my guess would be onChange gets called anytime the toolbar loses focus (onBlur).

[zszep]

@mmaass You're right with your assumption. The following is happening: the user selects a text portion in the editor, clicks the "bold" button on the toolbar and then immediately clicks the "save" button on the toolbar (so he never leaves the toolbar). As I am using react form hooks as my form library, I had to watch for changes of the mui-rte textbox in the onChange event to track changes. So the "bold action" got lost and never saved.

[niuware]

Hi @zszep

As for the use case you described:

the user selects a text portion in the editor, clicks the "bold" button on the toolbar and then immediately clicks the "save" button on the toolbar (so he never leaves the toolbar).

When pressing the save button, the bold style is already in the state so it is not lost, but the onChange event is not triggered as the draft-js's Editor does not fire it.

[zszep]

@niuware See my use case . Just have to use the onChange event to make react hook forms work.

[niuware]

@zszep I got it. It should be fixed on version 1.23.1. Please check it out.

[mmaass]

tested it and it works. gj.

[zszep]

Can confirm that it is working as expected on version 1.23.1