Only call element.on when the merchant passes in a callback

[awalker-stripe]

Summary & motivation

See #360. Re-implements the functionality, fixing two issues:

• Includes Element as a dependency for attaching the event handler, fixing [BUG]: LinkAuthenticationElement no longer fires onChange event when it is mounted. #365
• Adds optimization that keeps .on and .off from firing if the callback changes on every render.

Testing & documentation

• Manually tested in storybook to see that events still fire
• Manually tested in local integration with useCallback, strict mode, & changing/adding/removing callbacks for an event.
• Tested it on a reproduction of the issue in [BUG]: LinkAuthenticationElement no longer fires onChange event when it is mounted. #365: I verified events didn't fire correctly in v1.16.1 (version with the bug), did in v1.16.2 (latest version that reverted the bad change), and still fire correctly with these changes.

[awalker-stripe]

This causes an extra render compared to before, but this seemed cleaner than modifying useAttachEvent to return some sort of addEvent function that is manually called here.

[bmathews-stripe]

can't remember the behavior of this in the later versions of react. does this throw a warning/error indicating setState being called after a component is unmounted?

[awalker-stripe]

Oops, removed this line, since it's a no-op.

Interestingly, I tested rendering an element, and then after a timeout, unmounting. It seems to just work — no logs/errors.

[bmathews-stripe]

To test the failure scenario you were able to create repro steps for, maybe try creating a wrapper that simulates your repro steps? Can't remember the details exactly, but something like this?

      const mockHandler = jest.fn();
      const Wrapper = () => {
        const component =  useMemo(() => <CardElement onChange={mockHandler} />, []);
        return component;
      }
      
      render(
        <Elements stripe={mockStripe}>
          <Wrapper />
        </Elements>
      );

      const changeEventMock = Symbol('change');
      simulateEvent('change', changeEventMock);
      expect(mockHandler).toHaveBeenCalledWith(changeEventMock);

[awalker-stripe]

I tried to do useMemo like the repro but unfortunately didn't have much luck. However, along this same idea of copying the repro, I got a test together that leaves elements undefined, preventing it from creating an element on the first render. This test fails on v1.16.1 but passes in 1.16.2 & here!