Merge pull request #650 from rob-balfre/pullrequests/mBoegvald/feature/626_filterText_mouse_support_preserve_value

Pullrequests/m boegvald/feature/626 filter text mouse support preserve value

Author: rob-balfre

README.md

@@ -72,6 +72,7 @@ List position and floating is powered by `floating-ui`, see their [package-entry
 | required               | `boolean` | `false`         | If `Select` is within a `<form>` will restrict form submission |
 | multiFullItemClearable | `boolean` | `false`         | When `multiple` selected items will clear on click             |
 | closeListOnChange      | `boolean` | `true`          | After `on:change` list will close                              |
+| clearFilterTextOnBlur  | `boolean` | `true`          | If `false`, `filterText` value is preserved on:blur            |
 
 
 ## Named slots

src/lib/Select.svelte

@@ -42,6 +42,7 @@
     export let filterSelectedItems = true;
     export let required = false;
     export let closeListOnChange = true;
+    export let clearFilterTextOnBlur = true;
 
     export let createGroupHeaderItem = (groupValue, item) => {
         return {
@@ -471,6 +472,7 @@
 
     function handleClick() {
         if (disabled) return;
+        if (filterText.length > 0) return listOpen = true;
         listOpen = !listOpen;
     }
 
@@ -504,7 +506,9 @@
     }
 
     function closeList() {
-        filterText = '';
+        if (clearFilterTextOnBlur) {
+            filterText = '';
+        }
         listOpen = false;
     }
 
@@ -676,7 +680,6 @@
     class:error={hasError}
     style={containerStyles}
     on:pointerup|preventDefault={handleClick}
-    on:mousedown|preventDefault
     bind:this={container}
     use:floatingRef
     role="none">
@@ -687,7 +690,8 @@
             class="svelte-select-list"
             class:prefloat
             on:scroll={handleListScroll}
-            on:pointerup|preventDefault|stopPropagation>
+            on:pointerup|preventDefault|stopPropagation
+            on:mousedown|preventDefault|stopPropagation>
             {#if $$slots['list-prepend']}<slot name="list-prepend" />{/if}
             {#if $$slots.list}<slot name="list" {filteredItems} />
             {:else if filteredItems.length > 0}

src/routes/examples/props/clearFilterTextOnBlur/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+</script>
+
+<Select {items} clearFilterTextOnBlur={false} />
+<Select {items} multiple clearFilterTextOnBlur={false} />

test/src/tests.js

@@ -518,6 +518,51 @@ test('blur should close list and remove focus from select', async (t) => {
   select.$destroy();
 });
 
+test('blur should close list and remove focus from select but preserve filterText value', async (t) => {
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+
+  const select = new Select({
+    target,
+    props: {
+      items,
+      clearFilterTextOnBlur: false
+    }
+  });
+
+  const selectInput = document.querySelector('.svelte-select input');
+  
+  select.$set({focused: true});
+  select.$set({filterText: 'potato'});
+  div.click();
+  div.remove();
+  t.ok(!document.querySelector('.svelte-select-list'));
+  t.ok(selectInput !== document.activeElement);
+  
+  await wait(0);
+  t.ok(selectInput.value === 'potato');
+  select.$destroy();
+});
+
+test('blur should close list and remove focus from select and clear filterText value', async (t) => {
+  const select = new Select({
+    target,
+    props: {
+      items
+    }
+  });
+
+  const selectInput = document.querySelector('.svelte-select input');
+
+  select.$set({listOpen: true});
+  select.$set({filterText: 'potato'});
+  await wait(0);
+  selectInput.blur();
+  await wait(0);
+  t.ok(selectInput.value === '');
+  select.$destroy();
+});
+
 test('selecting item should close list but keep focus on select', async (t) => {
   const select = new Select({
     target,