@redseed/redseed-ui-vue3 8.36.0 → 8.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.36.0",
+    "version": "8.37.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/FormField/FormFieldSearchAsync.vue

@@ -22,6 +22,15 @@ const props = defineProps({
         type: Number,
         default: 2,
     },
+    dropdownWidth: {
+        // Fixes the suggestions dropdown to an exact width, decoupling it from
+        // the input's width. Useful when the input must be narrow for layout
+        // reasons but the results list needs more room (e.g. "Name | Location"
+        // rows). Accepts a number (treated as px) or any CSS length string.
+        // Unset = the dropdown follows the input width, as before.
+        type: [String, Number],
+        default: null,
+    },
 })
 
 const emit = defineEmits(['input', 'query-change', 'navigate', 'keyup-enter'])
@@ -32,6 +41,7 @@ const { inputId, ariaDescribedby, ariaInvalid } = useFormFieldA11y()
 const query = ref('')
 const isOpen = ref(false)
 const inputElement = ref(null)
+const fieldElement = ref(null)
 const rootElement = ref(null)
 const dropdownElement = ref(null)
 const highlightedIndex = ref(-1)
@@ -218,28 +228,33 @@ onClickOutside(rootElement, () => {
     if (isOpen.value) close()
 })
 
-const inputElementBounding = useElementBounding(inputElement)
+// Measure the whole field box (icon prefix + input), not the inner <input> —
+// the input sits to the right of the prefix and is narrower, so anchoring to
+// it would leave the dropdown shifted right and narrower than the field.
+const fieldElementBounding = useElementBounding(fieldElement)
 
 function calculateDropdownPosition() {
     if (!dropdownElement.value) return
 
     const viewportHeight = window.innerHeight
     const dropdownHeight = dropdownElement.value.offsetHeight
-    const spaceAbove = inputElementBounding.top.value
-    const spaceBelow = viewportHeight - inputElementBounding.bottom.value
+    const spaceAbove = fieldElementBounding.top.value
+    const spaceBelow = viewportHeight - fieldElementBounding.bottom.value
 
-    dropdownElement.value.style.width = `${inputElementBounding.width.value}px`
-    dropdownElement.value.style.left = `${inputElementBounding.left.value}px`
+    dropdownElement.value.style.width = props.dropdownWidth != null
+        ? (typeof props.dropdownWidth === 'number' ? `${props.dropdownWidth}px` : props.dropdownWidth)
+        : `${fieldElementBounding.width.value}px`
+    dropdownElement.value.style.left = `${fieldElementBounding.left.value}px`
 
     if (spaceAbove <= dropdownHeight && spaceBelow <= dropdownHeight) {
         dropdownElement.value.style.top = '0'
         dropdownElement.value.style.bottom = 'auto'
     } else if (spaceBelow > dropdownHeight) {
-        dropdownElement.value.style.top = `${inputElementBounding.bottom.value + window.scrollY}px`
+        dropdownElement.value.style.top = `${fieldElementBounding.bottom.value + window.scrollY}px`
         dropdownElement.value.style.bottom = 'auto'
     } else if (spaceAbove > dropdownHeight) {
         dropdownElement.value.style.top = 'auto'
-        dropdownElement.value.style.bottom = `${spaceBelow + inputElementBounding.height.value + 8 - window.scrollY}px`
+        dropdownElement.value.style.bottom = `${spaceBelow + fieldElementBounding.height.value + 8 - window.scrollY}px`
     }
 }
 
@@ -274,7 +289,7 @@ defineExpose({
         <slot name="label"></slot>
     </template>
 
-    <div class="rsui-form-field-text__group">
+    <div ref="fieldElement" class="rsui-form-field-text__group">
         <div
             class="rsui-form-field-text__prefix"
             aria-hidden="true"