swordev / suid

A port of Material-UI (MUI) built with SolidJS.
https://suid.io
MIT License
673 stars 48 forks source link

Dynamic InputLabelProps breaks onChange handling for TextField #203

Closed martinpengellyphillips closed 1 year ago

martinpengellyphillips commented 1 year ago

Bit of an odd one, but I am attempting to implement a TextField where I control the shrink property of the input label dynamically. What I have found is that doing this breaks the onChange handler for some reason - it ends up not being called after the change has occurred.

Example:

const [shrink, setShrink] = createSignal(true);
const labelProps = createMemo(() => ({ shrink: shrink() }));
onMount(() => setTimeout(setShrink, 5000, false));

return (
  <TextField
    label={local.label}
    InputLabelProps={labelProps()}  // This will cause onChange to no longer function after it updates.
    onChange={(_, value) => {
      console.log('input value changed')
    }}
  />
)

My guess is that dynamic label props causes a new component to be created somewhere in the hierarchy and breaks the onChange connection. Any ideas on how best to tackle this?

juanrgm commented 1 year ago

Closed via https://github.com/swordev/suid/commit/9cd59167f1249b452ec523d488535bd5a2fd629a.