Fix focus helper for non-native inputs

Fixes #6347
getkirby · Jul 22, 2024 · c89b052 · c89b052
1 parent 744a004
commit c89b052
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"
 	];