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?
Bit of an odd one, but I am attempting to implement a
TextField
where I control theshrink
property of the input label dynamically. What I have found is that doing this breaks theonChange
handler for some reason - it ends up not being called after the change has occurred.Example:
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?