Fixed on action in tabs for index filters

.changeset/unlucky-mugs-juggle.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+IndexFilters tabs were sometimes not selected if they were placed in the more view menu dropdown, modified this such that onSelect is used instead if the user is attempting to select a tab that is in the more views dropdown menu

polaris-react/src/components/IndexFilters/IndexFilters.tsx

@@ -350,6 +350,17 @@ export function IndexFilters({
     beginEdit(IndexFiltersMode.Filtering);
   }
 
+  const handleTabSelect = useCallback(
+    (selectedTabIndex: number) => {
+      onSelect?.(selectedTabIndex);
+      const selectedTab = tabs[selectedTabIndex];
+      if (selectedTab?.onAction) {
+        selectedTab.onAction();
+      }
+    },
+    [onSelect, tabs],
+  );
+
   return (
     <div
       className={styles.IndexFiltersWrapper}
@@ -399,7 +410,7 @@ export function IndexFilters({
                         <Tabs
                           tabs={tabs}
                           selected={selected}
-                          onSelect={onSelect}
+                          onSelect={handleTabSelect}
                           disabled={Boolean(
                             mode !== IndexFiltersMode.Default || disabled,
                           )}

polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx

@@ -592,4 +592,76 @@ describe('IndexFilters', () => {
       expect(onEditStart).toHaveBeenCalledWith(IndexFiltersMode.EditingColumns);
     });
   });
+
+  describe('tab actions', () => {
+    it('calls both onSelect and onAction when a tab is selected', () => {
+      const onSelect = jest.fn();
+      const onAction = jest.fn();
+      const tabs = [
+        {
+          id: 'tab1',
+          content: 'Tab 1',
+          onAction,
+        },
+      ];
+
+      const wrapper = mountWithApp(
+        <IndexFilters {...defaultProps} tabs={tabs} onSelect={onSelect} />,
+      );
+
+      wrapper.find(Tabs)!.trigger('onSelect', 0);
+
+      expect(onSelect).toHaveBeenCalledWith(0);
+      expect(onAction).toHaveBeenCalled();
+    });
+
+    it('calls onSelect but not onAction when selected tab has no onAction', () => {
+      const onSelect = jest.fn();
+      const tabs = [
+        {
+          id: 'tab1',
+          content: 'Tab 1',
+        },
+      ];
+
+      const wrapper = mountWithApp(
+        <IndexFilters {...defaultProps} tabs={tabs} onSelect={onSelect} />,
+      );
+
+      wrapper.find(Tabs)!.trigger('onSelect', 0);
+
+      expect(onSelect).toHaveBeenCalledWith(0);
+    });
+
+    it('calls the valid onAction when switching between tabs', () => {
+      const onAction1 = jest.fn();
+      const onAction2 = jest.fn();
+      const tabs = [
+        {
+          id: 'tab1',
+          content: 'Tab 1',
+          onAction: onAction1,
+        },
+        {
+          id: 'tab2',
+          content: 'Tab 2',
+          onAction: onAction2,
+        },
+      ];
+
+      const wrapper = mountWithApp(
+        <IndexFilters {...defaultProps} tabs={tabs} />,
+      );
+
+      // Select first tab
+      wrapper.find(Tabs)!.trigger('onSelect', 0);
+      expect(onAction1).toHaveBeenCalledTimes(1);
+      expect(onAction2).not.toHaveBeenCalled();
+
+      // Select second tab
+      wrapper.find(Tabs)!.trigger('onSelect', 1);
+      expect(onAction1).toHaveBeenCalledTimes(1);
+      expect(onAction2).toHaveBeenCalledTimes(1);
+    });
+  });
 });