feat: redo autocomplete resetTextWhenSelected option, use event cancelation instead

Author: hperrin

MIGRATING.md

@@ -14,11 +14,14 @@ https://github.com/material-components/material-components-web/blob/master/CHANG
   - Internally, they are replaced with the `SmuiElement` component exported from `@smui/common`. It takes a `tag` prop and creates an element dynamically with that tag name. You shouldn't ever need to use `SmuiElement` directly.
 - The "\*ComponentDev" types (like `MenuComponentDev`) are gone. You can now use the component as its type. Components that can take a `component` or `tag` prop (like `Button`) have required generic arguments that you can get around by using "InstanceType", like `let button: InstanceType<typeof Button>;`.
 - If you're using `classAdderBuilder`, you need to use `keyof SmuiElementMap` instead of `string` as its generic argument.
+- The `dispatch` function in `@smui/common` will now throw an error if either the `Event` object is not available or the `element` is not provided.
 
 ## Changes
 
 ### Components
 
+- Autocomplete
+  - The `SMUIAutocomplete:selected` event is now cancelable.
 - Banner
   - New `autoClose` prop.
   - New `SMUIBanner:actionClicked` event. It is fired when an action is clicked and `autoClose` is `false`.
@@ -32,6 +35,8 @@ https://github.com/material-components/material-components-web/blob/master/CHANG
 - List
   - New `disabledItemsFocusable` prop.
   - New `wrapper` prop on Item. This should be used for items that only act as the container of a nested list.
+- Menu
+  - New `SMUIMenu:closedProgrammatically` event.
 - Menu Surface
   - New `SMUIMenuSurface:opening` event.
   - New `openBottomBias` prop.

packages/autocomplete/src/Autocomplete.svelte

@@ -40,14 +40,6 @@
     anchor={menu$anchor}
     anchorCorner={menu$anchorCorner}
     on:SMUIList:mount={handleListAccessor}
-    on:SMUIMenu:closedProgrammatically={() => {
-      if (resetTextWhenSelected) {
-        text = '';
-        focus();
-      } else {
-        hideMenu = true;
-      }
-    }}
     {...prefixFilter($$restProps, 'menu$')}
   >
     <List {...prefixFilter($$restProps, 'list$')}>
@@ -170,7 +162,6 @@
   export let selectOnExactMatch = true;
   export let showMenuWithNoInput = true;
   export let noMatchesActionDisabled = true;
-  export let resetTextWhenSelected = false;
   export let search: (input: string) => Promise<any[] | false> = async (
     input: string
   ) => {
@@ -211,72 +202,46 @@
   let matches: any[] = [];
   let focusedIndex = -1;
   let focusedItem: SMUIListItemAccessor | undefined = undefined;
-  let itemHasBeenSelected: boolean = false;
-  let hideMenu: boolean = false;
 
   $: menuOpen =
     focused &&
-    !hideMenu &&
     (text !== '' || showMenuWithNoInput) &&
     (loading ||
       (!combobox && !(matches.length === 1 && matches[0] === value)) ||
       (combobox &&
         !!matches.length &&
         !(matches.length === 1 && matches[0] === value)));
 
-  let previousText: string | undefined = undefined;
+  let previousText = text;
   $: if (previousText !== text) {
-    if (!itemHasBeenSelected) {
-      hideMenu = false;
-    }
     if (!combobox && value != null && getOptionLabel(value) !== text) {
       deselectOption(value, false);
     }
 
-    (async () => {
-      loading = true;
-      error = false;
-      try {
-        const searchResult = await search(text);
-        if (searchResult !== false) {
-          matches = searchResult;
-          if (selectOnExactMatch) {
-            const exactMatch = matches.find(
-              (match) => getOptionLabel(match) === text
-            );
-            if (exactMatch && value !== exactMatch) {
-              selectOption(exactMatch);
-            }
-          }
-        }
-      } catch (e: any) {
-        error = true;
-      }
-      loading = false;
-    })();
+    performSearch();
 
-    if (itemHasBeenSelected) {
-      if (resetTextWhenSelected) {
-        text = '';
-        focus();
-      }
-      itemHasBeenSelected = false;
-    }
     previousText = text;
   }
 
+  $: if (options) {
+    // Set search results on init and refresh search results when `options` is
+    // changed.
+    performSearch();
+  }
+
   let previousValue = value;
   $: if (!combobox && previousValue !== value) {
     // If the value changes from outside, update the text.
     text = getOptionLabel(value);
     previousValue = value;
-    itemHasBeenSelected = true;
-    if (!resetTextWhenSelected) {
-      hideMenu = true;
-    }
-  } else if (combobox) {
-    // If the text changes, update value if we're a combobox.
+  } else if (combobox && previousValue !== value) {
+    // An update came from the outside.
+    text = value;
+    previousValue = value;
+  } else if (combobox && value !== text) {
+    // An update came from the user.
     value = text;
+    previousValue = value;
   }
 
   let previousFocusedIndex: number | undefined = undefined;
@@ -314,32 +279,70 @@
     previousFocusedIndex = focusedIndex;
   }
 
