Bug: Multi function calling after removing imparative handle

[BartJanvanAssen]

Hi @break-stuff,

We notice some changes since this change update: a6d7cec

It seems we have a side affect that the onChange event on our custom element (our custom checkbox) now triggers 3 times. Some times it actually stacks.

I was playing a bit with the outcome of the generated react code:
If memoized the ref function it seems the normal behavior is back and the react component only triggers one time per click.

Curious to know what you think :-) We are now rolling back to the previous version of the cem tools.

[break-stuff]

Is this something you are able to recreate so I can debug a bit?

Also, is this a custom change event or is this the native event bubbling up?

[BartJanvanAssen]

Hi @break-stuff, i made a repo for you to play with. Some steps in the readme i describe the options as workarounds.
Don't think the generation of the react wrappers is now correctly implemented, but i think you'll manage to see the problem

Let me know if you need anything :-)

https://github.com/BartJanvanAssen/cem-tools-event-problem

[BartJanvanAssen]

@break-stuff does that work for you?

[break-stuff]

It does! Thank you for the great demo! We may have to go with the useCallback approach since the old method had issues with forwarding refs.

[break-stuff]

I regenerated the wrappers, and it looks like it's working fine. I don't see any difference between what's there and useCallback.

[pruik]

We just ran into this issue again after upgrading to 1.7.3, and perhaps we can provide a bit more context now.

It looks like listeners are added every time the React component rerenders.

I created a small example:

import { CustomTextInput } from "--some-react-wrapped-component--";
import { useState } from "react";

const TextInput = () => {
  const [value, setValue] = useState("startValue");

  const onInput = () => {
    console.log("onInput");
  };

  const onChange = (event: CustomEvent) => {
    console.log("onChange");
    setValue("Something! " + event.target!.value);
  };

  return <CustomTextInput value={value} onInput={onInput} onChange={onChange} />;
};

export default TextInput;

In version 1.7.0 this would generate this logging when repeatedly doing a single input and then blurring the component:
(We have a known issue where the input event is triggered twice because the CustomTextInput has jsdoc for the input event)

In version 1.7.3 the same test case produces this output:

[pruik]

Perhaps a good thing to add to the previous example, since I'm not sure if it's relevant. The CustomTextInput stops propagation of the native input and change events, and then dispatches a new CustomEvent(type, { bubbles: true, cancelable: true, composed: true, }))

[break-stuff]

This is super helpful. Thank you!

[break-stuff]

Sorry, it looks like my PR automatically closed this. I had patched it, but have been having an issue deploying it for some reason.

I was already in the process of upgrading the package and migrating it to the WC Toolkit. I went ahead and included the new wrapper package. Let me know if you are able to try that out. If not, I will work on getting the patch here for you.