From f1479715fa3d881b49d95f6d0ee39b5183c05309 Mon Sep 17 00:00:00 2001 From: GZolla <43836485+GZolla@users.noreply.github.com> Date: Fri, 23 Oct 2026 09:15:45 -0700 Subject: [PATCH 1/2] feat: fix filter sizing --- components/dropdown/dropdown-menu.js | 5 ++--- components/dropdown/dropdown-popover-mixin.js | 8 +++++++- components/filter/filter.js | 7 +++++++ 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/components/dropdown/dropdown-menu.js b/components/dropdown/dropdown-menu.js index c164a90c4e9..eb62448864f 100644 --- a/components/dropdown/dropdown-menu.js +++ b/components/dropdown/dropdown-menu.js @@ -125,7 +125,7 @@ class DropdownMenu extends ThemeMixin(DropdownPopoverMixin(LitElement)) { this.#getMenuElement().focus(); } - #handleMenuResize(e) { + #handleMenuResize() { if (this._mobile && this.mobileTray) { this.maxHeight = null; @@ -133,7 +133,7 @@ class DropdownMenu extends ThemeMixin(DropdownPopoverMixin(LitElement)) { this.maxHeight = this.#maxHeightNonTray; } - this.position(e.detail, { updateLocation: this.#initializingHeight }); + this.position(undefined, { updateLocation: this.#initializingHeight }); this.#initializingHeight = false; const menu = this.#getMenuElement(); @@ -152,7 +152,6 @@ class DropdownMenu extends ThemeMixin(DropdownPopoverMixin(LitElement)) { this._closeRadio = false; const menu = this.#getMenuElement(); - menu.resize(); // If dropdown-menu is opened on first render, do not focus if (this.#initiallyOpenedSuppressFocus) this.#initiallyOpenedSuppressFocus = false; diff --git a/components/dropdown/dropdown-popover-mixin.js b/components/dropdown/dropdown-popover-mixin.js index 8b37d4c9623..c59a1b14170 100644 --- a/components/dropdown/dropdown-popover-mixin.js +++ b/components/dropdown/dropdown-popover-mixin.js @@ -96,6 +96,11 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem * @type {boolean} */ opened: { type: Boolean, reflect: true }, + /** + * Whether the dropdown opens above the opener + * @type {boolean} + */ + openAbove: { type: Boolean, attribute: 'open-above' }, /** * Optionally render a d2l-focus-trap around the dropdown content * @type {boolean} @@ -181,6 +186,7 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem super(); this.async = false; this.opened = false; + this.openAbove = false; this.noAutoClose = false; this.noAutoFit = false; this.noAutoFocus = false; @@ -281,7 +287,7 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem noAutoFocus: this.noAutoFocus, noPointer: this.noPointer, offset: (this.verticalOffset !== undefined ? Number.parseInt(this.verticalOffset) : undefined), - position: { location: 'block-end', span: this.#adaptPositionSpan(this.align) }, + position: { location: this.openAbove ? 'block-start' : 'block-end', span: this.#adaptPositionSpan(this.align) }, trapFocus: this.trapFocus }); } diff --git a/components/filter/filter.js b/components/filter/filter.js index 8a0b2fb6bd5..dda157ebece 100644 --- a/components/filter/filter.js +++ b/components/filter/filter.js @@ -83,6 +83,11 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) { * @type {boolean} */ opened: { type: Boolean, reflect: true }, + /** + * Whether the dropdown opens above the opener + * @type {boolean} + */ + openAbove: { type: Boolean, attribute: 'open-above' }, /** * Optional override for the button text used for a multi-dimensional filter * @type {string} @@ -265,6 +270,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) { no-padding-header no-padding ?opened="${this.opened}" + ?open-above="${this.openAbove}" ?trap-focus="${!this._isDimensionEmpty(this._dimensions[0])}"> ${header} ${dimensions} @@ -278,6 +284,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) { mobile-breakpoint="768" no-padding-header ?opened="${this.opened}" + ?open-above="${this.openAbove}" trap-focus> ${header} From 033d0e43362468df68b7022c436e241448d7639a Mon Sep 17 00:00:00 2001 From: GZolla <43836485+GZolla@users.noreply.github.com> Date: Tue, 27 Oct 2026 12:06:29 -0700 Subject: [PATCH 2/2] Remove open above attribute --- components/dropdown/dropdown-popover-mixin.js | 8 +------- components/filter/filter.js | 7 ------- 2 files changed, 1 insertion(+), 14 deletions(-) diff --git a/components/dropdown/dropdown-popover-mixin.js b/components/dropdown/dropdown-popover-mixin.js index c59a1b14170..8b37d4c9623 100644 --- a/components/dropdown/dropdown-popover-mixin.js +++ b/components/dropdown/dropdown-popover-mixin.js @@ -96,11 +96,6 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem * @type {boolean} */ opened: { type: Boolean, reflect: true }, - /** - * Whether the dropdown opens above the opener - * @type {boolean} - */ - openAbove: { type: Boolean, attribute: 'open-above' }, /** * Optionally render a d2l-focus-trap around the dropdown content * @type {boolean} @@ -186,7 +181,6 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem super(); this.async = false; this.opened = false; - this.openAbove = false; this.noAutoClose = false; this.noAutoFit = false; this.noAutoFocus = false; @@ -287,7 +281,7 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem noAutoFocus: this.noAutoFocus, noPointer: this.noPointer, offset: (this.verticalOffset !== undefined ? Number.parseInt(this.verticalOffset) : undefined), - position: { location: this.openAbove ? 'block-start' : 'block-end', span: this.#adaptPositionSpan(this.align) }, + position: { location: 'block-end', span: this.#adaptPositionSpan(this.align) }, trapFocus: this.trapFocus }); } diff --git a/components/filter/filter.js b/components/filter/filter.js index dda157ebece..8a0b2fb6bd5 100644 --- a/components/filter/filter.js +++ b/components/filter/filter.js @@ -83,11 +83,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) { * @type {boolean} */ opened: { type: Boolean, reflect: true }, - /** - * Whether the dropdown opens above the opener - * @type {boolean} - */ - openAbove: { type: Boolean, attribute: 'open-above' }, /** * Optional override for the button text used for a multi-dimensional filter * @type {string} @@ -270,7 +265,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) { no-padding-header no-padding ?opened="${this.opened}" - ?open-above="${this.openAbove}" ?trap-focus="${!this._isDimensionEmpty(this._dimensions[0])}"> ${header} ${dimensions} @@ -284,7 +278,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) { mobile-breakpoint="768" no-padding-header ?opened="${this.opened}" - ?open-above="${this.openAbove}" trap-focus> ${header}