jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-29 12:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Store width before searching to avoid jumping

Browse Source
This commit is contained in:
Paulus Schoutsen 2019-07-16 21:34:12 -07:00
parent 567769be5a
commit eaaeb10c6d
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/dialogs/config-flow/step-flow-pick-handler.ts
View File

@ -18,6 +18,7 @@ import * as Fuse from "fuse.js";
import "../../components/ha-icon-next"; import "../../components/ha-icon-next";
import "../../common/search/search-input"; import "../../common/search/search-input";
import { styleMap } from "lit-html/directives/style-map";
interface HandlerObj { interface HandlerObj {
name: string; name: string;
@ -29,6 +30,7 @@ class StepFlowPickHandler extends LitElement {
@property() public hass!: HomeAssistant; @property() public hass!: HomeAssistant;
@property() public handlers!: string[]; @property() public handlers!: string[];
@property() private filter?: string; @property() private filter?: string;
private _width?: Number;
private _getHandlers = memoizeOne((h: string[], filter?: string) => { private _getHandlers = memoizeOne((h: string[], filter?: string) => {
const handlers: HandlerObj[] = h.map((handler) => { const handlers: HandlerObj[] = h.map((handler) => {
@ -58,11 +60,11 @@ class StepFlowPickHandler extends LitElement {
return html` return html`
<h2>${this.hass.localize("ui.panel.config.integrations.new")}</h2> <h2>${this.hass.localize("ui.panel.config.integrations.new")}</h2>
<div> <search-input
<search-input .filter=${this.filter}
.filter=${this.filter} @value-changed=${this._filterChanged}
@value-changed=${this._filterChanged} ></search-input>
></search-input> <div style=${styleMap({ width: `${this._width}px` })}>
${handlers.map( ${handlers.map(
(handler: HandlerObj) => (handler: HandlerObj) =>
html` html`
@ -80,6 +82,11 @@ class StepFlowPickHandler extends LitElement {
private async _filterChanged(e) { private async _filterChanged(e) {
this.filter = e.detail.value; this.filter = e.detail.value;
// Store the width so that when we search, box doesn't jump
if (this._width === undefined) {
this._width = this.shadowRoot!.querySelector("div")!.clientWidth;
}
} }
private async _handlerPicked(ev) { private async _handlerPicked(ev) {