reka-ui 2.9.8 → 2.9.9

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/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/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/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)

package/src/TimeRangeField/TimeRangeFieldRoot.vue

@@ -402,6 +402,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/shared/date/useDateField.ts

@@ -7,9 +7,11 @@ import {
 } from '@internationalized/date'
 import { computed } from 'vue'
 import { getDaysInMonth, toDate } from '@/date'
-import { snapValueToStep, useKbd } from '@/shared'
+import { getActiveElement, snapValueToStep, useKbd } from '@/shared'
 import { isAcceptableSegmentKey, isNumberString, isSegmentNavigationKey } from './segment'
 
+const DIGIT_REG = /^\d$/
+
 type MinuteSecondIncrementProps = {
   e: KeyboardEvent
   part: keyof TimeFields
@@ -877,6 +879,13 @@ export function useDateField(props: UseDateFieldProps) {
   }
 
   function handleSegmentKeydown(e: KeyboardEvent) {
+    // A genuine composition keydown sets `isComposing` or reports `key === 'Process'`.
+    // Don't use `keyCode === 229` alone: a CJK IME (e.g. Pinyin) keeps that flag set
+    // while passing a directly-typed key through, so a real digit (`key === '1'`)
+    // would be dropped and leak into the contenteditable as raw text.
+    if (e.isComposing || e.key === 'Process')
+      return
+
     const disabled = props.disabled.value
     const readonly = props.readonly.value
     if (disabled || readonly)
@@ -935,9 +944,74 @@ export function useDateField(props: UseDateFieldProps) {
     }
   }
 
+  // Snapshot of the segment's child nodes (and their text) before the IME mutates
+  // the contenteditable. Vue renders the value into one text node but may keep
+  // empty sibling text nodes around it, so we must preserve EVERY node it owns and
+  // restore them verbatim on `compositionend`. Recreating nodes (textContent) would
+  // detach Vue's binding and freeze the segment; recreating the element isn't an
+  // option either, since the root captures segment elements once via
+  // `getSegmentElements` and a fresh node would break navigation.
+  let preCompositionNodes: { node: ChildNode, value: string | null }[] | null = null
+
+  function handleSegmentBeforeInput(e: InputEvent) {
+    // The segment's text is driven programmatically (keydown -> segmentValues ->
+    // Vue render), so the contenteditable must never be edited directly. Safari
+    // dispatches `beforeinput`/`input` BEFORE `keydown` while an IME is active,
+    // so a passed-through key (e.g. a digit typed while Pinyin is selected) would
+    // leak into the DOM as raw text before `handleSegmentKeydown` can prevent it.
+    // Composition input keeps `isComposing` true, so let it through and reconcile
+    // on `compositionend`.
+    if (!e.isComposing)
+      e.preventDefault()
+  }
+
+  function handleSegmentCompositionStart(e: CompositionEvent) {
+    const el = e.target as HTMLElement
+    preCompositionNodes = Array.from(el.childNodes, node => ({ node, value: node.nodeValue }))
+  }
+
+  function handleSegmentCompositionEnd(e: CompositionEvent) {
+    const el = e.target as HTMLElement
+    const original = preCompositionNodes
+    preCompositionNodes = null
+
+    // Restore Vue's original nodes (with their text) and drop anything the IME
+    // inserted, keeping Vue's bindings intact so later renders still patch the DOM.
+    // When no composition was tracked (e.g. synthetic events in tests) leave it be.
+    if (original) {
+      for (const { node, value } of original)
+        node.nodeValue = value
+      el.replaceChildren(...original.map(o => o.node))
+    }
+
+    const data = e.data
+    if (!data)
+      return
+
+    for (const char of data) {
+      if (!DIGIT_REG.test(char))
+        continue
+
+      // Dispatch to the focused segment so subsequent digits follow focus
+      // after `focusNext()` advances to the next segment (e.g. "34" → 3 in day, 4 in month).
+      const target = getActiveElement()
+      if (!(target instanceof HTMLElement))
+        break
+
+      target.dispatchEvent(new KeyboardEvent('keydown', {
+        key: char,
+        bubbles: true,
+        cancelable: true,
+      }))
+    }
+  }
+
   return {
     handleSegmentClick,
     handleSegmentKeydown,
+    handleSegmentBeforeInput,
+    handleSegmentCompositionStart,
+    handleSegmentCompositionEnd,
     handleSegmentFocusOut,
     attributes,
   }

package/src/shared/index.ts

@@ -14,6 +14,7 @@ export { renderSlotFragments } from './renderSlotFragments'
 export { trapFocus } from './trap-focus'
 export { useArrowNavigation } from './useArrowNavigation'
 export { useBodyScrollLock } from './useBodyScrollLock'
+export { useComposing } from './useComposing'
 export { type Formatter, useDateFormatter } from './useDateFormatter'
 export { useDirection } from './useDirection'
 export { useEmitAsProps } from './useEmitAsProps'

package/src/shared/useComposing.ts

@@ -0,0 +1,18 @@
+import { nextTick, ref } from 'vue'
+
+export function useComposing(onEnd?: (event: CompositionEvent) => void) {
+  const isComposing = ref(false)
+
+  function handleCompositionStart() {
+    isComposing.value = true
+  }
+
+  function handleCompositionEnd(event: CompositionEvent) {
+    nextTick(() => {
+      isComposing.value = false
+      onEnd?.(event)
+    })
+  }
+
+  return { isComposing, handleCompositionStart, handleCompositionEnd }
+}