Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion core/src/components/action-sheet/action-sheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -564,7 +564,11 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
id={buttonId}
class={{
...buttonClass(b),
'action-sheet-selected': isActiveRadio,
// Only override `action-sheet-selected` when this button participates
// in the radio group. For non-radio buttons we let `buttonClass(b)`
// own the class so the public `role: 'selected'` API keeps working
// (regression from #30769 / issue #31090).
...(isRadio && { 'action-sheet-selected': isActiveRadio }),
}}
onClick={() => {
if (isRadio) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,38 @@ describe('action sheet: disabled buttons', () => {
await expect(cancelButton.hasAttribute('disabled')).toBe(false);
});
});

describe('action sheet: role="selected"', () => {
// Regression test for https://github.com/ionic-team/ionic-framework/issues/31090
// Buttons with `role: "selected"` must render the `action-sheet-selected`
// class so that userland CSS targeting the active option keeps working.
it('should add the action-sheet-selected class to a button with role="selected"', async () => {
const page = await newSpecPage({
components: [ActionSheet],
template: () => (
<ion-action-sheet
buttons={[
{ text: 'Option A' },
{ text: 'Option B', role: 'selected' },
{ text: 'Option C' },
{ text: 'Cancel', role: 'cancel' },
]}
overlayIndex={1}
></ion-action-sheet>
),
});

const actionSheet = page.body.querySelector('ion-action-sheet')!;

await actionSheet.present();

const buttons = Array.from(actionSheet.querySelectorAll<HTMLButtonElement>('.action-sheet-button'));
const selectedButton = buttons.find((btn) => btn.textContent?.trim() === 'Option B');

await expect(selectedButton).toBeDefined();
await expect(selectedButton!.classList.contains('action-sheet-selected')).toBe(true);

const optionA = buttons.find((btn) => btn.textContent?.trim() === 'Option A');
await expect(optionA!.classList.contains('action-sheet-selected')).toBe(false);
});
});