Tweaked merge and alert search result tooltips.

components/actors/merge.vue

@@ -148,6 +148,7 @@ onMounted(() => {
 					:triggers="[]"
 					:shown="actorResults.length > 0"
 					:auto-hide="false"
+					placement="auto"
 				>
 					<input
 						ref="actorInput"

components/alerts/create.vue

@@ -37,17 +37,14 @@ const {
 
 const actors = ref(props.presetActors);
 const actorResults = ref([]);
-const actorInput = ref(null);
 const actorQuery = ref('');
 
 const entities = ref(props.presetEntities);
 const entityResults = ref([]);
-const entityInput = ref(null);
 const entityQuery = ref('');
 
 const tags = ref(props.presetTags);
 const tagResults = ref([]);
-const tagInput = ref(null);
 const tagQuery = ref('');
 
 const scenes = ref(props.presetScenes);
@@ -61,6 +58,8 @@ const actorAnd = ref(true);
 const tagAnd = ref(true);
 const matchAnd = ref(true);
 
+const inputs = {};
+
 const fieldsLogicTooltipId = useId();
 const addActorDropdownId = useId();
 const addTagDropdownId = useId();
@@ -132,9 +131,9 @@ async function searchTags() {
 	tagResults.value = res;
 }
 
-function focusActorInput() {
+function focusInput(target) {
 	setTimeout(() => {
-		actorInput.value.focus();
+		inputs[target]?.focus();
 	}, 100);
 }
 
@@ -263,7 +262,8 @@ function rememberThen(domain, checked) {
 						<li class="field-add">
 							<VDropdown
 								:aria-id="addActorDropdownId"
-								@show="focusActorInput"
+								placement="auto"
+								@show="focusInput('actor')"
 							>
 								<button
 									class="button"
@@ -272,7 +272,7 @@ function rememberThen(domain, checked) {
 
 								<template #popper>
 									<input
-										ref="actorInput"
+										:ref="(el) => inputs.actor = el"
 										v-model="actorQuery"
 										class="input"
 										@input="searchActors"
@@ -339,7 +339,11 @@ function rememberThen(domain, checked) {
 						</li>
 
 						<li class="field-add">
-							<VDropdown :aria-id="addTagDropdownId">
+							<VDropdown
+								placement="auto"
+								:aria-id="addTagDropdownId"
+								@show="focusInput('tag')"
+							>
 								<button
 									type="button"
 									class="button"
@@ -347,7 +351,7 @@ function rememberThen(domain, checked) {
 
 								<template #popper>
 									<input
-										ref="tagInput"
+										:ref="(el) => inputs.tag = el"
 										v-model="tagQuery"
 										class="input"
 										@input="searchTags"
@@ -403,7 +407,11 @@ function rememberThen(domain, checked) {
 						</li>
 
 						<li class="field-add">
-							<VDropdown :aria-id="addEntityDropdownId">
+							<VDropdown
+								placement="auto"
+								:aria-id="addEntityDropdownId"
+								@show="focusInput('entity')"
+							>
 								<button
 									type="button"
 									class="button"
@@ -411,7 +419,7 @@ function rememberThen(domain, checked) {
 
 								<template #popper>
 									<input
-										ref="entityInput"
+										:ref="(el) => inputs.entity = el"
 										v-model="entityQuery"
 										class="input"
 										@input="searchEntities"
@@ -465,7 +473,10 @@ function rememberThen(domain, checked) {
 						</li>
 
 						<li class="field-add">
-							<VDropdown :aria-id="addMatchDropdownId">
+							<VDropdown
+								:aria-id="addMatchDropdownId"
+								@show="focusInput('expression')"
+							>
 								<button
 									type="button"
 									class="button"
@@ -482,6 +493,7 @@ function rememberThen(domain, checked) {
 										</select>
 
 										<input
+											:ref="(el) => inputs.expression = el"
 											v-model="matchExpression"
 											placeholder="Expression, // for regex"
 											class="input"