[SelectField] Rename clearSearchOnFocus to clearSearchOnOpen to o…

…pen on up/down key input, and default to `true`

.changeset/perfect-plants-march.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+[SelectField] Rename `clearSearchOnFocus` to `clearSearchOnOpen` to open on up/down key input, and default to `true`

src/lib/components/SelectField.svelte

@@ -36,7 +36,7 @@
   export let base = false;
   export let rounded = false;
   export let dense = false;
-  export let clearSearchOnFocus = false;
+  export let clearSearchOnOpen = true;
 
   export let classes: {
     root?: string;
@@ -184,9 +184,6 @@
 
   function onFocus() {
     logger.debug('onFocus');
-    if (clearSearchOnFocus) {
-      searchText = ''; // Show all options on focus
-    }
     show();
   }
 
@@ -257,16 +254,16 @@
 
   function onClick() {
     logger.debug('onClick');
-    if (clearSearchOnFocus) {
-      searchText = ''; // Show all options on focus
-    }
     show();
   }
 
   function show() {
     logger.debug('show');
 
     if (!disabled && !readonly) {
+      if (open === false && clearSearchOnOpen) {
+        searchText = ''; // Show all options on open
+      }
       open = true;
       inputEl?.focus();
     }

src/routes/docs/components/SelectField/+page.svelte

@@ -61,16 +61,16 @@
   <Button on:click={() => (value = 4)}>Pick 4</Button>
 </Preview>
 
-<h2>clearSearchOnFocus</h2>
+<h2>clearable=false</h2>
 
 <Preview>
-  <SelectField {options} bind:value clearSearchOnFocus />
+  <SelectField {options} bind:value clearable={false} />
 </Preview>
 
-<h2>clearable=false</h2>
+<h2>clearSearchOnFocus=false</h2>
 
 <Preview>
-  <SelectField {options} bind:value clearSearchOnFocus clearable={false} />
+  <SelectField {options} bind:value clearSearchOnOpen={false} />
 </Preview>
 
 <h2>Grouped options</h2>
@@ -82,14 +82,14 @@
 <h2>Many options</h2>
 
 <Preview>
-  <SelectField options={manyOptions} clearSearchOnFocus />
+  <SelectField options={manyOptions} clearSearchOnOpen />
 </Preview>
 
 <h2>Update options</h2>
 
 <Preview>
   <Toggle let:on let:toggle>
-    <SelectField options={on ? newOptions : options} bind:value clearSearchOnFocus />
+    <SelectField options={on ? newOptions : options} bind:value clearSearchOnOpen />
     <Button on:click={toggle}>Toggle Options</Button>
   </Toggle>
 </Preview>
@@ -293,7 +293,7 @@
   <SelectField
     {options}
     bind:value
-    clearSearchOnFocus
+    clearSearchOnOpen
     classes={{ selected: 'bg-accent-500 text-white' }}
   />
 </Preview>