fix(quick-search): Quick Search Navigation (#3622)

* fix(quick-search): Quick Search Navigation * fix(quick-search): Quick Search Navigation * fix(quick-search): Quick Search Navigation * fix(quick-search): Quick Search Navigation * fix(quick-search): Quick Search Navigation * fix(quick-search): Quick Search Navigation * fix(quick-search): Quick Search Navigation * fix(quick-search): Quick Search Navigation --------- Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
box · Aug 23, 2024 · b814223 · b814223
1 parent 3b5c83f
commit b814223
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 13 deletions.
diff --git a/src/components/table/__tests__/makeSelectable.test.js b/src/components/table/__tests__/makeSelectable.test.js
@@ -817,6 +817,38 @@ describe('components/table/makeSelectable', () => {
                     shortcut.handler();
                 });
             });
+
+            describe('QuickSearch specific', () => {
+                const hotKey = 'down';
+                test.each([['quickSearchResultItemFooBar'], ['quickSearchRecentItemFooBar']])(
+                    'should not set focus if target is %s',
+                    targetClass => {
+                        const wrapper = getWrapper({
+                            selectedItems: ['a'],
+                        });
+                        wrapper.setState({ focusedIndex: undefined });
+                        const instance = wrapper.instance();
+                        const shortcut = instance.getHotkeyConfigs().find(h => h.get('key') === hotKey);
+                        shortcut.handler({ target: { className: targetClass } });
+                        expect(wrapper.state('focusedIndex')).toEqual(undefined);
+                    },
+                );
+
+                test.each([['bpSmallListItem'], ['radixCollectionItem']])(
+                    'should not set focus if dataset contains %s',
+                    datasetKey => {
+                        const wrapper = getWrapper({
+                            selectedItems: ['a'],
+                        });
+                        wrapper.setState({ focusedIndex: undefined });
+                        const instance = wrapper.instance();
+                        const shortcut = instance.getHotkeyConfigs().find(h => h.get('key') === hotKey);
+                        const event = { target: { dataset: { [datasetKey]: true } } };
+                        shortcut.handler(event);
+                        expect(wrapper.state('focusedIndex')).toEqual(undefined);
+                    },
+                );
+            });
         });
 
         describe('GridView specific', () => {
@@ -848,6 +880,7 @@ describe('components/table/makeSelectable', () => {
                     shortcut.handler({ target: { role: 'slider' } });
                     expect(wrapper.state('focusedIndex')).toEqual(undefined);
                 });
+
                 test('should call event.preventDefault() and set focus to next item', () => {
                     const wrapper = getWrapper({
                         gridColumnCount,

diff --git a/src/components/table/makeSelectable.js b/src/components/table/makeSelectable.js
@@ -148,7 +148,7 @@ function makeSelectable(BaseTable) {
                     key: 'down',
                     description: <FormattedMessage {...messages.downDescription} />,
                     handler: event => {
-                        if (this.isQuickFilter(event)) {
+                        if (this.isTargetQuickSearch(event)) {
                             return;
                         }
 
@@ -167,7 +167,7 @@ function makeSelectable(BaseTable) {
                     key: 'up',
                     description: <FormattedMessage {...messages.upDescription} />,
                     handler: event => {
-                        if (this.isQuickFilter(event)) {
+                        if (this.isTargetQuickSearch(event)) {
                             return;
                         }
 
@@ -221,7 +221,7 @@ function makeSelectable(BaseTable) {
                     key: 'right',
                     description: <FormattedMessage {...messages.downDescription} />,
                     handler: event => {
-                        if (this.isTargetSlider(event) || this.isQuickFilter(event)) {
+                        if (this.isTargetSlider(event) || this.isTargetQuickSearch(event)) {
                             return;
                         }
 
@@ -240,7 +240,7 @@ function makeSelectable(BaseTable) {
                     key: 'left',
                     description: <FormattedMessage {...messages.upDescription} />,
                     handler: event => {
-                        if (this.isTargetSlider(event) || this.isQuickFilter(event)) {
+                        if (this.isTargetSlider(event) || this.isTargetQuickSearch(event)) {
                             return;
                         }
 
@@ -257,7 +257,7 @@ function makeSelectable(BaseTable) {
                     key: 'down',
                     description: <FormattedMessage {...messages.downDescription} />,
                     handler: event => {
-                        if (this.isTargetSlider(event) || this.isQuickFilter(event)) {
+                        if (this.isTargetSlider(event) || this.isTargetQuickSearch(event)) {
                             return;
                         }
 
@@ -276,7 +276,7 @@ function makeSelectable(BaseTable) {
                     key: 'up',
                     description: <FormattedMessage {...messages.upDescription} />,
                     handler: event => {
-                        if (this.isTargetSlider(event) || this.isQuickFilter(event)) {
+                        if (this.isTargetSlider(event) || this.isTargetQuickSearch(event)) {
                             return;
                         }
 
@@ -590,11 +590,7 @@ function makeSelectable(BaseTable) {
             }, SEARCH_TIMER_DURATION);
 
             const index = searchStrings.findIndex(
-                string =>
-                    string
-                        .trim()
-                        .toLowerCase()
-                        .indexOf(this.searchString) === 0,
+                string => string.trim().toLowerCase().indexOf(this.searchString) === 0,
             );
 
             if (index !== -1) {
@@ -612,8 +608,36 @@ function makeSelectable(BaseTable) {
 
         isTargetSlider = event => event.target?.role === 'slider';
 
-        // Workaround for focus conflicting with Blueprint components in Search Quick Filters, not needed once Blueprint table is integrated
-        isQuickFilter = event => event.target?.dataset && 'radixCollectionItem' in event.target.dataset;
+        // Workaround for focus conflicting with Blueprint components for QuickSearch result, recent items and Quick Filters
+        isTargetQuickSearch = event => {
+            if (!event.target) {
+                return false;
+            }
+
+            const { className, dataset } = event.target;
+
+            // QuickSearch Recent Item
+            if (className?.includes('quickSearchRecentItem')) {
+                return true;
+            }
+
+            // Quick Search Result Item
+            if (className?.includes('quickSearchResultItem')) {
+                return true;
+            }
+
+            // Blueprint's <FilterChip>
+            if (dataset && 'radixCollectionItem' in dataset) {
+                return true;
+            }
+
+            // Blueprint's <SmallList>
+            if (dataset && 'bpSmallListItem' in dataset) {
+                return true;
+            }
+
+            return false;
+        };
 
         render() {
             const { className, data } = this.props;