mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 01:36:49 +00:00
Fix button group in Safari (#9804)
* FIx button group in Safari * Update src/components/ha-button-toggle-group.ts Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
This commit is contained in:
parent
e0d23ee6cf
commit
dbe209e3f2
@ -1,7 +1,8 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import type { Button } from "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { customElement, property, queryAll } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import type { ToggleButton } from "../types";
|
||||
@ -17,6 +18,8 @@ export class HaButtonToggleGroup extends LitElement {
|
||||
|
||||
@property({ type: Boolean }) public dense = false;
|
||||
|
||||
@queryAll("mwc-button") private _buttons?: Button[];
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<div>
|
||||
@ -48,6 +51,16 @@ export class HaButtonToggleGroup extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
protected updated() {
|
||||
// Work around Safari default margin that is not reset in mwc-button as of aug 2021
|
||||
this._buttons?.forEach(async (button) => {
|
||||
await button.updateComplete;
|
||||
(
|
||||
button.shadowRoot!.querySelector("button") as HTMLButtonElement
|
||||
).style.margin = "0";
|
||||
});
|
||||
}
|
||||
|
||||
private _handleClick(ev): void {
|
||||
this.active = ev.currentTarget.value;
|
||||
fireEvent(this, "value-changed", { value: this.active });
|
||||
|
Loading…
x
Reference in New Issue
Block a user