fix(listbox): always show selection toolbar when listbox opens in pop…

…over
qlik-oss · Mar 30, 2023 · 3442169 · 3442169
1 parent 5a52def
commit 3442169
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/apis/nucleus/src/components/listbox/ListBoxInline.jsx b/apis/nucleus/src/components/listbox/ListBoxInline.jsx
@@ -82,6 +82,7 @@ function ListBoxInline({ options, layout }) {
     scrollState = undefined,
     renderedCallback,
     toolbar = true,
+    isCollapsed = false,
   } = options;
 
   // Hook that will trigger update when used in useEffects.
@@ -154,6 +155,14 @@ function ListBoxInline({ options, layout }) {
         setShowSearch(false);
       }
     };
+    if (isCollapsed) {
+      if (!selections.isActive()) {
+        selections.begin('/qListObjectDef');
+        selections.on('activated', show);
+        selections.on('deactivated', hide);
+      }
+      setShowToolbar(isCollapsed);
+    }
     if (selections) {
       if (!selections.isModal()) {
         selections.on('activated', show);
@@ -168,7 +177,7 @@ function ListBoxInline({ options, layout }) {
         selections.removeListener('deactivated', hide);
       }
     };
-  }, [selections]);
+  }, [selections, isCollapsed]);
 
   useEffect(() => {
     if (!searchContainer || !searchContainer.current) {

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
@@ -123,6 +123,7 @@ describe('<ListboxInline />', () => {
       selections,
       update: undefined,
       fetchStart: 'fetchStart',
+      isCollapsed: false,
     };
 
     useRef.mockReturnValue({ current: 'current' });
@@ -260,6 +261,24 @@ describe('<ListboxInline />', () => {
       });
     });
 
+    test('should show toolbar when opened in a popover', async () => {
+      options.search = false;
+      options.isCollapsed = true;
+      await render();
+      const actionToolbars = renderer.root.findAllByType(ActionsToolbar);
+      expect(actionToolbars).toHaveLength(1);
+
+      const typographs = renderer.root.findAllByType(Typography);
+      expect(typographs).toHaveLength(1);
+
+      expect(ListBoxSearch.mock.calls[0][0]).toMatchObject({
+        visible: false,
+      });
+      expect(selections.on).toHaveBeenCalledTimes(2);
+      expect(selections.on.mock.calls[0][0]).toBe('activated');
+      expect(selections.on.mock.calls[1][0]).toBe('deactivated');
+    });
+
     test('should remove correct listeners on unmount', async () => {
       await render();