Browse Source

Update text field values on Enter press

master
Andrew Kingston 6 years ago
parent
commit
7efdff487e
  1. 17
      packages/standard-components/src/forms/StringField.svelte

17
packages/standard-components/src/forms/StringField.svelte

@ -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…
Cancel
Save