diff --git a/packages/list/src/List.svelte b/packages/list/src/List.svelte index 6d0edb7e5..448df7a83 100644 --- a/packages/list/src/List.svelte +++ b/packages/list/src/List.svelte @@ -110,6 +110,7 @@ let element: SvelteComponent; let instance: MDCListFoundation; + let accessor: SMUIListAccessor; let items: SMUIListItemAccessor[] = []; let role = getContext('SMUI:list:role'); let nav = getContext('SMUI:list:nav'); @@ -232,7 +233,7 @@ }, }); - const accessor: SMUIListAccessor = { + accessor = { get element() { return getElement(); }, @@ -282,6 +283,7 @@ selectedIndex = getListItemIndex(event.detail.element); } event.stopPropagation(); + dispatch(getElement(), 'SMUIList:mountItem', accessor); } function handleItemUnmount(event: CustomEvent) { @@ -292,6 +294,7 @@ itemAccessorMap.delete(event.detail.element); } event.stopPropagation(); + dispatch(getElement(), 'SMUIList:unmountItem', accessor); } function handleKeydown(event: KeyboardEvent) { diff --git a/packages/select/src/Select.svelte b/packages/select/src/Select.svelte index 465049845..3f0eef84e 100644 --- a/packages/select/src/Select.svelte +++ b/packages/select/src/Select.svelte @@ -199,6 +199,8 @@ {wrapFocus} bind:selectedIndex on:SMUIList:mount={(event) => (list = event.detail)} + on:SMUIList:mountItem={handleItemMountUnmount} + on:SMUIList:unmountItem={handleItemMountUnmount} {...prefixFilter($$restProps, 'list$')}> @@ -473,10 +475,13 @@ }, getSelectedIndex: () => selectedIndex, setSelectedIndex: (index) => { - // Don't update the instance again. previousSelectedIndex = index; - selectedIndex = index; - value = getMenuItemValues()[selectedIndex]; + selectedIndex = index === -1 ? 0 : index; + const menuItems = getMenuItemValues(); + // Avoid setting undefined to the value + if (selectedIndex < menuItems.length) { + value = menuItems[selectedIndex]; + } }, focusMenuItemAtIndex: (index) => { list.focusItemAtIndex(index); @@ -659,4 +664,9 @@ export function getElement() { return element; } + + function handleItemMountUnmount(event: CustomEvent): void { + list = event.detail; + instance && instance.layoutOptions(); + }