Update text field values on Enter press

This commit is contained in:
Andrew Kingston 2021-02-03 15:02:50 +00:00
parent 81adaecd47
commit 019316e508
1 changed files with 15 additions and 2 deletions

View File

@ -1,4 +1,5 @@
<script>
import { onMount } from "svelte"
import "@spectrum-css/textfield/dist/index-vars.css"
import SpectrumField from "./SpectrumField.svelte"
@ -9,15 +10,25 @@
let fieldState
let fieldApi
let input
const onBlur = event => {
let value = event.target.value
const updateValue = value => {
if (type === "number") {
const float = parseFloat(value)
value = isNaN(float) ? null : float
}
fieldApi.setValue(value)
}
const onBlur = event => {
updateValue(event.target.value)
}
const updateValueOnEnter = event => {
if (event.key === "Enter") {
updateValue(event.target.value)
}
}
</script>
<SpectrumField {label} {field} bind:fieldState bind:fieldApi>
@ -32,6 +43,8 @@
</svg>
{/if}
<input
on:keyup={updateValueOnEnter}
bind:this={input}
id={$fieldState.fieldId}
value={$fieldState.value || ''}
placeholder={placeholder || ''}