js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixes #1911

Browse Source
This commit is contained in:
Cory LaViska
2025-12-30 11:49:16 -05:00
parent 22dc34f467
commit f5c961eeba
3 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/webawesome/docs/docs/resources/changelog.md
View File

@@ -14,7 +14,8 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
## Next ## Next
- Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883] - Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883]
- Fixed a bug in `<wa-popup>` and `<wa-dropdown-item>` that caused an error when removing a popup while it was opening - Fixed a bug in `<wa-popup>` and `<wa-dropdown-item>` that caused an error when removing a popup while it was opening [issue:1910]
- Fixed a bug in `<wa-popup>` and `<wa-dropdown>` that caused errors when shadow DOM queries returned null [issue:1911]
## 3.1.0 ## 3.1.0

20
packages/webawesome/src/components/dropdown/dropdown.ts
View File

@@ -138,9 +138,9 @@ export default class WaDropdown extends WebAwesomeElement {
/** Gets all dropdown items slotted in the menu. */ /** Gets all dropdown items slotted in the menu. */
private getItems(includeDisabled = false): WaDropdownItem[] { private getItems(includeDisabled = false): WaDropdownItem[] {
const items = this.defaultSlot const items = (this.defaultSlot?.assignedElements({ flatten: true }) ?? []).filter(
.assignedElements({ flatten: true }) el => el.localName === 'wa-dropdown-item',
.filter(el => el.localName === 'wa-dropdown-item') as WaDropdownItem[]; ) as WaDropdownItem[];
return includeDisabled ? items : items.filter(item => !item.disabled); return includeDisabled ? items : items.filter(item => !item.disabled);
} }
@@ -165,9 +165,9 @@ export default class WaDropdown extends WebAwesomeElement {
/** Syncs item sizes with the dropdown's size property. */ /** Syncs item sizes with the dropdown's size property. */
private syncItemSizes() { private syncItemSizes() {
const items = this.defaultSlot const items = (this.defaultSlot?.assignedElements({ flatten: true }) ?? []).filter(
.assignedElements({ flatten: true }) el => el.localName === 'wa-dropdown-item',
.filter(el => el.localName === 'wa-dropdown-item') as WaDropdownItem[]; ) as WaDropdownItem[];
items.forEach(item => (item.size = this.size)); items.forEach(item => (item.size = this.size));
} }
@@ -230,7 +230,7 @@ export default class WaDropdown extends WebAwesomeElement {
/** Shows the dropdown menu. This should only be called from within updated(). */ /** Shows the dropdown menu. This should only be called from within updated(). */
private async showMenu() { private async showMenu() {
const anchor = this.getTrigger(); const anchor = this.getTrigger();
if (!anchor) return; if (!anchor || !this.popup || !this.menu) return;
const showEvent = new WaShowEvent(); const showEvent = new WaShowEvent();
this.dispatchEvent(showEvent); this.dispatchEvent(showEvent);
@@ -270,6 +270,8 @@ export default class WaDropdown extends WebAwesomeElement {
/** Hides the dropdown menu. This should only be called from within updated(). */ /** Hides the dropdown menu. This should only be called from within updated(). */
private async hideMenu() { private async hideMenu() {
if (!this.popup || !this.menu) return;
const hideEvent = new WaHideEvent({ source: this }); const hideEvent = new WaHideEvent({ source: this });
this.dispatchEvent(hideEvent); this.dispatchEvent(hideEvent);
if (hideEvent.defaultPrevented) { if (hideEvent.defaultPrevented) {
@@ -720,12 +722,12 @@ export default class WaDropdown extends WebAwesomeElement {
nativeButton.setAttribute('aria-haspopup', 'menu'); nativeButton.setAttribute('aria-haspopup', 'menu');
nativeButton.setAttribute('aria-expanded', this.open ? 'true' : 'false'); nativeButton.setAttribute('aria-expanded', this.open ? 'true' : 'false');
this.menu.setAttribute('aria-expanded', 'false'); this.menu?.setAttribute('aria-expanded', 'false');
} }
render() { render() {
// On initial render, we want to use this.open, for everything else, we sync off of this.popup.active to get animations working. // On initial render, we want to use this.open, for everything else, we sync off of this.popup.active to get animations working.
let active = this.hasUpdated ? this.popup.active : this.open; let active = this.hasUpdated ? this.popup?.active : this.open;
return html` return html`
<wa-popup <wa-popup

4
packages/webawesome/src/components/popup/popup.ts
View File

@@ -317,7 +317,7 @@ export default class WaPopup extends WebAwesomeElement {
/** Forces the popup to recalculate and reposition itself. */ /** Forces the popup to recalculate and reposition itself. */
reposition() { reposition() {
// Nothing to do if the popup is inactive or the anchor doesn't exist // Nothing to do if the popup is inactive or the anchor doesn't exist
if (!this.active || !this.anchorEl) { if (!this.active || !this.anchorEl || !this.popup) {
return; return;
} }
@@ -498,7 +498,7 @@ export default class WaPopup extends WebAwesomeElement {
} }
private updateHoverBridge = () => { private updateHoverBridge = () => {
if (this.hoverBridge && this.anchorEl) { if (this.hoverBridge && this.anchorEl && this.popup) {
const anchorRect = this.anchorEl.getBoundingClientRect(); const anchorRect = this.anchorEl.getBoundingClientRect();
const popupRect = this.popup.getBoundingClientRect(); const popupRect = this.popup.getBoundingClientRect();
const isVertical = this.placement.includes('top') || this.placement.includes('bottom'); const isVertical = this.placement.includes('top') || this.placement.includes('bottom');