fix: prevent calling onClose() when shiftKey, ctrlKey or `metaK…

…ey` is pressed (#1870)
algolia · Apr 26, 2023 · b9a3899 · b9a3899
1 parent d0c15d6
commit b9a3899
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 10 deletions.
diff --git a/packages/docsearch-react/src/DocSearchModal.tsx b/packages/docsearch-react/src/DocSearchModal.tsx
@@ -20,7 +20,13 @@ import type {
 import { useSearchClient } from './useSearchClient';
 import { useTouchEvents } from './useTouchEvents';
 import { useTrapFocus } from './useTrapFocus';
-import { groupBy, identity, noop, removeHighlightTags } from './utils';
+import {
+  groupBy,
+  identity,
+  noop,
+  removeHighlightTags,
+  isModifierEvent,
+} from './utils';
 
 export type ModalTranslations = Partial<{
   searchBox: SearchBoxTranslations;
@@ -156,7 +162,7 @@ export function DocSearchModal({
                 onSelect({ item, event }) {
                   saveRecentSearch(item);
 
-                  if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
+                  if (!isModifierEvent(event)) {
                     onClose();
                   }
                 },
@@ -172,7 +178,7 @@ export function DocSearchModal({
                 onSelect({ item, event }) {
                   saveRecentSearch(item);
 
-                  if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
+                  if (!isModifierEvent(event)) {
                     onClose();
                   }
                 },
@@ -256,7 +262,7 @@ export function DocSearchModal({
                     onSelect({ item, event }) {
                       saveRecentSearch(item);
 
-                      if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
+                      if (!isModifierEvent(event)) {
                         onClose();
                       }
                     },
@@ -431,9 +437,11 @@ export function DocSearchModal({
             inputRef={inputRef}
             translations={screenStateTranslations}
             getMissingResultsUrl={getMissingResultsUrl}
-            onItemClick={(item) => {
+            onItemClick={(item, event) => {
               saveRecentSearch(item);
-              onClose();
+              if (!isModifierEvent(event)) {
+                onClose();
+              }
             }}
           />
         </div>

diff --git a/packages/docsearch-react/src/Results.tsx b/packages/docsearch-react/src/Results.tsx
@@ -24,7 +24,7 @@ interface ResultsProps<TItem extends BaseItem>
     runDeleteTransition: (cb: () => void) => void;
     runFavoriteTransition: (cb: () => void) => void;
   }) => React.ReactNode;
-  onItemClick: (item: TItem) => void;
+  onItemClick: (item: TItem, event: KeyboardEvent | MouseEvent) => void;
   hitComponent: DocSearchProps['hitComponent'];
 }
 
@@ -104,8 +104,8 @@ function Result<TItem extends StoredDocSearchHit>({
       {...getItemProps({
         item,
         source: collection.source,
-        onClick() {
-          onItemClick(item);
+        onClick(event) {
+          onItemClick(item, event);
         },
       })}
     >

diff --git a/packages/docsearch-react/src/ScreenState.tsx b/packages/docsearch-react/src/ScreenState.tsx
@@ -32,7 +32,10 @@ export interface ScreenStateProps<TItem extends BaseItem>
   state: AutocompleteState<TItem>;
   recentSearches: StoredSearchPlugin<StoredDocSearchHit>;
   favoriteSearches: StoredSearchPlugin<StoredDocSearchHit>;
-  onItemClick: (item: InternalDocSearchHit) => void;
+  onItemClick: (
+    item: InternalDocSearchHit,
+    event: KeyboardEvent | MouseEvent
+  ) => void;
   inputRef: React.MutableRefObject<HTMLInputElement | null>;
   hitComponent: DocSearchProps['hitComponent'];
   indexName: DocSearchProps['indexName'];

diff --git a/packages/docsearch-react/src/utils/index.ts b/packages/docsearch-react/src/utils/index.ts
@@ -1,4 +1,5 @@
 export * from './groupBy';
 export * from './identity';
+export * from './isModifierEvent';
 export * from './noop';
 export * from './removeHighlightTags';
diff --git a/packages/docsearch-react/src/utils/isModifierEvent.ts b/packages/docsearch-react/src/utils/isModifierEvent.ts
@@ -0,0 +1,17 @@
+/**
+ * Detect when an event is modified with a special key to let the browser
+ * trigger its default behavior.
+ */
+export function isModifierEvent<TEvent extends KeyboardEvent | MouseEvent>(
+  event: TEvent
+): boolean {
+  const isMiddleClick = (event as MouseEvent).button === 1;
+
+  return (
+    isMiddleClick ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey
+  );
+}