(searchbar) expose a new Mod+Enter shortcut to quickly get out

manuhabitela · manuhabitela · commit 00b2928d96f4 · 2025-09-30T18:44:31.000+02:00
This is already doable with escape… But. Before, we could just press Tab
to exit the searchbar easily. Now, pressing Tab correctly tabs through
items next to the searchbar (like the "search all" checkbox). So this
quick way of getting out the searchbar is gone.

I felt like exposing a "submit search" action through Mod+Enter was a
good idea, it seems it better fits the intent than "escaping" search
bar. But I guess this is a bit nitpicking, we could also do without
this?
diff --git a/app/client/components/commandList.ts b/app/client/components/commandList.ts
@@ -8,6 +8,7 @@ export type CommandName =
   | 'find'
   | 'findNext'
   | 'findPrev'
+  | 'endSearch'
   | 'historyBack'
   | 'historyForward'
   | 'reloadPlugins'
@@ -187,6 +188,11 @@ export const groups: CommendGroupDef[] = [{
       name: 'findPrev',
       keys: ['Mod+Shift+G'],
       desc: 'Find previous occurrence',
+    }, {
+      name: 'endSearch',
+      keys: ['Mod+Enter'],
+      desc: 'When in the search bar, close it and focus the current match',
+      alwaysOn: true,
     }, {
       // Without this, when focus in on Clipboard, this shortcut would only move the cursor.
       name: 'historyBack',
diff --git a/app/client/ui2018/search.ts b/app/client/ui2018/search.ts
@@ -4,6 +4,7 @@
  */
 import { allCommands, createGroup } from 'app/client/components/commands';
 import { Panel, RegionFocusSwitcher } from 'app/client/components/RegionFocusSwitcher';
+import { modKeyProp } from 'app/client/lib/browserInfo';
 import { makeT } from 'app/client/lib/localization';
 import { reportError } from 'app/client/models/AppModel';
 import { SearchModel } from 'app/client/models/SearchModel';
@@ -213,6 +214,10 @@ export function searchBar(model: SearchModel, testId: TestId = noTestId, regionF
     findPrev: () => { model.findPrev().catch(reportError); return false; },
   }, null, true);
 
+  const commandGroupWhenOpen = createGroup({
+    endSearch: () => { toggleMenu(false); return false; },
+  }, null, model.isOpen);
+
   const inputElem: HTMLInputElement = searchInput(model.value, {onInput: true},
     {
       type: 'text',
@@ -223,16 +228,25 @@ export function searchBar(model: SearchModel, testId: TestId = noTestId, regionF
       focusedSearchElement = inputElem;
     }),
     dom.onKeyDown({
-      Enter: (ev) => ev.shiftKey ? model.findPrev() : model.findNext(),
+      // The $ lets the event propagate, in order to trigger the endSearch command correctly when focusing the input
+      Enter$: async (ev) => {
+        // If the user is pressing the mod key, don't do anything, the user is certainly trying to trigger endSearch
+        if (ev[modKeyProp()] && !ev.shiftKey) {
+          return;
+        }
+        return ev.shiftKey ? model.findPrev() : model.findNext();
+      },
     }),
     commandGroup.attach(),
+    commandGroupWhenOpen.attach(),
   );
 
   return searchWrapper(
     testId('wrapper'),
     searchWrapper.cls('-expand', model.isOpen),
     dom.cls(wrapperClass),
     dom.autoDispose(commandGroup),
+    dom.autoDispose(commandGroupWhenOpen),
     dom.onKeyDown({
       // The $ indicates to grainjs we don't want to stop propagation of the event here.
       // This handles the case where we are kb-focused on the search icon and press Esc:
