diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 48484c4cf..79b6ff252 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -11,6 +11,9 @@ Components with the Experimental badge sh
## Next
- Fixed incorrectly named exported tooltip parts in `` [pr:1277]
+- Fixed a bug in `` that caused menus to overflow the viewport instead of resizing [issue:1267]
+- Fixed a bug in `` that prevented keyboard selection of items when nested in shadow roots [issue:1270]
+- Fixed a bug in `` that prevented items passed in from slots from being detected [issue:1271]
## 3.0.0-beta.4
diff --git a/packages/webawesome/src/components/dropdown/dropdown.css b/packages/webawesome/src/components/dropdown/dropdown.css
index a45699f9b..693bdc013 100644
--- a/packages/webawesome/src/components/dropdown/dropdown.css
+++ b/packages/webawesome/src/components/dropdown/dropdown.css
@@ -17,6 +17,9 @@
color: var(--wa-color-text-normal);
text-align: start;
user-select: none;
+ overflow: auto;
+ max-width: var(--auto-size-available-width) !important;
+ max-height: var(--auto-size-available-height) !important;
&.show {
animation: show var(--show-duration) ease;
diff --git a/packages/webawesome/src/components/dropdown/dropdown.ts b/packages/webawesome/src/components/dropdown/dropdown.ts
index 160510e77..2b21643d0 100644
--- a/packages/webawesome/src/components/dropdown/dropdown.ts
+++ b/packages/webawesome/src/components/dropdown/dropdown.ts
@@ -8,6 +8,7 @@ import { WaAfterShowEvent } from '../../events/after-show.js';
import { WaHideEvent } from '../../events/hide.js';
import { WaSelectEvent } from '../../events/select.js';
import { WaShowEvent } from '../../events/show.js';
+import { activeElements } from '../../internal/active-elements.js';
import { animateWithClass } from '../../internal/animate.js';
import { uniqueId } from '../../internal/math.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
@@ -123,19 +124,30 @@ export default class WaDropdown extends WebAwesomeElement {
}
}
- /** Gets all elements slotted in the menu that aren't disabled. */
+ /** Gets all dropdown items slotted in the menu. */
private getItems(includeDisabled = false): WaDropdownItem[] {
- const items = [...this.children].filter(
- el => el.localName === 'wa-dropdown-item' && !el.hasAttribute('slot'),
- ) as WaDropdownItem[];
+ const items = this.defaultSlot
+ .assignedElements({ flatten: true })
+ .filter(el => el.localName === 'wa-dropdown-item') as WaDropdownItem[];
+
return includeDisabled ? items : items.filter(item => !item.disabled);
}
/** Gets all dropdown items in a specific submenu. */
private getSubmenuItems(parentItem: WaDropdownItem, includeDisabled = false): WaDropdownItem[] {
- const items = [...parentItem.children].filter(
- el => el.localName === 'wa-dropdown-item' && el.getAttribute('slot') === 'submenu',
- ) as WaDropdownItem[];
+ // Find the submenu slot within the parent item
+ const submenuSlot =
+ parentItem.shadowRoot?.querySelector('slot[name="submenu"]') ||
+ parentItem.querySelector('slot[name="submenu"]');
+ if (!submenuSlot) {
+ return [];
+ }
+
+ // Get the items from the submenu slot
+ const items = submenuSlot
+ .assignedElements({ flatten: true })
+ .filter(el => el.localName === 'wa-dropdown-item') as WaDropdownItem[];
+
return includeDisabled ? items : items.filter(item => !item.disabled);
}
@@ -277,7 +289,7 @@ export default class WaDropdown extends WebAwesomeElement {
return;
}
- const activeElement = document.activeElement as HTMLElement;
+ const activeElement = [...activeElements()].find(el => el.localName === 'wa-dropdown-item');
const isFocusedOnItem = activeElement?.localName === 'wa-dropdown-item';
const currentSubmenuItem = this.getCurrentSubmenuItem();
const isInSubmenu = !!currentSubmenuItem;
@@ -706,7 +718,9 @@ export default class WaDropdown extends WebAwesomeElement {
flip
flip-fallback-strategy="best-fit"
shift
- shift-padding="8"
+ shift-padding="10"
+ auto-size="vertical"
+ auto-size-padding="10"
>