From c89b05248906aec3c77fcdd01a0ce68a6416d3f2 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Mon, 22 Jul 2024 15:28:11 +0200
Subject: [PATCH] Fix `focus` helper for non-native inputs

Fixes #6347
---
 panel/src/components/Forms/Field/BlocksField.vue |  1 +
 panel/src/components/Forms/Field/LayoutField.vue |  1 +
 panel/src/components/Forms/Input/TagsInput.vue   |  2 +-
 panel/src/helpers/focus.js                       | 11 +++++------
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/panel/src/components/Forms/Field/BlocksField.vue b/panel/src/components/Forms/Field/BlocksField.vue
index f06e707900..cfbbfa6aba 100644
--- a/panel/src/components/Forms/Field/BlocksField.vue
+++ b/panel/src/components/Forms/Field/BlocksField.vue
@@ -10,6 +10,7 @@
 					icon="add"
 					variant="filled"
 					size="xs"
+					class="input-focus"
 					@click="$refs.blocks.choose(value.length)"
 				/>
 				<k-button
diff --git a/panel/src/components/Forms/Field/LayoutField.vue b/panel/src/components/Forms/Field/LayoutField.vue
index 060736ae3a..d2c1cafeaf 100644
--- a/panel/src/components/Forms/Field/LayoutField.vue
+++ b/panel/src/components/Forms/Field/LayoutField.vue
@@ -8,6 +8,7 @@
 					icon="add"
 					variant="filled"
 					size="xs"
+					class="input-focus"
 					@click="$refs.layouts.select(0)"
 				/>
 				<k-button
diff --git a/panel/src/components/Forms/Input/TagsInput.vue b/panel/src/components/Forms/Input/TagsInput.vue
index 375b7fb2cc..e2cf667786 100644
--- a/panel/src/components/Forms/Input/TagsInput.vue
+++ b/panel/src/components/Forms/Input/TagsInput.vue
@@ -13,7 +13,7 @@
 				ref="toggle"
 				:autofocus="autofocus"
 				:disabled="disabled"
-				class="k-tags-input-toggle k-tags-navigatable"
+				class="k-tags-input-toggle k-tags-navigatable input-focus"
 				size="xs"
 				icon="add"
 				@click="$refs.create.open()"
diff --git a/panel/src/helpers/focus.js b/panel/src/helpers/focus.js
index 4b79c8eedd..a433dad039 100644
--- a/panel/src/helpers/focus.js
+++ b/panel/src/helpers/focus.js
@@ -26,12 +26,11 @@ export default function focus(element, field) {
 	}
 
 	const selectors = [
-		"[autofocus]",
-		"[data-autofocus]",
-		"input",
-		"textarea",
-		"select",
-		"[contenteditable=true]",
+		// prioritize elements that have set autofocus explicitly
+		":where([autofocus], [data-autofocus])",
+		// treat all types of inputs equally as second-best
+		":where(input, textarea, select, [contenteditable=true], .input-focus)",
+		// prefer submit button over other buttons
 		"[type=submit]",
 		"button"
 	];