svelte-material-ui icon indicating copy to clipboard operation
svelte-material-ui copied to clipboard

fix: dynamically setting options sets undefined to select value

Open igrep opened this issue 9 months ago • 0 comments

  • 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 Options 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.

igrep avatar May 14 '24 09:05 igrep