Fix: Prevent calling onClose() when shiftKey, ctrlKey or metaKey is pressed

packages/docsearch-react/src/DocSearchModal.tsx

@@ -21,6 +21,7 @@ import { useSearchClient } from './useSearchClient';
 import { useTouchEvents } from './useTouchEvents';
 import { useTrapFocus } from './useTrapFocus';
 import { groupBy, identity, noop, removeHighlightTags } from './utils';
+import { isModifierEvent } from './utils/isModifierEvent';
 
 export type ModalTranslations = Partial<{
   searchBox: SearchBoxTranslations;
@@ -156,7 +157,7 @@ export function DocSearchModal({
                 onSelect({ item, event }) {
                   saveRecentSearch(item);
 
-                  if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
+                  if (!isModifierEvent(event)) {
                     onClose();
                   }
                 },
@@ -172,7 +173,7 @@ export function DocSearchModal({
                 onSelect({ item, event }) {
                   saveRecentSearch(item);
 
-                  if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
+                  if (!isModifierEvent(event)) {
                     onClose();
                   }
                 },
@@ -256,7 +257,7 @@ export function DocSearchModal({
                     onSelect({ item, event }) {
                       saveRecentSearch(item);
 
-                      if (!event.shiftKey && !event.ctrlKey && !event.metaKey) {
+                      if (!isModifierEvent(event)) {
                         onClose();
                       }
                     },
@@ -431,9 +432,11 @@ export function DocSearchModal({
             inputRef={inputRef}
             translations={screenStateTranslations}
             getMissingResultsUrl={getMissingResultsUrl}
-            onItemClick={(item) => {
+            onItemClick={(item, event) => {
               saveRecentSearch(item);
-              onClose();
+              if (!isModifierEvent(event)) {
+                onClose();
+              }
             }}
           />
         </div>

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);
         },
       })}
     >

packages/docsearch-react/src/ScreenState.tsx

@@ -32,7 +32,7 @@ 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'];

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 MouseEvent | KeyboardEvent>(
+  event: TEvent
+): boolean {
+  const isMiddleClick = (event as MouseEvent).button === 1;
+
+  return (
+    isMiddleClick ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey
+  );
+}