Merge pull request #288 from silinternational/add-clear-button

add(SearchableSelect): add clear button to SearchableSelect

CHANGELOG.md

@@ -1,23 +1,22 @@
 # Changelog
+
 All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), enforced with [semantic-release](https://github.com/semantic-release/semantic-release).
 
 ## [11.5.0](https://github.com/silinternational/ui-components/compare/v11.4.2...v11.5.0) (2024-09-09)
 
-
 ### Added
 
-* **DateInput:** add data-1p-ignore to prevent 1Password trying to fill ([c296811](https://github.com/silinternational/ui-components/commit/c29681127222afabceff914350aafebe38687dfc))
-* **MoneyInput:** add data-1p-ignore to prevent 1Password trying to fill ([6367aa8](https://github.com/silinternational/ui-components/commit/6367aa8f43c5544556039feaf848fff60002cf33))
-* **SearchableSelect:** add data-1p-ignore to SearchableSelect ([ce4bf4b](https://github.com/silinternational/ui-components/commit/ce4bf4be28a7c3ef5efe0636c47d4437e8fe71f0))
-* **Select:** add data-1p-ignore to prevent 1Password trying to fill ([1e502e2](https://github.com/silinternational/ui-components/commit/1e502e226144bf0c8b41a7535f8499d62df537e7))
+- **DateInput:** add data-1p-ignore to prevent 1Password trying to fill ([c296811](https://github.com/silinternational/ui-components/commit/c29681127222afabceff914350aafebe38687dfc))
+- **MoneyInput:** add data-1p-ignore to prevent 1Password trying to fill ([6367aa8](https://github.com/silinternational/ui-components/commit/6367aa8f43c5544556039feaf848fff60002cf33))
+- **SearchableSelect:** add data-1p-ignore to SearchableSelect ([ce4bf4b](https://github.com/silinternational/ui-components/commit/ce4bf4be28a7c3ef5efe0636c47d4437e8fe71f0))
+- **Select:** add data-1p-ignore to prevent 1Password trying to fill ([1e502e2](https://github.com/silinternational/ui-components/commit/1e502e226144bf0c8b41a7535f8499d62df537e7))
 
 ### [11.4.2](https://github.com/silinternational/ui-components/compare/v11.4.1...v11.4.2) (2024-09-06)
 
-
 ### Fixed
 
-* **Drawer:** fix A11y warning in Drawer ([275d2b9](https://github.com/silinternational/ui-components/commit/275d2b9f0944e82da7b275f043afc11b6e9296c1))
+- **Drawer:** fix A11y warning in Drawer ([275d2b9](https://github.com/silinternational/ui-components/commit/275d2b9f0944e82da7b275f043afc11b6e9296c1))
 
 ### [11.4.1](https://github.com/silinternational/ui-components/compare/v11.4.0...v11.4.1) (2024-07-09)
 

components/custom/SearchableSelect/SearchableSelect.svelte

@@ -23,6 +23,7 @@ export let showError = false
 
 let element = {}
 let randomId = generateRandomID('dataList-')
+let savedChoice = ''
 
 const dispatch = createEventDispatcher()
 
@@ -32,6 +33,18 @@ const onChange = (e) => {
   choice = internalChoice
   element.blur()
 }
+
+const clearChoice = () => {
+  savedChoice = choice
+  choice = ''
+}
+
+const onBlur = () => {
+  if (savedChoice && !choice) {
+    choice = savedChoice
+  }
+  dispatch('check', choice)
+}
 </script>
 
 <style>
@@ -80,6 +93,16 @@ const onChange = (e) => {
   border-color: var(--mdc-theme-status-error, var(--mdc-theme-error));
   color: var(--mdc-theme-status-error, var(--mdc-theme-error));
 }
+
+.clear-button {
+  cursor: pointer;
+  padding: 5px;
+  position: relative;
+  right: 50px;
+  border-radius: 4px;
+  border: none;
+  background-color: transparent;
+}
 </style>
 
 <label class="custom-field" style="--field-padding: {padding}; {$$props.class || ''}">
@@ -98,11 +121,14 @@ const onChange = (e) => {
     value={choice}
     on:change={onChange}
     on:change
-    on:blur={(e) => dispatch('check', e.target.value)}
+    on:blur={onBlur}
     on:blur
     on:focus
   />
   <span class="placeholder">{placeholder}</span>
+  {#if choice}
+    <button type="button" class="clear-button" on:click={clearChoice} aria-label="Clear selection">✕</button>
+  {/if}
 </label>
 
 <datalist id={randomId}>