Allow pressing enter to pick item at the top of the list (#11139)

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -51,7 +51,7 @@ class StepFlowPickHandler extends LitElement {
 
   private _height?: number;
 
-  private _getHandlers = memoizeOne(
+  private _filterHandlers = memoizeOne(
     (h: string[], filter?: string, _localize?: LocalizeFunc) => {
       const handlers: HandlerObj[] = h.map((handler) => ({
         name: domainToName(this.hass.localize, handler),
@@ -75,11 +75,7 @@ class StepFlowPickHandler extends LitElement {
   );
 
   protected render(): TemplateResult {
-    const handlers = this._getHandlers(
-      this.handlers,
-      this._filter,
-      this.hass.localize
-    );
+    const handlers = this._getHandlers();
 
     return html`
       <h2>${this.hass.localize("ui.panel.config.integrations.new")}</h2>
@@ -89,6 +85,7 @@ class StepFlowPickHandler extends LitElement {
         .filter=${this._filter}
         @value-changed=${this._filterChanged}
         .label=${this.hass.localize("ui.panel.config.integrations.search")}
+        @keypress=${this._maybeSubmit}
       ></search-input>
       <div
         style=${styleMap({
@@ -180,6 +177,14 @@ class StepFlowPickHandler extends LitElement {
     }
   }
 
+  private _getHandlers() {
+    return this._filterHandlers(
+      this.handlers,
+      this._filter,
+      this.hass.localize
+    );
+  }
+
   private async _filterChanged(e) {
     this._filter = e.detail.value;
   }
@@ -190,6 +195,20 @@ class StepFlowPickHandler extends LitElement {
     });
   }
 
+  private _maybeSubmit(ev: KeyboardEvent) {
+    if (ev.key !== "Enter") {
+      return;
+    }
+
+    const handlers = this._getHandlers();
+
+    if (handlers.length > 0) {
+      fireEvent(this, "handler-picked", {
+        handler: handlers[0].slug,
+      });
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,