reka-ui 2.9.7 → 2.9.9

package/src/Listbox/ListboxFilter.vue

@@ -3,6 +3,7 @@ import type { PrimitiveProps } from '..'
 import { useVModel } from '@vueuse/core'
 import { computed, onMounted, onUnmounted, ref, watchSyncEffect } from 'vue'
 import { usePrimitiveElement } from '@/Primitive'
+import { useComposing } from '@/shared'
 import { Primitive } from '..'
 import { injectListboxRootContext } from './ListboxRoot.vue'
 
@@ -59,6 +60,39 @@ onMounted(() => {
 onUnmounted(() => {
   rootContext.focusable.value = true
 })
+
+const { isComposing, handleCompositionStart, handleCompositionEnd } = useComposing((event) => {
+  modelValue.value = (event.target as HTMLInputElement).value
+  rootContext.onCompositionEnd()
+  rootContext.highlightFirstItem()
+})
+
+function onCompositionStart() {
+  rootContext.onCompositionStart()
+  handleCompositionStart()
+}
+
+function handleInput(event: InputEvent) {
+  if (isComposing.value)
+    return
+  modelValue.value = (event.target as HTMLInputElement).value
+  rootContext.highlightFirstItem()
+}
+
+function handleKeydownNavigation(event: KeyboardEvent) {
+  // Don't navigate mid-composition, arrow keys are used for IME candidate navigation
+  if (isComposing.value)
+    return
+  event.preventDefault()
+  rootContext.onKeydownNavigation(event)
+}
+
+function handleKeydownEnter(event: KeyboardEvent) {
+  // Don't select mid-composition, Enter commits the IME candidate
+  if (isComposing.value)
+    return
+  rootContext.onKeydownEnter(event)
+}
 </script>
 
 <template>
@@ -72,14 +106,11 @@ onUnmounted(() => {
     :aria-disabled="disabled ?? undefined"
     :aria-activedescendant="activedescendant"
     type="text"
-    @keydown.down.up.home.end.prevent="rootContext.onKeydownNavigation"
-    @keydown.enter="rootContext.onKeydownEnter"
-    @input="(event: InputEvent) => {
-      modelValue = (event.target as HTMLInputElement).value
-      rootContext.highlightFirstItem()
-    }"
-    @compositionstart="rootContext.onCompositionStart"
-    @compositionend="rootContext.onCompositionEnd"
+    @keydown.down.up.home.end="handleKeydownNavigation"
+    @keydown.enter="handleKeydownEnter"
+    @input="handleInput"
+    @compositionstart="onCompositionStart"
+    @compositionend="handleCompositionEnd"
   >
     <slot :model-value="modelValue" />
   </Primitive>

package/src/Listbox/ListboxItem.vue

@@ -44,7 +44,7 @@ const { CollectionItem } = useCollection()
 const { forwardRef, currentElement } = useForwardExpose()
 const rootContext = injectListboxRootContext()
 
-const isHighlighted = computed(() => currentElement.value === rootContext.highlightedElement.value)
+const isHighlighted = computed(() => currentElement.value != null && currentElement.value === rootContext.highlightedElement.value)
 const isSelected = computed(() => valueComparator(rootContext.modelValue.value, props.value, rootContext.by))
 
 const disabled = computed(() => rootContext.disabled.value || props.disabled)
@@ -76,7 +76,7 @@ provideListboxItemContext({
       :id="id"
       v-bind="$attrs"
       :ref="forwardRef"
-      v-memo="[isHighlighted, isSelected]"
+      v-memo="[isHighlighted, isSelected, disabled, rootContext.focusable.value]"
       role="option"
       :tabindex="rootContext.focusable.value ? isHighlighted ? '0' : '-1' : -1"
       :aria-selected="isSelected"

package/src/Listbox/ListboxRoot.vue

@@ -324,7 +324,7 @@ function handleMultipleReplace(event: KeyboardEvent, targetEl: HTMLElement) {
   }
 }
 
-async function highlightSelected(event?: Event) {
+async function highlightSelected(event?: Event, scroll = true) {
   // highlightSelected is called inside a watch with immediate set to true.
   // This results in code execution during SSR.
   // Ensure this code only runs in a browser environment, since it performs
@@ -339,18 +339,31 @@ async function highlightSelected(event?: Event) {
   else {
     const collection = getCollectionItem()
     const item = collection.find(i => i.dataset.state === 'checked')
+    // On the initial (mount) highlight we only set the roving-tabindex target.
+    // Focusing/scrolling here would scroll the page to a Listbox the user never
+    // interacted with (e.g. one below the fold). Later highlights scroll as before.
+    const focus = scroll ? undefined : false
     if (item)
-      changeHighlight(item)
+      changeHighlight(item, scroll, focus)
     else if (collection.length)
-      changeHighlight(collection[0])
+      changeHighlight(collection[0], scroll, focus)
   }
 }
 
+// `false` until the initial (mount) modelValue highlight has been queued.
+// Flipped synchronously in the watcher so the "is this the mount highlight?"
+// decision never depends on nextTick ordering, which differs between a client
+// mount and SSR hydration. The intent travels with the call as an argument
+// rather than via a shared flag released on a later tick.
+let hasHighlightedOnMount = false
+
 // watch for only programmatic changes
 watch(modelValue, () => {
   if (!isUserAction.value) {
+    const scroll = hasHighlightedOnMount
+    hasHighlightedOnMount = true
     nextTick(() => {
-      highlightSelected()
+      highlightSelected(undefined, scroll)
     })
   }
 }, { immediate: true, deep: true })

package/src/Menu/MenuItemImpl.vue

@@ -33,7 +33,7 @@ const { forwardRef, currentElement } = useForwardExpose()
 const { CollectionItem } = useCollection()
 
 const isFocused = ref(false)
-const isHighlighted = computed(() => isFocused.value || (contentContext.highlightedElement.value === currentElement.value))
+const isHighlighted = computed(() => isFocused.value || (currentElement.value != null && contentContext.highlightedElement.value === currentElement.value))
 
 async function handlePointerMove(event: PointerEvent) {
   if (event.defaultPrevented || !isMouseEvent(event))

package/src/MonthPicker/MonthPickerRoot.vue

@@ -74,7 +74,7 @@ export interface MonthPickerRootProps extends PrimitiveProps {
   /** A function that returns the previous page of the month picker. Receives the current placeholder as an argument. */
   prevPage?: (placeholder: DateValue) => DateValue
   /** The controlled selected month value of the month picker. Can be bound as `v-model`. */
-  modelValue?: DateValue | DateValue[] | undefined
+  modelValue?: DateValue | DateValue[] | null
   /** Whether multiple months can be selected */
   multiple?: boolean
 }

package/src/NavigationMenu/NavigationMenuContentImpl.vue

@@ -180,6 +180,9 @@ function handleKeydown(ev: KeyboardEvent) {
 }
 
 function handleDismiss() {
+  if (menuContext.modelValue.value !== itemContext.value)
+    return
+
   const rootContentDismissEvent = new Event(EVENT_ROOT_CONTENT_DISMISS, {
     bubbles: true,
     cancelable: true,

package/src/NavigationMenu/NavigationMenuRoot.vue

@@ -140,6 +140,7 @@ const { delayDuration, skipDelayDuration, dir: propDir, disableClickTrigger, dis
 const dir = useDirection(propDir)
 
 const isDelaySkipped = refAutoReset(false, skipDelayDuration)
+const skipNextClose = ref(false)
 const computedDelay = computed(() => {
   const isOpen = modelValue.value !== ''
   if (isOpen || isDelaySkipped.value)
@@ -150,8 +151,14 @@ const computedDelay = computed(() => {
 const debouncedFn = useDebounceFn((val?: string) => {
   // passing `undefined` meant to reset the debounce timer
   if (typeof val === 'string') {
+    if (val === '' && skipNextClose.value) {
+      skipNextClose.value = false
+      return
+    }
     previousValue.value = modelValue.value
     modelValue.value = val
+    if (val === '')
+      isDelaySkipped.value = true
   }
 }, computedDelay)
 
@@ -188,18 +195,27 @@ provideNavigationMenuContext({
     viewport.value = val
   },
   onTriggerEnter: (val) => {
-    debouncedFn(val)
+    if (modelValue.value !== '') {
+      skipNextClose.value = true
+      previousValue.value = modelValue.value
+      modelValue.value = val
+    }
+    else {
+      debouncedFn(val)
+    }
   },
   onTriggerLeave: () => {
-    isDelaySkipped.value = true
+    skipNextClose.value = false
     debouncedFn('')
   },
   onContentEnter: () => {
     debouncedFn()
   },
   onContentLeave: () => {
-    if (!props.disablePointerLeaveClose)
+    if (!props.disablePointerLeaveClose) {
+      skipNextClose.value = false
       debouncedFn('')
+    }
   },
   onItemSelect: (val) => {
     // When selecting item we trigger update immediately

package/src/NavigationMenu/__test__/NavigationMenuUnmountOnHideFalse.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuList,
+  NavigationMenuRoot,
+  NavigationMenuTrigger,
+} from '..'
+
+const modelValue = ref('')
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-model="modelValue"
+    :unmount-on-hide="false"
+    :disable-hover-trigger="true"
+  >
+    <span data-testid="model-value">{{ modelValue }}</span>
+    <NavigationMenuList>
+      <NavigationMenuItem value="one">
+        <NavigationMenuTrigger data-testid="trigger-one">
+          One
+        </NavigationMenuTrigger>
+        <NavigationMenuContent data-testid="content-one">
+          <button data-testid="inside-one">
+            Inside one
+          </button>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+
+      <NavigationMenuItem value="two">
+        <NavigationMenuTrigger data-testid="trigger-two">
+          Two
+        </NavigationMenuTrigger>
+        <NavigationMenuContent data-testid="content-two">
+          <button data-testid="inside-two">
+            Inside two
+          </button>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenuRoot>
+</template>

package/src/NumberField/NumberFieldInput.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
 import { onMounted, ref, watch } from 'vue'
-import { getActiveElement } from '@/shared'
+import { getActiveElement, useComposing, useKbd } from '@/shared'
 import { injectNumberFieldRootContext } from './NumberFieldRoot.vue'
 
 export interface NumberFieldInputProps extends PrimitiveProps {
@@ -17,6 +17,46 @@ const props = withDefaults(defineProps<NumberFieldInputProps>(), {
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 const rootContext = injectNumberFieldRootContext()
+const kbd = useKbd()
+const { isComposing, handleCompositionStart, handleCompositionEnd } = useComposing()
+
+function handleKeydown(event: KeyboardEvent) {
+  // Don't step/apply mid-composition, keys are used for IME candidate navigation and commit.
+  // `isComposing` stays true until the tick after `compositionend`, so the commit keydown
+  // (which can report `event.isComposing === false`) is still skipped.
+  if (isComposing.value || event.isComposing)
+    return
+
+  switch (event.key) {
+    case kbd.ARROW_UP:
+      event.preventDefault()
+      rootContext.handleIncrease()
+      break
+    case kbd.ARROW_DOWN:
+      event.preventDefault()
+      rootContext.handleDecrease()
+      break
+    case kbd.PAGE_UP:
+      event.preventDefault()
+      rootContext.handleIncrease(10)
+      break
+    case kbd.PAGE_DOWN:
+      event.preventDefault()
+      rootContext.handleDecrease(10)
+      break
+    case kbd.HOME:
+      event.preventDefault()
+      rootContext.handleMinMaxValue('min')
+      break
+    case kbd.END:
+      event.preventDefault()
+      rootContext.handleMinMaxValue('max')
+      break
+    case kbd.ENTER:
+      rootContext.applyInputValue((event.target as HTMLInputElement)?.value)
+      break
+  }
+}
 
 function handleWheelEvent(event: WheelEvent) {
   if (rootContext.disableWheelChange.value)
@@ -77,14 +117,10 @@ function handleChange() {
     :aria-valuenow="rootContext.modelValue.value"
     :aria-valuemin="rootContext.min.value"
     :aria-valuemax="rootContext.max.value"
-    @keydown.up.prevent="rootContext.handleIncrease()"
-    @keydown.down.prevent="rootContext.handleDecrease()"
-    @keydown.page-up.prevent="rootContext.handleIncrease(10)"
-    @keydown.page-down.prevent="rootContext.handleDecrease(10)"
-    @keydown.home.prevent="rootContext.handleMinMaxValue('min')"
-    @keydown.end.prevent="rootContext.handleMinMaxValue('max')"
+    @keydown="handleKeydown"
     @wheel="handleWheelEvent"
     @beforeinput="(event: InputEvent) => {
+      if (event.isComposing) return
       const target = event.target as HTMLInputElement
       let nextValue
         = target.value.slice(0, target.selectionStart ?? undefined)
@@ -100,8 +136,9 @@ function handleChange() {
       inputValue = target.value
     }"
     @change="handleChange"
-    @keydown.enter="rootContext.applyInputValue($event.target?.value)"
     @blur="rootContext.applyInputValue($event.target?.value)"
+    @compositionstart="handleCompositionStart"
+    @compositionend="handleCompositionEnd"
   >
     <slot />
   </Primitive>

package/src/PinInput/PinInputInput.vue

@@ -2,7 +2,7 @@
 import type { PinInputContextValue } from './PinInputRoot.vue'
 import type { PrimitiveProps } from '@/Primitive'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
-import { getActiveElement, useArrowNavigation } from '@/shared'
+import { getActiveElement, useArrowNavigation, useComposing } from '@/shared'
 import { injectPinInputRootContext } from './PinInputRoot.vue'
 
 export interface PinInputInputProps extends PrimitiveProps {
@@ -32,7 +32,45 @@ const NUMBER_REG = /^\d*$/
 const NON_NUMBER_REG = /\D/g
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
+
+const { isComposing, handleCompositionStart, handleCompositionEnd } = useComposing((event) => {
+  const target = event.target as HTMLInputElement
+  const value = event.data || target.value
+
+  if (context.isNumericMode.value) {
+    const filtered = value.replace(NON_NUMBER_REG, '')
+    if (!filtered) {
+      target.value = ''
+      return
+    }
+    if (filtered.length > 1) {
+      handleMultipleCharacter(filtered)
+      return
+    }
+    target.value = filtered
+    updateModelValueAt(props.index, filtered)
+    const nextEl = inputElements.value[props.index + 1]
+    if (nextEl)
+      nextEl.focus()
+    return
+  }
+
+  if (value.length > 1) {
+    handleMultipleCharacter(value)
+    return
+  }
+
+  target.value = value
+  updateModelValueAt(props.index, value)
+
+  const nextEl = inputElements.value[props.index + 1]
+  if (nextEl)
+    nextEl.focus()
+})
+
 function handleInput(event: InputEvent) {
+  if (isComposing.value || event.isComposing)
+    return
   const target = event.target as HTMLInputElement
 
   if ((event.data?.length ?? 0) > 1) {
@@ -69,6 +107,9 @@ function updatePlaceholder() {
 }
 
 function handleKeydown(event: KeyboardEvent) {
+  // Don't move between inputs mid-composition, arrow keys are used for IME candidate navigation
+  if (isComposing.value || event.isComposing)
+    return
   useArrowNavigation(event, getActiveElement() as HTMLElement, undefined, {
     itemsArray: inputElements.value,
     focus: true,
@@ -223,6 +264,8 @@ onUnmounted(() => {
     @focus="handleFocus"
     @blur="handleBlur"
     @paste="handlePaste"
+    @compositionstart="handleCompositionStart"
+    @compositionend="handleCompositionEnd"
   >
     <slot />
   </Primitive>

package/src/ScrollArea/ScrollAreaScrollbarX.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, onUnmounted } from 'vue'
 import { useForwardExpose } from '@/shared'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'
@@ -15,6 +15,11 @@ onMounted(() => {
   if (scrollbarElement.value)
     rootContext.onScrollbarXChange(scrollbarElement.value)
 })
+// Clear the registration on unmount so consumers (e.g. ScrollAreaCorner) don't
+// hold a stale reference once the scrollbar is removed (e.g. between hover cycles).
+onUnmounted(() => {
+  rootContext.onScrollbarXChange(null)
+})
 const sizes = computed(() => scrollbarVisibleContext.sizes.value)
 </script>
 

package/src/ScrollArea/ScrollAreaScrollbarY.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, onUnmounted } from 'vue'
 import { useForwardExpose } from '@/shared'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'
@@ -15,6 +15,11 @@ onMounted(() => {
   if (scrollbarElement.value)
     rootContext.onScrollbarYChange(scrollbarElement.value)
 })
+// Clear the registration on unmount so consumers (e.g. ScrollAreaCorner) don't
+// hold a stale reference once the scrollbar is removed (e.g. between hover cycles).
+onUnmounted(() => {
+  rootContext.onScrollbarYChange(null)
+})
 
 const sizes = computed(() => scrollbarVisibleContext.sizes.value)
 </script>

package/src/Select/SelectContent.vue

@@ -3,7 +3,7 @@ import type {
   SelectContentImplEmits,
   SelectContentImplProps,
 } from './SelectContentImpl.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 export type SelectContentEmits = SelectContentImplEmits
 
@@ -44,15 +44,31 @@ const presenceRef = ref<InstanceType<typeof Presence>>()
 const present = computed(() => props.forceMount || rootContext.open.value)
 const renderPresence = ref(present.value)
 
-watch(present, () => {
+let renderPresenceTimeout: ReturnType<typeof setTimeout> | undefined
+
+function clearRenderPresenceTimeout() {
+  if (renderPresenceTimeout) {
+    clearTimeout(renderPresenceTimeout)
+    renderPresenceTimeout = undefined
+  }
+}
+
+watch(present, (_value, _oldValue, onCleanup) => {
   // Toggle render presence after a delay (nextTick is not enough)
   // to allow children to re-render with the latest state.
   // Otherwise, they would remain in the old state during the transition,
   // which would prevent the animation that depend on state (e.g., data-[state=closed])
   // from being applied accurately.
   // @see https://github.com/unovue/reka-ui/issues/1865
-  setTimeout(() => renderPresence.value = present.value)
+  clearRenderPresenceTimeout()
+  renderPresenceTimeout = setTimeout(() => {
+    renderPresence.value = present.value
+    renderPresenceTimeout = undefined
+  })
+  onCleanup(clearRenderPresenceTimeout)
 })
+
+onUnmounted(clearRenderPresenceTimeout)
 </script>
 
 <template>

package/src/Select/__test__/SelectUnmountCleanup.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from '..'
+
+const open = ref(true)
+const mounted = ref(true)
+</script>
+
+<template>
+  <button @click="open = false">
+    Close
+  </button>
+  <button @click="mounted = false">
+    Unmount
+  </button>
+
+  <SelectRoot
+    v-if="mounted"
+    v-model:open="open"
+  >
+    <SelectTrigger aria-label="Fruit">
+      <SelectValue placeholder="Please select a fruit" />
+    </SelectTrigger>
+    <SelectPortal>
+      <SelectContent position="popper">
+        <SelectViewport>
+          <SelectItem value="apple">
+            <SelectItemText>Apple</SelectItemText>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>

package/src/TagsInput/TagsInputInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
-import { useForwardExpose } from '@/shared'
+import { useComposing, useForwardExpose } from '@/shared'
 
 export interface TagsInputInputProps extends PrimitiveProps {
   /** The placeholder character to use for empty tags input. */
@@ -13,7 +13,7 @@ export interface TagsInputInputProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { nextTick, onMounted, ref } from 'vue'
+import { nextTick, onMounted } from 'vue'
 import { Primitive } from '@/Primitive'
 import { injectTagsInputRootContext } from './TagsInputRoot.vue'
 
@@ -55,15 +55,7 @@ function handleTab(event: Event) {
   handleCustomKeydown(event)
 }
 
-const isComposing = ref(false)
-function onCompositionStart() {
-  isComposing.value = true
-}
-function onCompositionEnd() {
-  nextTick(() => {
-    isComposing.value = false
-  })
-}
+const { isComposing, handleCompositionStart, handleCompositionEnd } = useComposing()
 async function handleCustomKeydown(event: Event) {
   if (isComposing.value)
     return
@@ -85,6 +77,8 @@ async function handleCustomKeydown(event: Event) {
 }
 
 function handleInput(event: InputEvent) {
+  if (isComposing.value)
+    return
   context.isInvalidInput.value = false
   if (event.data === null)
     return
@@ -106,6 +100,14 @@ function handleInput(event: InputEvent) {
   }
 }
 
+function handleInputKeydown(event: KeyboardEvent) {
+  // `isComposing` stays true until the tick after `compositionend`, so arrow/backspace
+  // tag navigation is skipped even when the commit keydown reports `event.isComposing === false`.
+  if (isComposing.value)
+    return
+  context.onInputKeydown(event)
+}
+
 function handlePaste(event: ClipboardEvent) {
   if (context.addOnPaste.value) {
     event.preventDefault()
@@ -160,9 +162,9 @@ onMounted(() => {
     @keydown.enter="handleCustomKeydown"
     @keydown.tab="handleTab"
     @blur="handleBlur"
-    @keydown="context.onInputKeydown"
-    @compositionstart="onCompositionStart"
-    @compositionend="onCompositionEnd"
+    @keydown="handleInputKeydown"
+    @compositionstart="handleCompositionStart"
+    @compositionend="handleCompositionEnd"
     @paste="handlePaste"
   >
     <slot />

package/src/TagsInput/TagsInputRoot.vue

@@ -156,6 +156,9 @@ provideTagsInputRootContext({
   },
   onRemoveValue: handleRemoveTag,
   onInputKeydown: (event) => {
+    // Don't navigate/select tags mid-composition, keys are used for IME candidate navigation
+    if (event.isComposing)
+      return
     const target = event.target as HTMLInputElement
     const collection = getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')
     if (!collection.length)

package/src/TimeField/TimeFieldInput.vue

@@ -23,6 +23,9 @@ const lastKeyZero = ref(false)
 const {
   handleSegmentClick,
   handleSegmentKeydown,
+  handleSegmentBeforeInput,
+  handleSegmentCompositionStart,
+  handleSegmentCompositionEnd,
   handleSegmentFocusOut,
   attributes,
 } = useDateField({
@@ -61,6 +64,9 @@ const isInvalid = computed(() => rootContext.isInvalid.value)
     v-on="part !== 'literal' ? {
       mousedown: handleSegmentClick,
       keydown: handleSegmentKeydown,
+      beforeinput: handleSegmentBeforeInput,
+      compositionstart: handleSegmentCompositionStart,
+      compositionend: handleSegmentCompositionEnd,
       focusout: () => {
         hasLeftFocus = true
         handleSegmentFocusOut()

package/src/TimeField/TimeFieldRoot.vue

@@ -297,6 +297,9 @@ const prevFocusableSegment = computed(() => {
 const kbd = useKbd()
 
 function handleKeydown(e: KeyboardEvent) {
+  // Don't navigate between segments mid-composition, arrow keys are used for IME candidate navigation
+  if (e.isComposing)
+    return
   if (!isSegmentNavigationKey(e.key))
     return
   if (e.key === kbd.ARROW_LEFT)

package/src/TimeRangeField/TimeRangeFieldInput.vue

@@ -26,6 +26,9 @@ const lastKeyZero = ref(false)
 const {
   handleSegmentClick,
   handleSegmentKeydown,
+  handleSegmentBeforeInput,
+  handleSegmentCompositionStart,
+  handleSegmentCompositionEnd,
   attributes,
 } = useDateField({
   hasLeftFocus,
@@ -63,6 +66,9 @@ const isInvalid = computed(() => rootContext.isInvalid.value)
     v-on="part !== 'literal' ? {
       mousedown: handleSegmentClick,
       keydown: handleSegmentKeydown,
+      beforeinput: handleSegmentBeforeInput,
+      compositionstart: handleSegmentCompositionStart,
+      compositionend: handleSegmentCompositionEnd,
       focusout: () => { hasLeftFocus = true },
       focusin: (e: FocusEvent) => {
         rootContext.setFocusedElement(e.target as HTMLElement)