@planningcenter/topbar 12.4.1-qa-980.1 → 12.4.1-qa-980.2

package/dist/topbar.js

@@ -4444,6 +4444,8 @@ function hasSelectedText(element) {
   return selectedInField || ((_b = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "") !== "";
 }
 
+const resultId = (listboxId, index) => `${listboxId}-result-${index}`;
+
 // eslint-disable-next-line sort-keys-fix/sort-keys-fix
 const COPIED_TIMING = {
   enter: 240,
@@ -4488,7 +4490,7 @@ function indexOf(highlight, items, list) {
 // A list that grows, fills in, or reorders under the same `list` keeps its
 // highlight on the same item, found again by key.
 // Disabled, nothing is highlighted and the keys and pointer leave it alone.
-function useResultNavigation(items, list, enabled = true) {
+function useResultNavigation(items, list, listboxId, enabled = true) {
   const [highlight, setHighlight] = React.useState({
     index: 0,
     list
@@ -4517,9 +4519,17 @@ function useResultNavigation(items, list, enabled = true) {
       highlightIndex((highlightedIndex + step + items.length) % items.length);
     } else if (event.key === "Enter" && highlighted && !event.nativeEvent.isComposing) {
       event.preventDefault();
-      open(highlighted.url, {
-        newTab: hasCommandKey(event)
-      });
+      // Clicking the result's own link, rather than going to its URL, lets
+      // routers like Turbo follow it as they would a click, and closes
+      // search the same way.
+      const link = hasCommandKey(event) ? null : document.getElementById(resultId(listboxId, highlightedIndex));
+      if (link) {
+        link.click();
+      } else {
+        open(highlighted.url, {
+          newTab: hasCommandKey(event)
+        });
+      }
     } else if (isCopyShortcut(event) && highlighted && !hasSelectedText(event.currentTarget)) {
       event.preventDefault();
       copy(highlighted.url);
@@ -5382,8 +5392,6 @@ function EndOfResultsObserver({
   });
 }
 
-const resultId = (listboxId, index) => `${listboxId}-result-${index}`;
-
 var styles$e = {"result":"result-Thq2C","title":"title-KYUEn","subtitle":"subtitle-R2haq","image":"image-KVDor","avatar":"avatar-6Gh62","photo":"photo-FZR3Q","badge":"badge-trUKt"};
 
 function SearchResult({
@@ -6126,7 +6134,7 @@ function SearchPanel({
   // A narrow window with a keyboard and mouse keeps both, as does the desktop
   // layout on a touch device, whose keyboard hints still advertise them.
   const touchOnly = useMediaQuery("(hover: none) and (pointer: coarse)");
-  const navigation = useResultNavigation(items, hasTerm ? sections : RECENTS, !(mobile && touchOnly));
+  const navigation = useResultNavigation(items, hasTerm ? sections : RECENTS, listboxId, !(mobile && touchOnly));
   const {
     highlightedIndex
   } = navigation;
@@ -6417,7 +6425,10 @@ function ProductSearch({
     env: env,
     // Phones have no Esc, so mobile search gets a close button.
     onClose: mobile ? () => setOpen(false) : undefined,
-    onOpenResult: () => setOpen(false),
+    // Routers like Turbo follow the result's link from their own click
+    // listeners, after this one, so the modal closes once they're done
+    // with it. A microtask would run between listeners, too soon.
+    onOpenResult: () => setTimeout(() => setOpen(false)),
     products: searchable.products
   })));
 }