diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index 8db57ce3d..4a19dad86 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -14,6 +14,8 @@ During the alpha period, things might break! We take breaking changes very serio ## Next +- Fixed the search dialog's styles so it doesn't jump around as you search +- Removed close watcher logic to backdrop hide animation bugs in `` and ``; this logic is already handled and we'll revisit `CloseWatcher` when browser support is better and behaviors are consistent - Revert `` structure and CSS to fix clipped content in dialogs (WA-A #123) and light dismiss in iOS Safari (WA-A #201) ## 3.0.0-alpha.11 diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index f822935b2..6cd943000 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -57,7 +57,6 @@ export default class WaDialog extends WebAwesomeElement { private readonly localize = new LocalizeController(this); private originalTrigger: HTMLElement | null; - private closeWatcher: CloseWatcher | null; @query('.dialog') dialog: HTMLDialogElement; @@ -125,16 +124,7 @@ export default class WaDialog extends WebAwesomeElement { } private addOpenListeners() { - if ('CloseWatcher' in window) { - this.closeWatcher?.destroy(); - this.closeWatcher = new CloseWatcher(); - this.closeWatcher.onclose = () => { - this.requestClose(this.dialog); - }; - } else { - this.closeWatcher?.destroy(); - document.addEventListener('keydown', this.handleDocumentKeyDown); - } + document.addEventListener('keydown', this.handleDocumentKeyDown); } private removeOpenListeners() { diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts index fd43468e7..cf5b0d9b9 100644 --- a/src/components/drawer/drawer.ts +++ b/src/components/drawer/drawer.ts @@ -62,7 +62,6 @@ export default class WaDrawer extends WebAwesomeElement { private readonly localize = new LocalizeController(this); private originalTrigger: HTMLElement | null; - private closeWatcher: CloseWatcher | null; @query('.drawer') drawer: HTMLDialogElement; @@ -136,16 +135,7 @@ export default class WaDrawer extends WebAwesomeElement { } private addOpenListeners() { - if ('CloseWatcher' in window) { - this.closeWatcher?.destroy(); - this.closeWatcher = new CloseWatcher(); - this.closeWatcher.onclose = () => { - this.requestClose(this.drawer); - }; - } else { - this.closeWatcher?.destroy(); - document.addEventListener('keydown', this.handleDocumentKeyDown); - } + document.addEventListener('keydown', this.handleDocumentKeyDown); } private removeOpenListeners() { diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index 15e0401c2..bdf80b76e 100644 --- a/src/components/dropdown/dropdown.ts +++ b/src/components/dropdown/dropdown.ts @@ -50,8 +50,6 @@ export default class WaDropdown extends WebAwesomeElement { @query('#trigger') trigger: HTMLSlotElement; @query('.panel') panel: HTMLSlotElement; - private closeWatcher: CloseWatcher | null; - /** * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. @@ -148,7 +146,7 @@ export default class WaDropdown extends WebAwesomeElement { private handleKeyDown = (event: KeyboardEvent) => { // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation // in case any ancestors are also listening for this key. - if (this.open && event.key === 'Escape' && !this.closeWatcher) { + if (this.open && event.key === 'Escape') { event.stopPropagation(); this.hide(); this.focusOnTrigger(); @@ -344,16 +342,7 @@ export default class WaDropdown extends WebAwesomeElement { addOpenListeners() { this.panel.addEventListener('wa-select', this.handlePanelSelect); - if ('CloseWatcher' in window) { - this.closeWatcher?.destroy(); - this.closeWatcher = new CloseWatcher(); - this.closeWatcher.onclose = () => { - this.hide(); - this.focusOnTrigger(); - }; - } else { - this.panel.addEventListener('keydown', this.handleKeyDown); - } + this.panel.addEventListener('keydown', this.handleKeyDown); document.addEventListener('keydown', this.handleDocumentKeyDown); document.addEventListener('mousedown', this.handleDocumentMouseDown); } @@ -365,7 +354,6 @@ export default class WaDropdown extends WebAwesomeElement { } document.removeEventListener('keydown', this.handleDocumentKeyDown); document.removeEventListener('mousedown', this.handleDocumentMouseDown); - this.closeWatcher?.destroy(); } @watch('open', { waitUntilFirstUpdate: true }) diff --git a/src/components/select/select.ts b/src/components/select/select.ts index e82c53d2c..4424e971a 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -102,7 +102,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { private readonly localize = new LocalizeController(this); private typeToSelectString = ''; private typeToSelectTimeout: number; - private closeWatcher: CloseWatcher | null; @query('.select') popup: WaPopup; @query('.combobox') combobox: HTMLSlotElement; @@ -280,17 +279,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { if (this.getRootNode() !== document) { this.getRootNode().addEventListener('focusin', this.handleDocumentFocusIn); } - - if ('CloseWatcher' in window) { - this.closeWatcher?.destroy(); - this.closeWatcher = new CloseWatcher(); - this.closeWatcher.onclose = () => { - if (this.open) { - this.hide(); - this.displayInput.focus({ preventScroll: true }); - } - }; - } } private removeOpenListeners() { @@ -301,8 +289,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { if (this.getRootNode() !== document) { this.getRootNode().removeEventListener('focusin', this.handleDocumentFocusIn); } - - this.closeWatcher?.destroy(); } private handleFocus() { diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index 4f2b1cb63..8c820064f 100644 --- a/src/components/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip.ts @@ -44,7 +44,6 @@ export default class WaTooltip extends WebAwesomeElement { static dependencies = { 'wa-popup': WaPopup }; private hoverTimeout: number; - private closeWatcher: CloseWatcher | null; @query('slot:not([name])') defaultSlot: HTMLSlotElement; @query('.body') body: HTMLElement; @@ -127,7 +126,6 @@ export default class WaTooltip extends WebAwesomeElement { super.disconnectedCallback(); // Cleanup this event in case the tooltip is removed while open - this.closeWatcher?.destroy(); document.removeEventListener('keydown', this.handleDocumentKeyDown); this.eventController.abort(); @@ -212,15 +210,7 @@ export default class WaTooltip extends WebAwesomeElement { return; } - if ('CloseWatcher' in window) { - this.closeWatcher?.destroy(); - this.closeWatcher = new CloseWatcher(); - this.closeWatcher.onclose = () => { - this.hide(); - }; - } else { - document.addEventListener('keydown', this.handleDocumentKeyDown, { signal: this.eventController.signal }); - } + document.addEventListener('keydown', this.handleDocumentKeyDown, { signal: this.eventController.signal }); this.body.hidden = false; this.popup.active = true; @@ -237,7 +227,6 @@ export default class WaTooltip extends WebAwesomeElement { return; } - this.closeWatcher?.destroy(); document.removeEventListener('keydown', this.handleDocumentKeyDown); await animateWithClass(this.popup.popup, 'hide-with-scale');