+  async function performSearch() {
+    loading = true;
+    error = false;
+    try {
+      const searchResult = await search(text);
+      if (searchResult !== false) {
+        matches = searchResult;
+        if (selectOnExactMatch) {
+          const exactMatch = matches.find(
+            (match) => getOptionLabel(match) === text
+          );
+          if (exactMatch && value !== exactMatch) {
+            selectOption(exactMatch);
+          }
+        }
+      }
+    } catch (e: any) {
+      error = true;
+    }
+    loading = false;
+  }
+
   function handleListAccessor(event: CustomEvent<SMUIListAccessor>) {
     if (!listAccessor) {
       listAccessor = event.detail;
     }
   }
 
   function selectOption(option: any, setText = true) {
+    const event = dispatch(element, 'SMUIAutocomplete:selected', option, {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    if (event.defaultPrevented) {
+      return;
+    }
+
     if (setText) {
       text = getOptionLabel(option);
     }
     value = option;
     if (!setText) {
       previousValue = option;
     }
-    dispatch(element, 'SMUIAutocomplete:selected', option);
   }
 
   function deselectOption(option: any, setText = true) {
+    const event = dispatch(element, 'SMUIAutocomplete:deselected', option, {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    if (event.defaultPrevented) {
+      return;
+    }
+
     if (setText) {
       text = '';
     }
     value = undefined;
     if (!setText) {
       previousValue = undefined;
     }
-    dispatch(element, 'SMUIAutocomplete:deselected', option);
   }
 
   function toggleOption(option: any) {

packages/common/src/internal/dispatch.ts

@@ -6,25 +6,29 @@ export function dispatch<T extends any = any>(
   /** This is an internal thing used by SMUI to duplicate some SMUI events as MDC events. */
   duplicateEventForMDC = false
 ) {
-  if (typeof Event !== 'undefined' && element) {
-    const event: CustomEvent<T> = new CustomEvent(eventType, {
-      ...eventInit,
-      detail,
-    });
-    element?.dispatchEvent(event);
-    if (duplicateEventForMDC && eventType.startsWith('SMUI')) {
-      const duplicateEvent: CustomEvent<T> = new CustomEvent(
-        eventType.replace(/^SMUI/g, () => 'MDC'),
-        {
-          ...eventInit,
-          detail,
-        }
-      );
-      element?.dispatchEvent(duplicateEvent);
-      if (duplicateEvent.defaultPrevented) {
-        event.preventDefault();
+  if (typeof Event === 'undefined') {
+    throw new Error('Event not defined.');
+  }
+  if (!element) {
+    throw new Error('Tried to dipatch event without element.');
+  }
+  const event: CustomEvent<T> = new CustomEvent(eventType, {
+    ...eventInit,
+    detail,
+  });
+  element?.dispatchEvent(event);
+  if (duplicateEventForMDC && eventType.startsWith('SMUI')) {
+    const duplicateEvent: CustomEvent<T> = new CustomEvent(
+      eventType.replace(/^SMUI/g, () => 'MDC'),
+      {
+        ...eventInit,
+        detail,
       }
+    );
+    element?.dispatchEvent(duplicateEvent);
+    if (duplicateEvent.defaultPrevented) {
+      event.preventDefault();
     }
-    return event;
   }
+  return event;
 }

packages/menu/src/Menu.svelte

@@ -80,7 +80,7 @@
         element.classList.contains(className),
       closeSurface: (skipRestoreFocus) => {
         menuSurfaceAccessor.closeProgrammatic(skipRestoreFocus);
-        dispatch(getElement(), 'SMUIMenu:closedProgrammatically', {});
+        dispatch(getElement(), 'SMUIMenu:closedProgrammatically');
       },
       getElementIndex: (element) =>
         listAccessor

packages/site/src/routes/demo/autocomplete/+page.svelte

@@ -33,6 +33,13 @@
     Adding entries
   </Demo>
 
+  <Demo component={AddToList} file="autocomplete/_AddToList.svelte">
+    Add entries to a list
+    <svelte:fragment slot="subtitle">
+      Leave the menu open and don't fill the textbox upon selection.
+    </svelte:fragment>
+  </Demo>
+
   <Demo component={Async} file="autocomplete/_Async.svelte">
     Async options loading
     <svelte:fragment slot="subtitle">
@@ -54,6 +61,7 @@
   import Combobox from './_Combobox.svelte';
   import Objects from './_Objects.svelte';
   import AddEntries from './_AddEntries.svelte';
+  import AddToList from './_AddToList.svelte';
   import Async from './_Async.svelte';
   import Manual from './_Manual.svelte';
 </script>

packages/site/src/routes/demo/autocomplete/_AddToList.svelte

@@ -0,0 +1,45 @@
+<div>
+  <div class="status">
+    <pre style="display: inline-block;">Selected:</pre>
+    <Set style="display: inline-block;" bind:chips={selected} let:chip>
+      <Chip {chip}>
+        <Text tabindex={0}>{chip}</Text>
+        <TrailingAction icon$class="material-icons">cancel</TrailingAction>
+      </Chip>
+    </Set>
+  </div>
+
+  <Autocomplete
+    bind:this={selector}
+    options={available}
+    bind:value
+    label="Fruit"
+    on:SMUIAutocomplete:selected={handleSelection}
+  />
+</div>
+
+<script lang="ts">
+  import Autocomplete from '@smui-extra/autocomplete';
+
+  import Chip, { Set, TrailingAction, Text } from '@smui/chips';
+
+  let fruits = ['Apple', 'Orange', 'Banana', 'Mango'];
+  let selected: string[] = [];
+
+  $: available = fruits.filter((value) => !selected.includes(value));
+
+  let selector: Autocomplete;
+  let value = '';
+
+  function handleSelection(event: CustomEvent<string>) {
+    // Don't actually select the item.
+    event.preventDefault();
+
+    // You could also set value back to '' here.
+    selected.push(event.detail);
+    // Make sure the chips get updated.
+    selected = selected;
+
+    selector.focus();
+  }
+</script>

packages/site/src/routes/demo/autocomplete/_Combobox.svelte

@@ -1,10 +1,21 @@
 <div>
   <Autocomplete combobox options={fruits} bind:value label="Fruit" />
   <pre class="status">Selected: {value || ''}</pre>
+
+  <div style="margin-top: 1em;">
+    <div>Programmatically select:</div>
+    <Button on:click={() => (value = 'Dragonfruit')}>
+      <Label>Dragonfruit</Label>
+    </Button>
+    <Button on:click={() => (value = 'Elderberry')}>
+      <Label>Elderberry</Label>
+    </Button>
+  </div>
 </div>
 
 <script lang="ts">
   import Autocomplete from '@smui-extra/autocomplete';
+  import Button, { Label } from '@smui/button';
 
   let fruits = [
     'Apple',