Only focus search when not in fullscreen dialog (#19153)

This commit is contained in:
Bram Kragten 2023-12-27 13:45:49 +01:00 committed by GitHub
parent 71025eaf4d
commit 6911685bd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 20 deletions

View File

@ -3,9 +3,10 @@ import { mdiClose, mdiContentPaste, mdiPlus } from "@mdi/js";
import Fuse, { IFuseOptions } from "fuse.js";
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
import { domainIcon } from "../../../common/entity/domain_icon";
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
@ -13,7 +14,7 @@ import { stringCompare } from "../../../common/string/compare";
import { LocalizeFunc } from "../../../common/translations/localize";
import "../../../components/ha-dialog";
import type { HaDialog } from "../../../components/ha-dialog";
import "../../../components/ha-header-bar";
import "../../../components/ha-dialog-header";
import "../../../components/ha-icon-button";
import "../../../components/ha-icon-button-prev";
import "../../../components/ha-icon-next";
@ -94,6 +95,8 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
@query("ha-dialog") private _dialog?: HaDialog;
private _fullScreen = false;
private _width?: number;
private _height?: number;
@ -105,6 +108,9 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
this.hass.loadBackendTranslation("services");
this._fetchManifests();
}
this._fullScreen = matchMedia(
"all and (max-width: 450px), all and (max-height: 500px)"
).matches;
}
public closeDialog(): void {
@ -406,7 +412,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
.heading=${true}
>
<div slot="heading">
<ha-header-bar>
<ha-dialog-header>
<span slot="title"
>${this._group
? groupName
@ -424,10 +430,9 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
slot="navigationIcon"
dialogAction="cancel"
></ha-icon-button>`}
</ha-header-bar>
</ha-dialog-header>
<search-input
autofocus
dialogInitialFocus
dialogInitialFocus=${ifDefined(this._fullScreen ? undefined : "")}
.hass=${this.hass}
.filter=${this._filter}
@value-changed=${this._filterChanged}
@ -442,6 +447,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
></search-input>
</div>
<mwc-list
dialogInitialFocus=${ifDefined(this._fullScreen ? "" : undefined)}
innerRole="listbox"
itemRoles="option"
rootTabbable
@ -554,12 +560,6 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
--mdc-dialog-min-width: 500px;
}
}
ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface);
margin-top: 8px;
display: block;
}
ha-icon-next {
width: 24px;
}

View File

@ -3,21 +3,22 @@ import "@material/mwc-list/mwc-list";
import Fuse, { IFuseOptions } from "fuse.js";
import { HassConfig } from "home-assistant-js-websocket";
import {
css,
html,
LitElement,
PropertyValues,
TemplateResult,
css,
html,
nothing,
} from "lit";
import { customElement, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { fireEvent } from "../../../common/dom/fire_event";
import {
protocolIntegrationPicked,
PROTOCOL_INTEGRATIONS,
protocolIntegrationPicked,
} from "../../../common/integrations/protocolIntegrationPicked";
import { navigate } from "../../../common/navigate";
import { caseInsensitiveStringCompare } from "../../../common/string/compare";
@ -34,10 +35,10 @@ import {
import {
Brand,
Brands,
findIntegration,
getIntegrationDescriptions,
Integration,
Integrations,
findIntegration,
getIntegrationDescriptions,
} from "../../../data/integrations";
import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
import {
@ -424,8 +425,7 @@ class AddIntegrationDialog extends LitElement {
private _renderAll(integrations?: IntegrationListItem[]): TemplateResult {
return html`<search-input
.hass=${this.hass}
autofocus
dialogInitialFocus
dialogInitialFocus=${ifDefined(this._narrow ? undefined : "")}
.filter=${this._filter}
@value-changed=${this._filterChanged}
.label=${this.hass.localize(
@ -434,7 +434,9 @@ class AddIntegrationDialog extends LitElement {
@keypress=${this._maybeSubmit}
></search-input>
${integrations
? html`<mwc-list>
? html`<mwc-list
dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
>
<lit-virtualizer
scroller
class="ha-scrollbar"