onChange callback doesn't trigger

[hanshs]

Describe the bug
onChange callback doesn't trigger

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/zealous-aryabhata-39tw8
2. Type something in the field
3. Check console

Expected behavior
Console should print the event

Additional context
It seems to work with last version 1.3.1

[hanshs]

Current workaround is to use onContentDidChange

[ShaMan123]

It seems to work with last version 1.3.1

What about 1.3.2?

Sounds like something from Mathlive

[hanshs]

What about 1.3.2?

Doesn't work with 1.3.2 as seen from the repro sandbox

[tech-chieftain]

Hey @ShaMan123! I'm facing the same issue. I tried toggling onChange even from inside <math-field> itself and still it's not triggered. I'm willing to work on this and help out but it seems that the issue might be from mathlive itself rather than your code.
I have also tried to use onContetDidChange, but found it to be commented in the code, any other workarounds for this?

[tech-chieftain]

After digging into the code, it's as if the onChange event is not being fired when mapped to input as seen here, but when I map it to change, despite not being what we want, it runs it as needed. I'm gonna raise an issue in Mathlive and see where this leads us.

[ShaMan123]

Thanks for this.
I suggest you create a repro only with mathlive to reproduce this issue.
Mathlive might have changed something internally.
Meaning check only the input event.
What does the change event fire and when? Because the last version it fired only after the math input was blurred. This is why I attached to input.
If it fires on every change I don't mind changing it (will we loose data of the event?)
Another thing I would check is what happens if we remove this line:

react-math-view/src/utils.tsx

Line 78 in f20b80c

onInput: 'input',

It might be overriding the the previous line.

[ShaMan123]

Another relevant check would be to test if onInput fires.
If it does we can simply call onInput and onChange together from one function and attach that to the input handler.

[ShaMan123]

Could you mention this issue on the ticket in mathlive?

[tech-chieftain]

So far, I have tried changing onChange: input to onChange: change and as you know it only gets triggered when the element loses focus, but at least it gets triggered. onInput same thing happens to onInput so I don't think that this is an issue on your side. It seems that the input event itself is the culprit.

And thanks for the suggestion, I will create a new repo and tests things out on mathlive itself just to see what happens. Also, I will mention this ticket in mathlive.

Thanks for your support @ShaMan123!

[ShaMan123]

Great. If a PR is needed I will back you, so ask what you need.

[ShaMan123]

And a disclosure: there's another repo that abstracts mathlive to react.
You can try it as well https://github.com/concludio/react-mathlive

[ShaMan123]

Try this as well

react-math-view/src/utils.tsx

Line 84 in f20b80c

//onContentDidChange,

It didn't work previous version, that's why I commented it and attached it in options:

react-math-view/src/utils.tsx

Line 27 in f20b80c

'onContentDidChange',

Try reversing the comment (or not) and listening to this event

[tech-chieftain]

Thank you @ShaMan123! So I've done a bit of testing on mathlive itself directly on html and css. I used the same copy of mathlive.min.js that exists in my node_modules to be sure that nothing affects this test.

I've added the following code in my html file and input worked flawlessly! It was triggered on every keystroke as expected.

  <math-field id="math" virtual-keyboard-mode=manual>
    x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
  </math-field>

  <script>
    math.addEventListener('input', (ev) => {
      console.log(ev.target.value);
    });
  </script>

Then I went and added the following code in this file by referencing _ref.

    useEffect(() => {
      console.log(_ref);
      _ref.current?.addEventListener("input", () => {
        console.log("input");
      });

      return () => {
        _ref.current?.removeEventListener("input", () => {});
      };
    }, []);

To my surprise, the above code didn't work! Theoretically it should, but what I noticed is the fact the console logs input once when the page is first loaded!

[tech-chieftain]

Try this as well

react-math-view/src/utils.tsx

Line 84 in f20b80c

//onContentDidChange,

It didn't work previous version, that's why I commented it and attached it in options:

react-math-view/src/utils.tsx

Line 27 in f20b80c

'onContentDidChange',

Try reversing the comment (or not) and listening to this event

I tried working with onContentDidChange but it brought the caret position bug back again since I'm using a controlled component (I'm using a React state to keep the formula)

[ShaMan123]

This is strange.

Thank you @ShaMan123! So I've done a bit of testing on mathlive itself directly on html and css. I used the same copy of mathlive.min.js that exists in my node_modules to be sure that nothing affects this test.

I've added the following code in my html file and input worked flawlessly! It was triggered on every keystroke as expected.

  <math-field id="math" virtual-keyboard-mode=manual>
    x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
  </math-field>

  <script>
    math.addEventListener('input', (ev) => {
      console.log(ev.target.value);
    });
  </script>

Then I went and added the following code in this file by referencing _ref.

    useEffect(() => {
      console.log(_ref);
      _ref.current?.addEventListener("input", () => {
        console.log("input");
      });

      return () => {
        _ref.current?.removeEventListener("input", () => {});
      };
    }, []);

To my surprise, the above code didn't work! Theoretically it should, but what I noticed is the fact the console logs input once when the page is first loaded!

Can you attach 2 event listeners to input and make sure both fire?