Scroll picker lists with 12 or fewer items to the selected item when they open (#55128)

src/components/ha-picker-combo-box.ts

@@ -245,6 +245,10 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
 
   protected firstUpdated() {
     this._registerKeyboardShortcuts();
+    // The virtualized list pins the selected row itself.
+    if (this._plainList) {
+      this._scrollToSelectedRow();
+    }
   }
 
   public willUpdate() {
@@ -265,6 +269,28 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     }
   }
 
+  // Scroll before the surface animates in, so the list does not jump at the
+  // end of the animation. Wait a frame for the surface to be positioned.
+  private async _scrollToSelectedRow() {
+    await this._list?.updateComplete;
+    await new Promise(requestAnimationFrame);
+    if (!this._list || !this.value || this._search) {
+      return;
+    }
+    const row = this._list.items[this._getInitialSelectedIndex()];
+    const listRect = this._list.getBoundingClientRect();
+    if (!row || !listRect.height) {
+      return;
+    }
+    // The surface scales in, so convert the measured offset to unscaled pixels.
+    const scale = this._list.offsetHeight / listRect.height;
+    const rowRect = row.getBoundingClientRect();
+    // Center the row, like the virtualized list does.
+    this._list.scrollTop +=
+      (rowRect.top - listRect.top) * scale -
+      (this._list.clientHeight - row.offsetHeight) / 2;
+  }
+
   // The list resets its active row when it takes new rows, so wait for that
   // first. Skip if the search was cleared or a key already moved the cursor.
   private async _highlightTopMatch() {

src/panels/lovelace/components/hui-section-edit-mode.ts

@@ -119,22 +119,13 @@ export class HuiSectionEditMode extends LitElement {
             ${
               this._clipboard
                 ? html`
-                    <ha-dropdown-item value="paste-above">
+                    <ha-dropdown-item value="paste">
                       <ha-svg-icon
                         slot="icon"
                         .path=${mdiContentPaste}
                       ></ha-svg-icon>
                       ${this.hass.localize(
-                        "ui.panel.lovelace.editor.section.paste_above"
-                      )}
-                    </ha-dropdown-item>
-                    <ha-dropdown-item value="paste-below">
-                      <ha-svg-icon
-                        slot="icon"
-                        .path=${mdiContentPaste}
-                      ></ha-svg-icon>
-                      ${this.hass.localize(
-                        "ui.panel.lovelace.editor.section.paste_below"
+                        "ui.panel.lovelace.editor.section.paste"
                       )}
                     </ha-dropdown-item>
                   `
@@ -188,11 +179,8 @@ export class HuiSectionEditMode extends LitElement {
       case "cut":
         this._cutSection();
         break;
-      case "paste-above":
-        this._pasteSection(0);
-        break;
-      case "paste-below":
-        this._pasteSection(1);
+      case "paste":
+        this._pasteSection();
         break;
       case "delete":
         this._deleteSection();
@@ -264,14 +252,14 @@ export class HuiSectionEditMode extends LitElement {
     });
   }
 
-  private async _pasteSection(offset: 0 | 1): Promise<void> {
+  private async _pasteSection(): Promise<void> {
     if (!this._clipboard) return;
     const index = this.path[this.path.length - 1] as number;
     try {
       await this.lovelace!.saveConfig(
         insertAtPath(
           this.lovelace!.config,
-          [...getParentPath(this.path), index + offset],
+          [...getParentPath(this.path), index + 1],
           deepClone(this._clipboard)
         )
       );

src/translations/en.json

@@ -10305,8 +10305,7 @@
             "automatic": "Automatic section",
             "edit_automatic": "Edit automatic section",
             "cut": "[%key:ui::panel::lovelace::editor::edit_card::cut%]",
-            "paste_above": "Paste above",
-            "paste_below": "Paste below",
+            "paste": "Paste",
             "copied_to_clipboard": "Section copied to clipboard",
             "cut_to_clipboard": "Section cut to clipboard",
             "cut_error": "Error while cutting section",