fix: don't focus autocomplete after selecting item to avoid performaing async search again

Author: hperrin

packages/autocomplete/src/Autocomplete.svelte

@@ -35,7 +35,14 @@
       'smui-autocomplete__menu': true,
     })}
     managed
-    bind:open={menuOpen}
+    neverRestoreFocus
+    open={focused &&
+      (text !== '' || showMenuWithNoInput) &&
+      (loading ||
+        (!combobox && !(matches.length === 1 && matches[0] === value)) ||
+        (combobox &&
+          !!matches.length &&
+          !(matches.length === 1 && matches[0] === value)))}
     bind:anchorElement={element}
     anchor={menu$anchor}
     anchorCorner={menu$anchorCorner}
@@ -203,24 +210,17 @@
   let focusedIndex = -1;
   let focusedItem: SMUIListItemAccessor | undefined = undefined;
 
-  $: menuOpen =
-    focused &&
-    (text !== '' || showMenuWithNoInput) &&
-    (loading ||
-      (!combobox && !(matches.length === 1 && matches[0] === value)) ||
-      (combobox &&
-        !!matches.length &&
-        !(matches.length === 1 && matches[0] === value)));
-
   let previousText = text;
   $: if (previousText !== text) {
     if (!combobox && value != null && getOptionLabel(value) !== text) {
       deselectOption(value, false);
     }
 
-    performSearch();
-
-    previousText = text;
+    // Only when we're focused do we need to perform a search.
+    if (focused) {
+      performSearch();
+      previousText = text;
+    }
   }
 
   $: if (options) {
@@ -420,10 +420,20 @@
         .map((itemAccessor) => itemAccessor.element)
         .indexOf(event.relatedTarget as Element) !== -1
     ) {
+      // Wait until the item is selected.
+      element.addEventListener(
+        'SMUIAutocomplete:selected',
+        () => {
+          // Then clear the focus.
+          focusedIndex = -1;
+          focused = false;
+        },
+        { once: true }
+      );
       return;
     }
 
-    // Else, clear the currently focused item and mark as not focused.
+    // Clear the focus and input.
     focusedIndex = -1;
     focused = false;
 

packages/menu-surface/src/MenuSurface.svelte

@@ -63,6 +63,11 @@
      * menu during positioning calculations.
      */
     openBottomBias?: number;
+    /**
+     * Set this to true to never restore focus to the previously focused element
+     * when the menu is closed.
+     */
+    neverRestoreFocus?: boolean;
   };
   type $$Props = OwnProps &
     SmuiAttrs<
@@ -101,6 +106,7 @@
   export let maxHeight = 0;
   export let horizontallyCenteredOnViewport = false;
   export let openBottomBias = 0;
+  export let neverRestoreFocus = false;
 
   let element: HTMLDivElement;
   let instance: MDCMenuSurfaceFoundation;
@@ -235,6 +241,7 @@
       },
       restoreFocus: () => {
         if (
+          !neverRestoreFocus &&
           (!element || element.contains(document.activeElement)) &&
           previousFocus &&
           document.contains(previousFocus) &&