mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 01:20:23 +03:00
fix(iconbutton): allow prevent default click for toggles
Fixes #4857 PiperOrigin-RevId: 563220193
This commit is contained in:
parent
df508ef5fd
commit
ed539c6853
@ -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) {
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user