From ea1583478abb04fcf0a9039fe04cc6ce36150ab5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 18 May 2021 08:37:07 +0100
Subject: [PATCH] Add ability for BBUI text fields to update on change and
 default to true

---
 packages/bbui/src/Form/Core/Search.svelte    | 19 +++++++++++++++----
 packages/bbui/src/Form/Core/TextField.svelte | 20 +++++++++++++++-----
 packages/bbui/src/Form/Input.svelte          |  3 +++
 packages/bbui/src/Form/Search.svelte         |  4 ++++
 4 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Search.svelte b/packages/bbui/src/Form/Core/Search.svelte
index dbc8582ac3..b26c9567c0 100644
--- a/packages/bbui/src/Form/Core/Search.svelte
+++ b/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"
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index 1cf37f3468..e1793c74a6 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/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"
   />
diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte
index 07ebf4f4db..fcab178182 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/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>
diff --git a/packages/bbui/src/Form/Search.svelte b/packages/bbui/src/Form/Search.svelte
index d41ecd4d6e..b5a6c17b4a 100644
--- a/packages/bbui/src/Form/Search.svelte
+++ b/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>