Merge branch 'usedbytes-list-focusItemAtIndex'

Author: hperrin

MIGRATING.md

@@ -35,6 +35,7 @@ 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.
+  - New `focusItemAtIndex` function.
 - Menu
   - New `SMUIMenu:closedProgrammatically` event.
 - Menu Surface

packages/list/src/List.svelte

@@ -368,13 +368,6 @@
       ) as SMUIListItemAccessor[];
   }
 
-  function focusItemAtIndex(index: number) {
-    const accessor = getOrderedList()[index];
-    accessor &&
-      'focus' in accessor.element &&
-      (accessor.element as HTMLInputElement).focus();
-  }
-
   function listItemAtIndexHasClass(index: number, className: string) {
     const accessor = getOrderedList()[index];
     return (accessor && accessor.hasClass(className)) ?? false;
@@ -453,6 +446,13 @@
     return instance.getFocusedItemIndex();
   }
 
+  export function focusItemAtIndex(index: number) {
+    const accessor = getOrderedList()[index];
+    accessor &&
+      'focus' in accessor.element &&
+      (accessor.element as HTMLInputElement).focus();
+  }
+
   export function getElement(): HTMLElement {
     return element.getElement();
   }

packages/site/src/routes/demo/list/_TwoLineSelection.svelte

@@ -1,16 +1,17 @@
 <div>
   <List
     class="demo-list"
+    bind:this={list}
     twoLine
     avatarList
     singleSelection
     bind:selectedIndex={selectionIndex}
   >
-    {#each options as item}
+    {#each options as item, i}
       <Item
-        on:SMUI:action={() => (selection = item.name)}
+        on:SMUI:action={() => console.log('Item selected:', item)}
         disabled={item.disabled}
-        selected={selection === item.name}
+        selected={selectionIndex === i}
       >
         <Graphic
           style="background-image: url(https://place-hold.it/40x40?text={item.name
@@ -28,8 +29,26 @@
   </List>
 </div>
 
-<pre
-  class="status">Selected: {selection}, value of selectedIndex: {selectionIndex}</pre>
+<pre class="status">Selected: {selectionIndex} - {options[selectionIndex]
+    .name}</pre>
+
+<div style="margin-top: 1em;">
+  <div>Programmatically select:</div>
+  {#each options as option, i}
+    <Button on:click={() => (selectionIndex = i)}>
+      <Label>{option.name}</Label>
+    </Button>
+  {/each}
+</div>
+
+<div style="margin-top: 1em;">
+  <div>Programmatically focus:</div>
+  {#each options as option, i}
+    <Button on:click={() => list.focusItemAtIndex(i)}>
+      <Label>{option.name}</Label>
+    </Button>
+  {/each}
+</div>
 
 <script lang="ts">
   import List, {
@@ -40,6 +59,9 @@
     PrimaryText,
     SecondaryText,
   } from '@smui/list';
+  import Button, { Label } from '@smui/button';
+
+  let list: InstanceType<typeof List>;
 
   let options = [
     {
@@ -63,10 +85,9 @@
       disabled: false,
     },
   ];
-  let selection = 'Stephen Hawking';
-  // This value is updated when the component is initialized, based on the
-  // selected Item's `selected` prop.
-  let selectionIndex: number | undefined = undefined;
+  // If this is not set, it is updated when the component is initialized, based
+  // on the selected Item's `selected` prop.
+  let selectionIndex = 3;
 </script>
 
 <style>