breaking(text-input): use native bind:value, dispatch instead of forward change, input events (#1065)

Use the native `bind:value` to fix two-way reactivity. As a result, "type" is read through `$$restProps` because it cannot be dynamic when using `bind:value`.

Extend value type to include `null` for the "number" type. This is similar to how `NumberInput` works; `null` represents "no value."
This commit is contained in:
metonym 2022-02-09 19:52:10 -08:00 committed by GitHub
commit 989e0f4c65
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 92 additions and 72 deletions

View file

@ -1,8 +1,17 @@
<script lang="ts">
import { TextInput, TextInputSkeleton } from "../types";
let value = null;
</script>
<TextInput labelText="User name" placeholder="Enter user name..." />
<TextInput
type="number"
labelText="User name"
placeholder="Enter user name..."
bind:value
on:input="{(e) => console.log(e.detail)}"
on:change="{(e) => (value = e.detail)}"
/>
<TextInput
labelText="User name"