svelte-material-ui
svelte-material-ui copied to clipboard
fix: dynamically setting options sets undefined to select value
- Should fix: https://github.com/hperrin/svelte-material-ui/issues/538.
- Same report at Discord: https://discord.com/channels/833139170703704115/1228040959670091787
Approach
Without this change, the Select
component doesn't know the Options
(items in the internal List
component) after onMount
. So it can't tell which Option
s are added/removed.
To fix the root cause, I created a new events to List
: SMUIList:mountItem
and SMUIList:unmountItem
, which tells the parent when some of its children are added or removed. Then, I implemented an event handler of Select
for the new events to update the internal list and call layoutOptions
. layoutOptions
should always be called whenever the options are updated (Ref. https://github.com/material-components/material-components-web/blob/f80ac92b08dfa1b59cd9faf74f3d19a4b134993e/packages/mdc-select/foundation.ts#L235-L239.
Another Option
The change might be simpler adding bind:accessor={list}
to the List
. But I didn't choose it because List
seems to want to hide its accessor
as the implementation details. I'll rewrite to try if you prefer.