Add ability for BBUI text fields to update on change and default to true

packages/bbui/src/Form/Core/Search.svelte

@@ -2,10 +2,11 @@
   import "@spectrum-css/search/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
 
-  export let value = ""
+  export let value = null
   export let placeholder = null
   export let disabled = false
   export let id = null
+  export let updateOnChange = true
 
   const dispatch = createEventDispatcher()
   let focus = false
@@ -23,6 +24,13 @@
     updateValue(event.target.value)
   }
 
+  const onInput = event => {
+    if (!updateOnChange) {
+      return
+    }
+    updateValue(event.target.value)
+  }
+
   const updateValueOnEnter = event => {
     if (event.key === "Enter") {
       updateValue(event.target.value)
@@ -44,15 +52,18 @@
       <use xlink:href="#spectrum-icon-18-Magnify" />
     </svg>
     <input
-      on:click
-      on:keyup={updateValueOnEnter}
       {disabled}
       {id}
       value={value || ""}
       placeholder={placeholder || ""}
+      on:click
+      on:blur
+      on:focus
+      on:input
       on:blur={onBlur}
       on:focus={onFocus}
-      on:input
+      on:input={onInput}
+      on:keyup={updateValueOnEnter}
       type="search"
       class="spectrum-Textfield-input spectrum-Search-input"
       autocomplete="off"

packages/bbui/src/Form/Core/TextField.svelte

@@ -2,13 +2,14 @@
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
 
-  export let value = ""
+  export let value = null
   export let placeholder = null
   export let type = "text"
   export let disabled = false
   export let error = null
   export let id = null
   export let readonly = false
+  export let updateOnChange = true
 
   const dispatch = createEventDispatcher()
   let focus = false
@@ -37,7 +38,13 @@
     }
     focus = false
     updateValue(event.target.value)
-    dispatch("blur")
+  }
+
+  const onInput = event => {
+    if (readonly || !updateOnChange) {
+      return
+    }
+    updateValue(event.target.value)
   }
 
   const updateValueOnEnter = event => {
@@ -66,16 +73,19 @@
     </svg>
   {/if}
   <input
-    on:click
-    on:keyup={updateValueOnEnter}
     {disabled}
     {readonly}
     {id}
     value={value || ""}
     placeholder={placeholder || ""}
+    on:click
+    on:blur
+    on:focus
+    on:input
     on:blur={onBlur}
     on:focus={onFocus}
-    on:input
+    on:input={onInput}
+    on:keyup={updateValueOnEnter}
     {type}
     class="spectrum-Textfield-input"
   />

packages/bbui/src/Form/Input.svelte

@@ -11,6 +11,7 @@
   export let disabled = false
   export let readonly = false
   export let error = null
+  export let updateOnChange = true
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -21,6 +22,7 @@
 
 <Field {label} {labelPosition} {error}>
   <TextField
+    {updateOnChange}
     {error}
     {disabled}
     {readonly}
@@ -31,5 +33,6 @@
     on:click
     on:input
     on:blur
+    on:focus
   />
 </Field>

packages/bbui/src/Form/Search.svelte

@@ -8,6 +8,7 @@
   export let labelPosition = "above"
   export let placeholder = null
   export let disabled = false
+  export let updateOnChange = true
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -18,11 +19,14 @@
 
 <Field {label} {labelPosition}>
   <Search
+    {updateOnChange}
     {disabled}
     {value}
     {placeholder}
     on:change={onChange}
     on:click
     on:input
+    on:focus
+    on:blur
   />
 </Field>