material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 01:20:23 +03:00
Code Issues Projects Releases Wiki Activity

fix(iconbutton): allow prevent default click for toggles

Browse Source 
Fixes #4857

PiperOrigin-RevId: 563220193
This commit is contained in:
Elizabeth Mitchell 2023-09-06 14:41:13 -07:00 committed by Copybara-Service
parent df508ef5fd
commit ed539c6853
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
iconbutton/icon-button_test.ts
View File

@ -150,7 +150,7 @@ describe('icon button tests', () => {
});
it('button with toggled aria label toggles aria label', async () => {
const {element} = await setUpTest('toggle');
const {element, harness} = await setUpTest('toggle');
element.ariaLabelSelected = 'aria label on';
element.ariaLabel = 'aria label off';
await element.updateComplete;
@ -160,7 +160,7 @@ describe('icon button tests', () => {
expect(button.getAttribute('aria-label')).toEqual('aria label off');
// Toggle
button.click();
await harness.clickWithMouse();
await element.updateComplete;
expect(element.selected).toBeTrue();
expect(button.getAttribute('aria-label')).toEqual('aria label on');
@ -193,6 +193,20 @@ describe('icon button tests', () => {
expect((element as unknown as IconButtonInternals).flipIcon)
.toBeFalse();
});
it('should allow preventing toggle click event', async () => {
const {element, harness} = await setUpTest('toggle');
element.addEventListener('click', event => {
event.preventDefault();
});
expect(element.selected).withContext('selected before click').toBeFalse();
await harness.clickWithMouse();
expect(element.selected)
.withContext('selected after prevent default click')
.toBeFalse();
});
});
async function setUpTest(type: string) {

6
iconbutton/internal/icon-button.ts
View File

@ -193,8 +193,10 @@ export class IconButton extends LitElement implements FormSubmitter {
super.connectedCallback();
}
private handleClick() {
if (!this.toggle || this.disabled) {
private async handleClick(event: Event) {
// Allow the event to propagate
await 0;
if (!this.toggle || this.disabled || event.defaultPrevented) {
return;
}