fix(WebComponentWrapper): Fixed event handler removal after prop update

Unmount old attached event handler in case a new one is passed

Author: MarcusNotheis

packages/fiori3/src/internal/WithWebComponent.karma.tsx

@@ -0,0 +1,28 @@
+import { withWebComponent } from './withWebComponent';
+import UI5Button from '@ui5/webcomponents/dist/Button';
+import { mountThemedComponent } from '@shared/tests/utils';
+import { expect } from 'chai';
+import React, { FC, cloneElement } from 'react';
+import { spy } from 'sinon';
+
+describe('withWebComponent', () => {
+  it('Unmount Event Handlers correctly after prop update', () => {
+    let Button: FC<any> = withWebComponent(UI5Button);
+    const callback = spy();
+    const wrapper = mountThemedComponent(<Button onPress={(...args) => callback(...args)} />);
+    const component = wrapper
+      .find('ui5-button')
+      .first()
+      .instance();
+    // @ts-ignore
+    component.onclick({});
+    expect(callback.callCount).to.equal(1, 'onPress handler has not been called');
+    wrapper.setProps({
+      children: cloneElement(wrapper.prop('children'), { onPress: (...args) => callback(...args) })
+    });
+    wrapper.update();
+    // @ts-ignore
+    component.onclick({});
+    expect(callback.callCount).to.equal(2, 'onPress handler has not been called after update');
+  });
+});

packages/fiori3/src/internal/withWebComponent.tsx

@@ -96,7 +96,7 @@ export function withWebComponent<T>(WebComponent): FC<T> {
         const eventHandler = this.props[eventIdentifier] || this.props[alternativeKey];
         if (typeof eventHandler === 'function' && this.eventRegistry[alternativeKey] !== eventHandler) {
           if (this.eventRegistry[alternativeKey]) {
-            this.wcRef.removeEventListener(eventIdentifier, this.eventRegistry[alternativeKey]);
+            this.wcRef.removeEventListener(eventIdentifier, this.eventRegistryWrapped[alternativeKey]);
           }
           this.eventRegistryWrapped[alternativeKey] = this.createEventWrapperFor(eventIdentifier, eventHandler);
           this.wcRef.addEventListener(eventIdentifier, this.eventRegistryWrapped[alternativeKey]);