carbon-components-svelte icon indicating copy to clipboard operation
carbon-components-svelte copied to clipboard

Published 20 hours ago • verified publisher icon carbon-design-system

Input validation issue on TextInput component

Open alkanna opened this issue 3 years ago • 4 comments
trafficstars

See REPL here : https://svelte.dev/repl/a122d2d5e47345099c0bb4a1712e5130?version=3.44.3

When erasing the input content (one character at a time), it's filled again with the original content

alkanna avatar Dec 18 '21 18:12 alkanna

Interesting, but I'm unable to repro in a non-REPL setting.

Exporting value in Input.svelte seems to fix it though: https://svelte.dev/repl/ff0ba6fcbc0347afb7695e8843d9831b?version=3.44.3

metonym avatar Dec 18 '21 22:12 metonym

Interesting indeed... I guess we can close this then. I spent half na hour trying to find the issue inside the TextInput component... Guess it was my mistake. I would be really interested in an explanation though if someone knows why this is happening.

alkanna avatar Dec 19 '21 08:12 alkanna

I would also be interested in an explanation. It seems that there is some reactivity issue where the value="test" prop passed down using $$restProps clashes with the bind:value in the input component.

I've created another REPL that produces the same behavior when using a plain input: https://svelte.dev/repl/c58a66f954304c538e0ca02120e84b98?version=3.44.3

metonym avatar Dec 19 '21 14:12 metonym

Whenever I try any of the REPL links above, it gives me this error:

Unexpected character '@' (TreeViewNodeList.svelte:80:3)

I tried Firefox and a Chromium browser and both had the same error. Does anyone know what that's about?

SimpleProgrammingAU avatar Jan 14 '24 05:01 SimpleProgrammingAU