Fix filterable MultiSelect keydown behavior (#961)

* fix(multi-select): blur input when tabbing away

Fixes #938

* fix(multi-select): close a filterable menu on "Escape"

* fix(multi-select): open filterable menu on [Space]
This commit is contained in:
Eric Liu 2021-12-30 13:00:21 -08:00 committed by GitHub
commit 997eeb7b48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -64,7 +64,7 @@
* @type {(item: MultiSelectItem, value: string) => string} * @type {(item: MultiSelectItem, value: string) => string}
*/ */
export let filterItem = (item, value) => export let filterItem = (item, value) =>
item.text.toLowerCase().includes(value.toLowerCase()); item.text.toLowerCase().includes(value.trim().toLowerCase());
/** Set to `true` to open the dropdown */ /** Set to `true` to open the dropdown */
export let open = false; export let open = false;
@ -412,10 +412,15 @@
} }
} else if (key === 'Tab') { } else if (key === 'Tab') {
open = false; open = false;
inputRef.blur();
} else if (key === 'ArrowDown') { } else if (key === 'ArrowDown') {
change(1); change(1);
} else if (key === 'ArrowUp') { } else if (key === 'ArrowUp') {
change(-1); change(-1);
} else if (key === 'Escape') {
open = false;
} else if (key === ' ') {
if (!open) open = true;
} }
}}" }}"
on:keyup on:keyup