fix(DateField): rebuild focusable element Set on locale change (#1132)

* fix(DateField): rebuild focusable elements set on locale change

* chore(DateField): lint fix

* refactor: extract element query to utils

packages/radix-vue/src/DateField/DateFieldRoot.vue

@@ -12,7 +12,7 @@ import {
   getDefaultDate,
 } from '@/shared/date'
 import { type Matcher, hasTime, isBefore } from '@/date'
-import { createContent, initializeSegmentValues, isSegmentNavigationKey, syncSegmentValues } from './utils'
+import { createContent, getSegmentElements, initializeSegmentValues, isSegmentNavigationKey, syncSegmentValues } from './utils'
 import type { Direction } from '@/shared/types'
 
 type DateFieldRootContext = {
@@ -81,7 +81,7 @@ export const [injectDateFieldRootContext, provideDateFieldRootContext]
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, toRefs, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, toRefs, watch } from 'vue'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
 
@@ -118,7 +118,7 @@ const { primitiveElement, currentElement: parentElement }
 const segmentElements = ref<Set<HTMLElement>>(new Set())
 
 onMounted(() => {
-  Array.from(parentElement.value.querySelectorAll('[data-radix-vue-date-field-segment]')).filter(item => item.getAttribute('data-radix-vue-date-field-segment') !== 'literal').forEach(el => segmentElements.value.add(el as HTMLElement))
+  getSegmentElements(parentElement.value).forEach(item => segmentElements.value.add(item as HTMLElement))
 })
 
 const modelValue = useVModel(props, 'modelValue', emits, {
@@ -179,8 +179,15 @@ const segmentContents = computed(() => allSegmentContent.value.arr)
 const editableSegmentContents = computed(() => segmentContents.value.filter(({ part }) => part !== 'literal'))
 
 watch(locale, (value) => {
-  if (formatter.getLocale() !== value)
+  if (formatter.getLocale() !== value) {
     formatter.setLocale(value)
+    // Locale changed, so we need to clear the segment elements and re-get them (different order)
+    // Get the focusable elements again on the next tick
+    nextTick(() => {
+      segmentElements.value.clear()
+      getSegmentElements(parentElement.value).forEach(item => segmentElements.value.add(item as HTMLElement))
+    })
+  }
 })
 
 watch(modelValue, (_modelValue) => {
@@ -273,6 +280,7 @@ defineExpose({
     :dir="dir"
     @keydown.left.right="handleKeydown"
   >
+    {{ currentSegmentIndex }}
     <slot
       :model-value="modelValue"
       :segments="segmentContents"

packages/radix-vue/src/DateField/story/DateFieldDefault.story.vue

@@ -10,7 +10,9 @@ import { Label } from '@/Label'
         <Label
           class="text-sm text-gray9"
           for="date-field"
-        >Appointment (unavailable on 19th)</Label>
+        >
+          Appointment (unavailable on 19th)
+        </Label>
         <DateFieldRoot
           id="date-field"
           v-slot="{ segments, isInvalid }"
@@ -40,7 +42,9 @@ import { Label } from '@/Label'
           <span
             v-if="isInvalid"
             class="text-red-500"
-          >Invalidddd</span>
+          >
+            Invalid
+          </span>
         </DateFieldRoot>
       </div>
     </Variant>

packages/radix-vue/src/DateField/utils/segment.ts

@@ -34,3 +34,7 @@ export function isAcceptableSegmentKey(key: string) {
     return true
   return false
 }
+
+export function getSegmentElements(parentElement: HTMLElement): Element[] {
+  return Array.from(parentElement.querySelectorAll('[data-radix-vue-date-field-segment]')).filter(item => item.getAttribute('data-radix-vue-date-field-segment') !== 'literal')
+}

packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue

@@ -18,7 +18,7 @@ import {
   hasTime,
   isBefore,
 } from '@/date'
-import { createContent, initializeSegmentValues, isSegmentNavigationKey, syncSegmentValues } from '@/DateField/utils'
+import { createContent, getSegmentElements, initializeSegmentValues, isSegmentNavigationKey, syncSegmentValues } from '@/DateField/utils'
 import type { Direction } from '@/shared/types'
 
 export type DateRangeType = 'start' | 'end'
@@ -90,7 +90,7 @@ export const [injectDateRangeFieldRootContext, provideDateRangeFieldRootContext]
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, toRefs, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, toRefs, watch } from 'vue'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
 
@@ -116,7 +116,7 @@ const segmentElements = ref<Set<HTMLElement>>(new Set())
 const dir = useDirection(propsDir)
 
 onMounted(() => {
-  Array.from(parentElement.value.querySelectorAll('[data-radix-vue-date-field-segment]')).filter(item => item.getAttribute('data-radix-vue-date-field-segment') !== 'literal').forEach(el => segmentElements.value.add(el as HTMLElement))
+  getSegmentElements(parentElement.value).forEach(item => segmentElements.value.add(item as HTMLElement))
 })
 
 const modelValue = useVModel(props, 'modelValue', emits, {
@@ -264,8 +264,15 @@ watch([startValue, locale], ([_startValue]) => {
 })
 
 watch(locale, (value) => {
-  if (formatter.getLocale() !== value)
+  if (formatter.getLocale() !== value) {
     formatter.setLocale(value)
+    // Locale changed, so we need to clear the segment elements and re-get them (different order)
+    // Get the focusable elements again on the next tick
+    nextTick(() => {
+      segmentElements.value.clear()
+      getSegmentElements(parentElement.value).forEach(item => segmentElements.value.add(item as HTMLElement))
+    })
+  }
 })
 
 watch(modelValue, (_modelValue) => {