kopia lustrzana https://github.com/shoelace-style/shoelace
Make sure `<sl-select>` closes when focusing out (#1764)
* fixes #1763 * fix comment * 🤷🏻♂️ * whatever wtrpull/1771/head
rodzic
dd27db5196
commit
b7eccb1bff
|
@ -18,6 +18,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
|
|||
- Fixed more performance issues with focus trapping performance. [#1750]
|
||||
- Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
|
||||
- Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
|
||||
- Fixed a bug in `<sl-select>` that prevented it from closing when tabbing to another select inside a shadow root [#1763]
|
||||
- Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
|
||||
|
||||
## 2.12.0
|
||||
|
|
|
@ -216,15 +216,22 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
|
|||
}
|
||||
|
||||
private addOpenListeners() {
|
||||
document.addEventListener('focusin', this.handleDocumentFocusIn);
|
||||
document.addEventListener('keydown', this.handleDocumentKeyDown);
|
||||
document.addEventListener('mousedown', this.handleDocumentMouseDown);
|
||||
//
|
||||
// Listen on the root node instead of the document in case the elements are inside a shadow root
|
||||
//
|
||||
// https://github.com/shoelace-style/shoelace/issues/1763
|
||||
//
|
||||
const root = this.getRootNode();
|
||||
root.addEventListener('focusin', this.handleDocumentFocusIn);
|
||||
root.addEventListener('keydown', this.handleDocumentKeyDown);
|
||||
root.addEventListener('mousedown', this.handleDocumentMouseDown);
|
||||
}
|
||||
|
||||
private removeOpenListeners() {
|
||||
document.removeEventListener('focusin', this.handleDocumentFocusIn);
|
||||
document.removeEventListener('keydown', this.handleDocumentKeyDown);
|
||||
document.removeEventListener('mousedown', this.handleDocumentMouseDown);
|
||||
const root = this.getRootNode();
|
||||
root.removeEventListener('focusin', this.handleDocumentFocusIn);
|
||||
root.removeEventListener('keydown', this.handleDocumentKeyDown);
|
||||
root.removeEventListener('mousedown', this.handleDocumentMouseDown);
|
||||
}
|
||||
|
||||
private handleFocus() {
|
||||
|
|
|
@ -156,6 +156,7 @@ describe('<sl-select>', () => {
|
|||
await el.updateComplete;
|
||||
await sendKeys({ press: 'ArrowDown' }); // move selection to the third option
|
||||
await el.updateComplete;
|
||||
el.focus(); // For some reason, the browser loses focus before we press enter. Refocus the select.
|
||||
await sendKeys({ press: 'Enter' }); // commit the selection
|
||||
await el.updateComplete;
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue