@redseed/redseed-ui-vue3 8.21.0 → 8.21.2

package/package.json

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

package/src/components/FormField/FormFieldSelect.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted, useAttrs } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted, useAttrs } from 'vue'
 import { onClickOutside, useElementBounding } from '@vueuse/core'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { ChevronDownIcon, CheckIcon } from '@heroicons/vue/24/outline'
@@ -55,6 +55,34 @@ function nativeChoose(event) {
     emit('change', event.target.value)
 }
 
+/**
+ * Track native constraint-validation state for the desktop trigger.
+ *
+ * On desktop the native <select> is sr-only, so when the browser fires its
+ * `invalid` event (e.g. a required field left empty on form submit) the
+ * tooltip and focus would target the off-screen element. We intercept that
+ * event, prevent the default browser behaviour, and instead focus the
+ * visible <button> trigger while applying :invalid-equivalent styling
+ * through this reactive flag and displaying the validation message text.
+ */
+const isNativeInvalid = ref(false)
+const nativeValidationMessage = ref('')
+
+function handleInvalid(event) {
+    if (isMobileDevice.value) return
+
+    event.preventDefault()
+    isNativeInvalid.value = true
+    nativeValidationMessage.value = event.target.validationMessage || 'Please select an option.'
+    triggerElement.value?.focus()
+}
+
+// Clear the invalid state as soon as the user selects a value
+watch(model, () => {
+    isNativeInvalid.value = false
+    nativeValidationMessage.value = ''
+})
+
 function handleKeydown(event) {
     if (!isOpen.value && (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ')) {
         if (event.repeat) return
@@ -134,9 +162,29 @@ function calculateDropdownPosition() {
      */
     const spaceBelow = viewportHeight - anchorBounding.bottom.value
 
-    dropdownElement.value.style.width = `${anchorBounding.width.value}px`
+    dropdownElement.value.style.minWidth = `${anchorBounding.width.value}px`
 
+    /**
+     * Clamp the dropdown to the viewport horizontally.
+     * First cap maxWidth to the full viewport minus margins, then shift
+     * left if the dropdown's natural width would overflow the right edge.
+     * This keeps the popover fully visible for triggers near the right
+     * edge (e.g. fixed-width filter selects in ListControl).
+     */
+    const viewportWidth = window.innerWidth
+    const safeMargin = 16
+    dropdownElement.value.style.maxWidth = `${viewportWidth - safeMargin * 2}px`
+
+    // Temporarily position at trigger left so we can measure actual width
     dropdownElement.value.style.left = `${anchorBounding.left.value}px`
+    const dropdownWidth = dropdownElement.value.offsetWidth
+    const rightOverflow = (anchorBounding.left.value + dropdownWidth + safeMargin) - viewportWidth
+
+    // Shift left if the dropdown overflows the right edge
+    if (rightOverflow > 0) {
+        const clampedLeft = Math.max(safeMargin, anchorBounding.left.value - rightOverflow)
+        dropdownElement.value.style.left = `${clampedLeft}px`
+    }
 
     if (spaceAbove <= dropdownElementHeight
         && spaceBelow <= dropdownElementHeight) {
@@ -170,6 +218,10 @@ onUnmounted(() => {
 
 defineExpose({
     focus() {
+        if (!isMobileDevice.value && triggerElement.value) {
+            triggerElement.value.focus()
+            return
+        }
         if (selectElement.value) selectElement.value.focus()
     },
 })
@@ -196,14 +248,18 @@ defineExpose({
             ref="triggerElement"
             v-if="!isMobileDevice"
             type="button"
-            class="rsui-form-field-select__trigger peer"
+            :class="[
+                'rsui-form-field-select__trigger',
+                'peer',
+                { 'rsui-form-field-select__trigger--invalid': isNativeInvalid }
+            ]"
             role="combobox"
             :aria-activedescendant="highlightedIndex >= 0 ? `${effectiveId}-option-${highlightedIndex}` : undefined"
             :aria-controls="`${effectiveId}-listbox`"
             :aria-describedby="ariaDescribedby"
             :aria-expanded="isOpen"
             :aria-haspopup="'listbox'"
-            :aria-invalid="ariaInvalid"
+            :aria-invalid="ariaInvalid || isNativeInvalid || undefined"
             :aria-required="$attrs.required || undefined"
             :disabled="$attrs.disabled"
             :id="effectiveId"
@@ -214,7 +270,7 @@ defineExpose({
         </button>
 
         <select ref="selectElement"
-            :class="['peer', { 'sr-only': !isMobileDevice }]"
+            class="peer"
             v-model="model"
             :aria-describedby="isMobileDevice ? ariaDescribedby : undefined"
             :aria-invalid="isMobileDevice ? ariaInvalid : undefined"
@@ -228,6 +284,7 @@ defineExpose({
             :name="$attrs.name"
             :required="$attrs.required"
             @change.prevent="nativeChoose"
+            @invalid="handleInvalid"
         >
             <option value="" disabled>
                 <slot name="default-option">
@@ -309,8 +366,10 @@ defineExpose({
         <slot name="help"></slot>
     </template>
 
-    <template #error v-if="$slots.error">
-        <slot name="error"></slot>
+    <template #error v-if="$slots.error || nativeValidationMessage">
+        <slot name="error">
+            {{ nativeValidationMessage }}
+        </slot>
     </template>
 </FormFieldSlot>
 </template>