Update text field values on Enter press
This commit is contained in:
parent
b701416f7c
commit
7efdff487e
|
@ -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 || ''}
|
||||
|
|
Loading…
Reference in New Issue