fix(ListBoxInline): remove correct event listeners

qlik-oss · Mar 15, 2023 · 645a088 · 645a088
1 parent 41029e3
commit 645a088
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/apis/nucleus/src/components/listbox/ListBoxInline.jsx b/apis/nucleus/src/components/listbox/ListBoxInline.jsx
@@ -147,15 +147,16 @@ function ListBoxInline({ options, layout }) {
     };
     if (selections) {
       if (!selections.isModal()) {
-        selections.on('deactivated', hide);
         selections.on('activated', show);
+        selections.on('deactivated', hide);
       }
       setShowToolbar(selections.isActive());
     }
+
     return () => {
       if (selections && selections.removeListener) {
-        selections.removeListener('deactivated', show);
-        selections.removeListener('activated', hide);
+        selections.removeListener('activated', show);
+        selections.removeListener('deactivated', hide);
       }
     };
   }, [selections, toolbar]);

diff --git a/apis/nucleus/src/components/listbox/__tests__/list-box-inline.test.jsx b/apis/nucleus/src/components/listbox/__tests__/list-box-inline.test.jsx
@@ -107,7 +107,7 @@ describe('<ListboxInline />', () => {
       on: jest.fn().mockImplementation((event, func) => (eventTriggered) => {
         if (event === eventTriggered) func();
       }),
-      off: jest.fn(),
+      removeListener: jest.fn(),
     };
 
     options = {
@@ -191,9 +191,9 @@ describe('<ListboxInline />', () => {
       // expect(renderer.toJSON().props.onKeyDown).toBe('keyboard-navigation');
 
       expect(selections.on).toHaveBeenCalledTimes(2);
-      expect(selections.on.mock.calls[0][0]).toBe('deactivated');
-      expect(selections.on.mock.calls[1][0]).toBe('activated');
-      expect(selections.off).not.toHaveBeenCalled();
+      expect(selections.on.mock.calls[0][0]).toBe('activated');
+      expect(selections.on.mock.calls[1][0]).toBe('deactivated');
+      expect(selections.removeListener).not.toHaveBeenCalled();
     });
 
     test('should render properly with search toggle option', async () => {
@@ -232,8 +232,8 @@ describe('<ListboxInline />', () => {
       });
       expect(selections.on).toHaveBeenCalledTimes(2);
       expect(selections.isModal).toHaveBeenCalledTimes(1);
-      expect(selections.on.mock.calls[0][0]).toBe('deactivated');
-      expect(selections.on.mock.calls[1][0]).toBe('activated');
+      expect(selections.on.mock.calls[0][0]).toBe('activated');
+      expect(selections.on.mock.calls[1][0]).toBe('deactivated');
     });
 
     test('should render without search and show search button', async () => {
@@ -259,5 +259,17 @@ describe('<ListboxInline />', () => {
         autoFocus: false,
       });
     });
+
+    test('should remove correct listeners on unmount', async () => {
+      await render();
+
+      const activatedFn = selections.on.mock.calls[0][1];
+      const deactivatedFn = selections.on.mock.calls[1][1];
+
+      renderer.unmount();
+
+      expect(selections.removeListener).toHaveBeenCalledWith('activated', activatedFn);
+      expect(selections.removeListener).toHaveBeenCalledWith('deactivated', deactivatedFn);
+    });
   });
 });