DEV/material-components_material-web
1
0
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2026-01-09 07:21:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(iconbutton): override and delegate click

Browse Source
This commit is contained in:
Valentin Degenne 2025-08-28 15:17:11 +02:00
parent 9f85b3e0c0
commit 45150faca8
1 changed files with 9 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,8 +7,8 @@
import '../../focus/md-focus-ring.js';
import '../../ripple/ripple.js';
import {html, isServer, LitElement, nothing} from 'lit';
import {property, state} from 'lit/decorators.js';
import {html, LitElement, nothing} from 'lit';
import {property, query, state} from 'lit/decorators.js';
import {classMap} from 'lit/directives/class-map.js';
import {literal, html as staticHtml} from 'lit/static-html.js';
@ -144,10 +144,11 @@ export class IconButton extends iconButtonBaseClass implements FormSubmitter {
@state() private flipIcon = isRtl(this, this.flipIconInRtl);
constructor() {
super();
if (!isServer) {
this.addEventListener('click', this.handleClick.bind(this));
@query('.button') private readonly buttonElement!: HTMLElement | null;
override click() {
if (!this.disabled && this.buttonElement) {
this.buttonElement?.click();
}
}
@ -195,7 +196,7 @@ export class IconButton extends iconButtonBaseClass implements FormSubmitter {
const {ariaLabel} = this as ARIAMixinStrict;
return html`
<a
class="link"
class="link button"
id="link"
href="${this.href}"
download="${this.download || nothing}"
@ -210,6 +211,7 @@ export class IconButton extends iconButtonBaseClass implements FormSubmitter {
return {
'flip-icon': this.flipIcon,
'selected': this.toggle && this.selected,
'button': !this.href
};
}
@ -248,18 +250,6 @@ export class IconButton extends iconButtonBaseClass implements FormSubmitter {
super.connectedCallback();
}
/** Handles a click on this element. */
private handleClick(event: MouseEvent) {
// If the icon button is soft-disabled, we need to explicitly prevent the
// click from propagating to other event listeners as well as prevent the
// default action.
if (!this.href && this.softDisabled) {
event.stopImmediatePropagation();
event.preventDefault();
return;
}
}
/**
* Handles a click on the child <div> or <button> element within this
* element's shadow DOM.