Tropix126 / fluent-svelte

A faithful implementation of Microsoft's Fluent Design System in Svelte.
https://fluent-svelte.vercel.app
MIT License
609 stars 27 forks source link

TextBox value={undefined} should leave input empty #7

Closed paperdave closed 2 years ago

paperdave commented 2 years ago

Before you start...

What browsers are you seeing the problem on?

Microsoft Edge

Description

i use this pattern a lot

<input bind:value={object.property} />

and if the value is unset or otherwise undefined, the input shows undefined. the way the TextBox is implemented, it just uses the value prop, not bind, which doesnt copy this behavior over, using TextBox or without the bind:, it will put a literal "undefined" in the text box.

Steps To Reproduce

<script>
  const object = { };
</script>

<TextBox type="text" bind:value={object.property} />

<code>{JSON.stringify(object)}</code>

Expected behavior

the input has no text in it to start

Relevant Assets

No response

paperdave commented 2 years ago

this can be fixed with a one line change to the textbox component, changing {value} to value={value ?? ""}

Tropix126 commented 2 years ago

This seems to have been fixed as of 1.1.0, honestly don't know exactly what fixed it though.