Skip to content

Commit 0f1c756

Browse files
committed
feat: [#626] add filterText mouse support and preserve filterText on blur
1 parent c13e6a4 commit 0f1c756

File tree

4 files changed

+44
-3
lines changed

4 files changed

+44
-3
lines changed

README.md

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

7677

7778
## Named slots

src/lib/Select.svelte

+7-3
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
export let filterSelectedItems = true;
4343
export let required = false;
4444
export let closeListOnChange = true;
45+
export let clearFilterTextOnBlur = true;
4546
4647
export let createGroupHeaderItem = (groupValue, item) => {
4748
return {
@@ -471,6 +472,7 @@
471472
472473
function handleClick() {
473474
if (disabled) return;
475+
if (filterText.length > 0) return listOpen = true;
474476
listOpen = !listOpen;
475477
}
476478
@@ -504,7 +506,9 @@
504506
}
505507
506508
function closeList() {
507-
filterText = '';
509+
if (clearFilterTextOnBlur) {
510+
filterText = '';
511+
}
508512
listOpen = false;
509513
}
510514
@@ -676,7 +680,6 @@
676680
class:error={hasError}
677681
style={containerStyles}
678682
on:pointerup|preventDefault={handleClick}
679-
on:mousedown|preventDefault
680683
bind:this={container}
681684
use:floatingRef
682685
role="none">
@@ -687,7 +690,8 @@
687690
class="svelte-select-list"
688691
class:prefloat
689692
on:scroll={handleListScroll}
690-
on:pointerup|preventDefault|stopPropagation>
693+
on:pointerup|preventDefault|stopPropagation
694+
on:mousedown|preventDefault|stopPropagation>
691695
{#if $$slots['list-prepend']}<slot name="list-prepend" />{/if}
692696
{#if $$slots.list}<slot name="list" {filteredItems} />
693697
{:else if filteredItems.length > 0}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script>
2+
import Select from '$lib/Select.svelte';
3+
4+
let items = [
5+
{ value: 'one', label: 'One' },
6+
{ value: 'two', label: 'Two' },
7+
{ value: 'three', label: 'Three' },
8+
];
9+
10+
</script>
11+
12+
<Select {items} clearFilterTextOnBlur={false} />
13+
<Select {items} multiple clearFilterTextOnBlur={false} />

test/src/tests.js

+23
Original file line numberDiff line numberDiff line change
@@ -518,6 +518,29 @@ test('blur should close list and remove focus from select', async (t) => {
518518
select.$destroy();
519519
});
520520

521+
test('blur should close list and remove focus from select but preserve filterText value', async (t) => {
522+
const div = document.createElement('div');
523+
document.body.appendChild(div);
524+
525+
const select = new Select({
526+
target,
527+
props: {
528+
items,
529+
clearFilterTextOnBlur: false
530+
}
531+
});
532+
533+
select.$set({focused: true});
534+
select.$set({filterText: 'potato'});
535+
div.click();
536+
div.remove();
537+
t.ok(!document.querySelector('.svelte-select-list'));
538+
t.ok(document.querySelector('.svelte-select input') !== document.activeElement);
539+
const selectInput = document.querySelector('.svelte-select input');
540+
t.ok(selectInput.attributes.filterText === 'potato');
541+
select.$destroy();
542+
});
543+
521544
test('selecting item should close list but keep focus on select', async (t) => {
522545
const select = new Select({
523546
target,

0 commit comments

Comments
 (0)