kopia lustrzana https://github.com/shoelace-style/shoelace
update typeToSelect arg
rodzic
d77f543c8f
commit
8ae987ea69
|
@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
||||||
## Next
|
## Next
|
||||||
|
|
||||||
- 🚨 BREAKING: removed `checked-icon` part from `<sl-menu-item>` in preparation for parts refactor
|
- 🚨 BREAKING: removed `checked-icon` part from `<sl-menu-item>` in preparation for parts refactor
|
||||||
|
- 🚨 BREAKING: changed the `typeToSelect()` method's argument from `String` to `KeyboardEvent` in `<sl-menu>` to support more advanced key combinations
|
||||||
- Added `form`, `formaction`, `formmethod`, `formnovalidate`, and `formtarget` attributes to `<sl-button>` [#699](https://github.com/shoelace-style/shoelace/issues/699)
|
- Added `form`, `formaction`, `formmethod`, `formnovalidate`, and `formtarget` attributes to `<sl-button>` [#699](https://github.com/shoelace-style/shoelace/issues/699)
|
||||||
- Added Prettier and ESLint to markdown files
|
- Added Prettier and ESLint to markdown files
|
||||||
- Added background color and border to `<sl-menu>`
|
- Added background color and border to `<sl-menu>`
|
||||||
|
|
|
@ -255,7 +255,7 @@ export default class SlDropdown extends LitElement {
|
||||||
// Other keys bring focus to the menu and initiate type-to-select behavior
|
// Other keys bring focus to the menu and initiate type-to-select behavior
|
||||||
const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
|
const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
|
||||||
if (this.open && !ignoredKeys.includes(event.key)) {
|
if (this.open && !ignoredKeys.includes(event.key)) {
|
||||||
menu.typeToSelect(event.key);
|
menu.typeToSelect(event);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -71,19 +71,23 @@ export default class SlMenu extends LitElement {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.
|
* Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.
|
||||||
* The key passed will be appended to the internal query and the selection will be updated. After a brief period, the
|
* The event passed will be used to append the appropriate characters to the internal query and the selection will be
|
||||||
* internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for
|
* updated. After a brief period, the internal query is cleared automatically. This is useful for enabling
|
||||||
* enabling type-to-select when the menu doesn't have focus.
|
* type-to-select behavior when the menu doesn't have focus.
|
||||||
*/
|
*/
|
||||||
typeToSelect(key: string) {
|
typeToSelect(event: KeyboardEvent) {
|
||||||
const items = this.getAllItems({ includeDisabled: false });
|
const items = this.getAllItems({ includeDisabled: false });
|
||||||
clearTimeout(this.typeToSelectTimeout);
|
clearTimeout(this.typeToSelectTimeout);
|
||||||
this.typeToSelectTimeout = window.setTimeout(() => (this.typeToSelectString = ''), 1000);
|
this.typeToSelectTimeout = window.setTimeout(() => (this.typeToSelectString = ''), 1000);
|
||||||
|
|
||||||
if (key === 'Backspace') {
|
if (event.key === 'Backspace') {
|
||||||
this.typeToSelectString = this.typeToSelectString.slice(0, -1);
|
if (event.metaKey || event.ctrlKey) {
|
||||||
|
this.typeToSelectString = '';
|
||||||
|
} else {
|
||||||
|
this.typeToSelectString = this.typeToSelectString.slice(0, -1);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.typeToSelectString += key.toLowerCase();
|
this.typeToSelectString += event.key.toLowerCase();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Restore focus in browsers that don't support :focus-visible when using the keyboard
|
// Restore focus in browsers that don't support :focus-visible when using the keyboard
|
||||||
|
@ -171,7 +175,7 @@ export default class SlMenu extends LitElement {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.typeToSelect(event.key);
|
this.typeToSelect(event);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleMouseDown(event: MouseEvent) {
|
handleMouseDown(event: MouseEvent) {
|
||||||
|
|
|
@ -283,7 +283,7 @@ export default class SlSelect extends LitElement {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
this.dropdown.show();
|
this.dropdown.show();
|
||||||
this.menu.typeToSelect(event.key);
|
this.menu.typeToSelect(event);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Ładowanie…
Reference in New Issue