diff --git a/src/components/details/details.ts b/src/components/details/details.ts
index fbeadd35e..a37558d2d 100644
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -3,6 +3,7 @@ import { animate, parseDuration } from '../../internal/animate.js';
import { classMap } from 'lit/directives/class-map.js';
import { customElement, property, query } from 'lit/decorators.js';
import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
import { WaAfterHideEvent } from '../../events/after-hide.js';
import { WaAfterShowEvent } from '../../events/after-show.js';
import { WaHideEvent } from '../../events/hide.js';
@@ -52,13 +53,14 @@ import type { CSSResultGroup } from 'lit';
export default class WaDetails extends WebAwesomeElement {
static styles: CSSResultGroup = [componentStyles, styles];
+ private detailsObserver: MutationObserver;
+ private readonly localize = new LocalizeController(this);
+
@query('.details') details: HTMLDetailsElement;
@query('.details__header') header: HTMLElement;
@query('.details__body') body: HTMLElement;
@query('.details__expand-icon-slot') expandIconSlot: HTMLSlotElement;
- detailsObserver: MutationObserver;
-
/**
* Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
* can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
@@ -208,7 +210,7 @@ export default class WaDetails extends WebAwesomeElement {
}
render() {
- const isRtl = !this.hasUpdated ? this.dir === 'rtl' : this.matches(':dir(rtl)');
+ const isRtl = !this.hasUpdated ? this.dir === 'rtl' : this.localize.dir() === 'rtl';
return html`
{
const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']");
const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'wa-menu')[0];
- const isRtl = this.host.hasUpdated ? this.host.matches(':dir(rtl)') : this.host.dir === 'rtl';
+ const isRtl = getComputedStyle(this.host).direction === 'rtl';
if (!menu) {
return;
@@ -265,7 +265,7 @@ export class SubmenuController implements ReactiveController {
return html` `;
}
- const isRtl = this.host.matches(':dir(rtl)');
+ const isRtl = getComputedStyle(this.host).direction === 'rtl';
return html`
', () => {
+ let element: WaPopup;
+
for (const fixture of fixtures) {
describe(`with "${fixture.type}" rendering`, () => {
it('should render a component', async () => {
@@ -10,6 +13,26 @@ describe('', () => {
expect(el).to.exist;
});
+
+ it('should properly handle positioning when active changes', async () => {
+ element = await fixture(html``);
+
+ element.active = true;
+ await element.updateComplete;
+
+ // SImulate a scroll event
+ const event = new Event('scroll');
+ window.dispatchEvent(event);
+
+ element.active = false;
+ await element.updateComplete;
+
+ // The component should not throw an error when the window is scrolled
+ expect(() => {
+ element.active = true;
+ window.dispatchEvent(event);
+ }).not.to.throw();
+ });
});
}
});
diff --git a/src/components/popup/popup.ts b/src/components/popup/popup.ts
index 08a482cfd..41ccee79d 100644
--- a/src/components/popup/popup.ts
+++ b/src/components/popup/popup.ts
@@ -2,6 +2,7 @@ import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size
import { classMap } from 'lit/directives/class-map.js';
import { customElement, property, query } from 'lit/decorators.js';
import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
import { offsetParent } from 'composed-offset-position';
import { WaRepositionEvent } from '../../events/reposition.js';
import componentStyles from '../../styles/component.styles.js';
@@ -60,6 +61,7 @@ export default class WaPopup extends WebAwesomeElement {
private anchorEl: Element | VirtualElement | null;
private cleanup: ReturnType | undefined;
+ private readonly localize = new LocalizeController(this);
/** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */
@query('.popup') popup: HTMLElement;
@@ -276,7 +278,7 @@ export default class WaPopup extends WebAwesomeElement {
private start() {
// We can't start the positioner without an anchor
- if (!this.anchorEl) {
+ if (!this.anchorEl || !this.active) {
return;
}
@@ -418,7 +420,7 @@ export default class WaPopup extends WebAwesomeElement {
//
// Source: https://github.com/floating-ui/floating-ui/blob/cb3b6ab07f95275730d3e6e46c702f8d4908b55c/packages/dom/src/utils/getDocumentRect.ts#L31
//
- const isRtl = this.matches(':dir(rtl)');
+ const isRtl = this.localize.dir() === 'rtl';
const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]]!;
this.setAttribute('data-current-placement', placement);
diff --git a/src/components/radio-group/radio-group.test.ts b/src/components/radio-group/radio-group.test.ts
index 1f5ef9ad6..1bbba970e 100644
--- a/src/components/radio-group/radio-group.test.ts
+++ b/src/components/radio-group/radio-group.test.ts
@@ -297,6 +297,102 @@ describe('', () => {
});
});
+ describe('when handling focus', () => {
+ const doAction = async (instance: WaRadioGroup, type: string) => {
+ if (type === 'focus') {
+ instance.focus();
+ await instance.updateComplete;
+ return;
+ }
+
+ const label = instance.shadowRoot!.querySelector('#label')!;
+ label.click();
+ await instance.updateComplete;
+ };
+
+ // Tests for focus and label actions with radio buttons
+ ['focus', 'label'].forEach(actionType => {
+ describe(`when using ${actionType}`, () => {
+ it('should do nothing if all elements are disabled', async () => {
+ const el = await fixture(html`
+
+
+
+
+
+
+ `);
+
+ const validFocusHandler = sinon.spy();
+
+ Array.from(el.querySelectorAll('wa-radio')).forEach(radio =>
+ radio.addEventListener('wa-focus', validFocusHandler)
+ );
+
+ expect(validFocusHandler).to.not.have.been.called;
+ await doAction(el, actionType);
+ expect(validFocusHandler).to.not.have.been.called;
+ });
+
+ it('should focus the first radio that is enabled when the group receives focus', async () => {
+ const el = await fixture(html`
+
+
+
+
+
+
+ `);
+
+ const invalidFocusHandler = sinon.spy();
+ const validFocusHandler = sinon.spy();
+
+ const disabledRadio = el.querySelector('#radio-0')!;
+ const validRadio = el.querySelector('#radio-1')!;
+
+ disabledRadio.addEventListener('wa-focus', invalidFocusHandler);
+ validRadio.addEventListener('wa-focus', validFocusHandler);
+
+ expect(invalidFocusHandler).to.not.have.been.called;
+ expect(validFocusHandler).to.not.have.been.called;
+
+ await doAction(el, actionType);
+
+ expect(invalidFocusHandler).to.not.have.been.called;
+ expect(validFocusHandler).to.have.been.called;
+ });
+
+ it('should focus the currently enabled radio when the group receives focus', async () => {
+ const el = await fixture(html`
+
+
+
+
+
+
+ `);
+
+ const invalidFocusHandler = sinon.spy();
+ const validFocusHandler = sinon.spy();
+
+ const disabledRadio = el.querySelector('#radio-0')!;
+ const validRadio = el.querySelector('#radio-2')!;
+
+ disabledRadio.addEventListener('wa-focus', invalidFocusHandler);
+ validRadio.addEventListener('wa-focus', validFocusHandler);
+
+ expect(invalidFocusHandler).to.not.have.been.called;
+ expect(validFocusHandler).to.not.have.been.called;
+
+ await doAction(el, actionType);
+
+ expect(invalidFocusHandler).to.not.have.been.called;
+ expect(validFocusHandler).to.have.been.called;
+ });
+ });
+ });
+ });
+
describe('when the value changes', () => {
it('should emit wa-change when toggled with the arrow keys', async () => {
const radioGroup = await fixture(html`
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 5e4fe3668..7dc136b96 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -170,14 +170,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
}
private handleLabelClick() {
- const radios = this.getAllRadios();
- const checked = radios.find(radio => radio.checked);
- const radioToFocus = checked || radios[0];
-
- // Move focus to the checked radio (or the first one if none are checked) when clicking the label
- if (radioToFocus) {
- radioToFocus.focus();
- }
+ this.focus();
}
private async syncRadioElements() {
@@ -305,6 +298,19 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
event.preventDefault();
}
+ /** Sets focus on the radio group. */
+ public focus(options?: FocusOptions) {
+ const radios = this.getAllRadios();
+ const checked = radios.find(radio => radio.checked);
+ const firstEnabledRadio = radios.find(radio => !radio.disabled);
+ const radioToFocus = checked || firstEnabledRadio;
+
+ // Call focus for the checked radio. If no radio is checked, focus the first one that isn't disabled.
+ if (radioToFocus) {
+ radioToFocus.focus(options);
+ }
+ }
+
render() {
const hasLabelSlot = this.hasUpdated ? this.hasSlotController.test('label') : this.withLabel;
const hasHelpTextSlot = this.hasUpdated ? this.hasSlotController.test('help-text') : this.withHelpText;
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 8eea5ad3c..962ebba1d 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -202,7 +202,7 @@ export default class WaRange extends WebAwesomeFormAssociatedElement {
const inputWidth = this.input.offsetWidth;
const tooltipWidth = this.output.offsetWidth;
const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
- const isRtl = this.matches(':dir(rtl)');
+ const isRtl = this.localize.dir() === 'rtl';
const percentAsWidth = inputWidth * percent;
// The calculations are used to "guess" where the thumb is located. Since we're using the native range control
diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts
index 152dc24f9..c15624f3f 100644
--- a/src/components/rating/rating.ts
+++ b/src/components/rating/rating.ts
@@ -3,6 +3,7 @@ import { clamp } from '../../internal/math.js';
import { classMap } from 'lit/directives/class-map.js';
import { customElement, eventOptions, property, query, state } from 'lit/decorators.js';
import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
import { styleMap } from 'lit/directives/style-map.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { WaChangeEvent } from '../../events/change.js';
@@ -37,6 +38,8 @@ import type { CSSResultGroup } from 'lit';
export default class WaRating extends WebAwesomeElement {
static styles: CSSResultGroup = [componentStyles, styles];
+ private readonly localize = new LocalizeController(this);
+
@query('.rating') rating: HTMLElement;
@state() private hoverValue = 0;
@@ -80,7 +83,7 @@ export default class WaRating extends WebAwesomeElement {
}
private getValueFromXCoordinate(coordinate: number) {
- const isRtl = this.matches(':dir(rtl)');
+ const isRtl = this.localize.dir() === 'rtl';
const { left, right, width } = this.rating.getBoundingClientRect();
const value = isRtl
? this.roundToPrecision(((right - coordinate) / width) * this.max, this.precision)
@@ -109,7 +112,7 @@ export default class WaRating extends WebAwesomeElement {
private handleKeyDown(event: KeyboardEvent) {
const isLtr = this.matches(':dir(ltr)');
- const isRtl = this.matches(':dir(rtl)');
+ const isRtl = this.localize.dir() === 'rtl';
const oldValue = this.value;
if (this.disabled || this.readonly) {
@@ -214,7 +217,7 @@ export default class WaRating extends WebAwesomeElement {
}
render() {
- const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir;
+ const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir;
const counter = Array.from(Array(this.max).keys());
let displayValue = 0;
@@ -240,7 +243,7 @@ export default class WaRating extends WebAwesomeElement {
aria-valuenow=${this.value}
aria-valuemin=${0}
aria-valuemax=${this.max}
- tabindex=${this.disabled ? '-1' : '0'}
+ tabindex=${this.disabled || this.readonly ? '-1' : '0'}
@click=${this.handleClick}
@keydown=${this.handleKeyDown}
@mouseenter=${this.handleMouseEnter}
diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
index e7f9c1575..344d3a2f5 100644
--- a/src/components/select/select.styles.ts
+++ b/src/components/select/select.styles.ts
@@ -164,7 +164,7 @@ export default css`
margin-inline-end: var(--wa-space-s);
}
- .select--small.select--multiple .select__prefix::slotted(*) {
+ .select--small.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
margin-inline-start: var(--wa-space-s);
}
@@ -192,7 +192,7 @@ export default css`
margin-inline-end: var(--wa-space-m);
}
- .select--medium.select--multiple .select__prefix::slotted(*) {
+ .select--medium.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
margin-inline-start: var(--wa-space-m);
}
@@ -220,7 +220,7 @@ export default css`
margin-inline-end: var(--wa-space-l);
}
- .select--large.select--multiple .select__prefix::slotted(*) {
+ .select--large.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
margin-inline-start: var(--wa-space-l);
}
diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts
index 70ee423d1..f39d528ea 100644
--- a/src/components/select/select.test.ts
+++ b/src/components/select/select.test.ts
@@ -217,6 +217,29 @@ describe('', () => {
});
});
+ // This can happen in on Microsoft Edge auto-filling an associated input element in the same form
+ // https://github.com/shoelace-style/shoelace/issues/2117
+ it('should not throw on incomplete events', async () => {
+ const el = await fixture(html`
+
+ Option 1
+
+ `);
+
+ const event = new KeyboardEvent('keydown');
+ Object.defineProperty(event, 'target', { writable: false, value: el });
+ Object.defineProperty(event, 'key', { writable: false, value: undefined });
+
+ /**
+ * If Edge does autofill, it creates a broken KeyboardEvent
+ * which is missing the key value.
+ * Using the normal dispatch mechanism does not allow to do this
+ * Thus passing the event directly to the private method for testing
+ *
+ * @ts-expect-error - private property */
+ el.handleDocumentKeyDown(event);
+ });
+
it('should open the listbox when any letter key is pressed with wa-select is on focus', async () => {
const el = await fixture(html`
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 346177bef..64a9aeb0d 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -417,7 +417,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
}
// All other "printable" keys trigger type to select
- if (event.key.length === 1 || event.key === 'Backspace') {
+ if (event.key?.length === 1 || event.key === 'Backspace') {
const allOptions = this.getAllOptions();
// Don't block important key combos like CMD+R
diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts
index 6454dd753..2929c4388 100644
--- a/src/components/split-panel/split-panel.ts
+++ b/src/components/split-panel/split-panel.ts
@@ -107,7 +107,7 @@ export default class WaSplitPanel extends WebAwesomeElement {
}
private handleDrag(event: PointerEvent) {
- const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir === 'rtl';
+ const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl';
if (this.disabled) {
return;
@@ -248,7 +248,7 @@ export default class WaSplitPanel extends WebAwesomeElement {
render() {
const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';
const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows';
- const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir === 'rtl';
+ const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl';
const primary = `
clamp(
0%,
diff --git a/src/components/tab-group/tab-group.test.ts b/src/components/tab-group/tab-group.test.ts
index 59935db59..f88f07540 100644
--- a/src/components/tab-group/tab-group.test.ts
+++ b/src/components/tab-group/tab-group.test.ts
@@ -86,6 +86,13 @@ describe('', () => {
expect(tabGroup).to.be.visible;
});
+ it('should not throw error when unmounted too fast', async () => {
+ const el = await fixture(html` `);
+
+ el.innerHTML = '';
+ el.innerHTML = '';
+ });
+
it('is accessible', async () => {
const tabGroup = await fixture(html`
@@ -361,6 +368,31 @@ describe('', () => {
return expectCustomTabToBeActiveAfter(tabGroup, () => clickOnElement(customHeader!));
});
+ it('selects a tab by changing it via active property', async () => {
+ const tabGroup = await fixture(html`
+
+ General
+ Custom
+ This is the general tab panel.
+ This is the custom tab panel.
+
+ `);
+
+ const customHeader = queryByTestId(tabGroup, 'custom-header')!;
+ const generalHeader = await waitForHeaderToBeActive(tabGroup, 'general-header');
+ generalHeader.focus();
+
+ expect(customHeader).not.to.have.attribute('active');
+
+ const showEventPromise = oneEvent(tabGroup, 'wa-tab-show') as Promise;
+ customHeader.active = true;
+
+ await tabGroup.updateComplete;
+ expect(customHeader).to.have.attribute('active');
+ await expectPromiseToHaveName(showEventPromise, 'custom');
+ return expectOnlyOneTabPanelToBeActive(tabGroup, 'custom-tab-content');
+ });
+
it('does not change if the active tab is reselected', async () => {
const tabGroup = await fixture(html`
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index 7bbd9ace4..4b1af0a21 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -50,14 +50,13 @@ import type WaTabPanel from '../tab-panel/tab-panel.js';
export default class WaTabGroup extends WebAwesomeElement {
static styles: CSSResultGroup = [componentStyles, styles];
- private readonly localize = new LocalizeController(this);
-
private activeTab?: WaTab;
private mutationObserver: MutationObserver;
private resizeObserver: ResizeObserver;
private tabs: WaTab[] = [];
private focusableTabs: WaTab[] = [];
private panels: WaTabPanel[] = [];
+ private readonly localize = new LocalizeController(this);
@query('.tab-group') tabGroup: HTMLElement;
@query('.tab-group__body') body: HTMLSlotElement;
@@ -96,6 +95,16 @@ export default class WaTabGroup extends WebAwesomeElement {
// Sync tabs when disabled states change
if (mutations.some(m => m.attributeName === 'disabled')) {
this.syncTabsAndPanels();
+ // sync tabs when active state on tab changes
+ } else if (mutations.some(m => m.attributeName === 'active')) {
+ const tabs = mutations
+ .filter(m => m.attributeName === 'active' && (m.target as HTMLElement).tagName.toLowerCase() === 'wa-tab')
+ .map(m => m.target as WaTab);
+ const newActiveTab = tabs.find(tab => tab.active);
+
+ if (newActiveTab) {
+ this.setActiveTab(newActiveTab);
+ }
}
});
@@ -130,7 +139,10 @@ export default class WaTabGroup extends WebAwesomeElement {
disconnectedCallback() {
super.disconnectedCallback();
this.mutationObserver?.disconnect();
- this.resizeObserver?.unobserve(this.nav);
+
+ if (this.nav) {
+ this.resizeObserver?.unobserve(this.nav);
+ }
}
private getAllTabs() {
@@ -186,7 +198,7 @@ export default class WaTabGroup extends WebAwesomeElement {
// Move focus left or right
if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
const activeEl = this.tabs.find(t => t.matches(':focus'));
- const isRtl = this.matches(':dir(rtl)');
+ const isRtl = this.localize.dir() === 'rtl';
let nextTab: null | WaTab = null;
if (activeEl?.tagName.toLowerCase() === 'wa-tab') {
@@ -361,7 +373,7 @@ export default class WaTabGroup extends WebAwesomeElement {
}
render() {
- const isRtl = this.hasUpdated ? this.matches(':dir(rtl)') : this.dir === 'rtl';
+ const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl';
return html`
` has a max-height set on it. In my tests, this has worked fine. Im not aware of any edge cases. [Konnor]
+ this.sizeAdjuster.style.height = `${this.input.clientHeight}px`;
this.input.style.height = 'auto';
this.input.style.height = `${this.input.scrollHeight}px`;
} else {
@@ -377,6 +380,9 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
@focus=${this.handleFocus}
@blur=${this.handleBlur}
>
+
+
+