Skip to content

fix(Select): improve touch/pointer handling in select #2329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sadeghbarati wants to merge 4 commits into
base: v2
Choose a base branch
from
Open

fix(Select): improve touch/pointer handling in select #2329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ccd03d7
fix(Select): improve touch/pointer handling in Select
sadeghbarati Dec 9, 2025
14326be
fix(Select): select value flash when selected item
Oct 22, 2025
dd3e97a
fix: disable eslint for pointerTypeRef line
sadeghbarati Dec 9, 2025
5f07e30
Merge remote-tracking branch 'origin/v2' into fix-select-touch
zernonia Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 15 additions & 28 deletions packages/core/src/Select/SelectContent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,15 @@ import type {
SelectContentImplEmits,
SelectContentImplProps,
} from './SelectContentImpl.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { onMounted, ref } from 'vue'

export type SelectContentEmits = SelectContentImplEmits

export interface SelectContentProps extends SelectContentImplProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with Vue animation libraries.
*
*/
forceMount?: boolean
}
Expand All @@ -28,49 +29,35 @@ defineOptions({
})

const props = defineProps<SelectContentProps>()

const emits = defineEmits<SelectContentEmits>()
const forwarded = useForwardPropsEmits(props, emits)

const rootContext = injectSelectRootContext()

const fragment = ref<DocumentFragment>()

onMounted(() => {
fragment.value = new DocumentFragment()
})

const presenceRef = ref<InstanceType<typeof Presence>>()

const present = computed(() => props.forceMount || rootContext.open.value)
const renderPresence = ref(present.value)

watch(present, () => {
// 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)
})
</script>

<template>
<Presence
v-if="present || renderPresence || presenceRef?.present"
ref="presenceRef"
:present="present"
v-slot="{ present }"
:present="forceMount || rootContext.open.value"
force-mount
>
<SelectContentImpl v-bind="{ ...forwarded, ...$attrs }">
<SelectContentImpl
v-if="present"
v-bind="{ ...forwarded, ...$attrs }"
>
<slot />
</SelectContentImpl>
</Presence>

<div v-else-if="fragment">
<Teleport :to="fragment">
<Teleport
v-else-if="fragment && !present"
:to="fragment"
>
<SelectProvider :context="rootContext">
<slot />
</SelectProvider>
</Teleport>
</div>
</Presence>
</template>
12 changes: 9 additions & 3 deletions packages/core/src/Select/SelectContentImpl.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ watchEffect((cleanupFn) => {
if (!content.value)
return
let pointerMoveDelta = { x: 0, y: 0 }
let pointerTypeRef: PointerEvent['pointerType'] = 'touch'

const handlePointerMove = (event: PointerEvent) => {
pointerMoveDelta = {
Expand All @@ -147,12 +148,16 @@ watchEffect((cleanupFn) => {
Math.round(event.pageY) - (triggerPointerDownPosRef.value?.y ?? 0),
),
}
pointerTypeRef = event.pointerType
}
const handlePointerUp = (event: PointerEvent) => {
// Prevent options from being untappable on touch devices
// https://github.com/unovue/reka-ui/issues/804
if (event.pointerType === 'touch')
// For touch devices, selection happens via click event on item, not pointerup
// So we should not interfere with the default behavior for touch
if (event.pointerType === 'touch' || pointerTypeRef === 'touch') {
document.removeEventListener('pointermove', handlePointerMove)
triggerPointerDownPosRef.value = null
return
}

// If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.
if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {
Expand Down Expand Up @@ -274,6 +279,7 @@ provideSelectContentContext({
<CollectionSlot>
<FocusScope
as-child
:trapped="rootContext.open.value"
@mount-auto-focus.prevent
@unmount-auto-focus="
(event) => {
Expand Down
43 changes: 29 additions & 14 deletions packages/core/src/Select/SelectItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ export interface SelectItemProps<T = AcceptableValue> extends PrimitiveProps {
<script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
import {
computed,
nextTick,
onMounted,
ref,
toRefs,
Expand All @@ -68,16 +67,18 @@ const textId = useId(undefined, 'reka-select-item-text')

const SELECT_SELECT = 'select.select'

async function handleSelectCustomEvent(ev: PointerEvent | KeyboardEvent) {
// Track pointer type to differentiate between mouse and touch interactions
let pointerTypeRef: PointerEvent['pointerType'] = 'touch'

function handleSelectCustomEvent(ev: PointerEvent | KeyboardEvent) {
if (ev.defaultPrevented)
return

const eventDetail = { originalEvent: ev, value: props.value as T }
handleAndDispatchCustomEvent(SELECT_SELECT, handleSelect, eventDetail)
}

async function handleSelect(ev: SelectEvent<T>) {
await nextTick()
function handleSelect(ev: SelectEvent<T>) {
emits('select', ev)
if (ev.defaultPrevented)
return
Expand All @@ -89,30 +90,32 @@ async function handleSelect(ev: SelectEvent<T>) {
}
}

async function handlePointerMove(event: PointerEvent) {
await nextTick()
function handlePointerMove(event: PointerEvent) {
if (event.defaultPrevented)
return

// Remember pointer type when sliding over to this item from another one
pointerTypeRef = event.pointerType

if (disabled.value) {
contentContext.onItemLeave?.()
}
else {
else if (pointerTypeRef === 'mouse') {
// Only focus on mouse move, not touch
// even though safari doesn't support this option, it's acceptable
// as it only means it might scroll a few pixels when using the pointer.
(event.currentTarget as HTMLElement | null)?.focus({ preventScroll: true })
}
}

async function handlePointerLeave(event: PointerEvent) {
await nextTick()
function handlePointerLeave(event: PointerEvent) {
if (event.defaultPrevented)
return
if (event.currentTarget === getActiveElement())
contentContext.onItemLeave?.()
}

async function handleKeyDown(event: KeyboardEvent) {
await nextTick()
function handleKeyDown(event: KeyboardEvent) {
if (event.defaultPrevented)
return
const isTypingAhead = contentContext.searchRef?.value !== ''
Expand Down Expand Up @@ -168,11 +171,23 @@ provideSelectItemContext({
:as-child="asChild"
@focus="isFocused = true"
@blur="isFocused = false"
@pointerup="handleSelectCustomEvent"
@pointerdown="(event) => {
@click="(event: MouseEvent) => {
// Open on click when using a touch or pen device
if (pointerTypeRef !== 'mouse') {
handleSelectCustomEvent(event as unknown as PointerEvent)
}
}"
Comment on lines +174 to +179
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Unsafe type cast from MouseEvent to PointerEvent.

The click event provides a MouseEvent, which is cast to PointerEvent. While this works at runtime because handleSelectCustomEvent only accesses common properties, the cast is technically incorrect and could cause issues if the handler later accesses PointerEvent-specific properties like pointerId or pressure.

Suggested fix: Update function signature to accept both types 
-function handleSelectCustomEvent(ev: PointerEvent | KeyboardEvent) {
+function handleSelectCustomEvent(ev: PointerEvent | MouseEvent | KeyboardEvent) {
   if (ev.defaultPrevented)
     return
 
   const eventDetail = { originalEvent: ev, value: props.value as T }
   handleAndDispatchCustomEvent(SELECT_SELECT, handleSelect, eventDetail)
 }

Then remove the cast:

       @click="(event: MouseEvent) => {
         // Open on click when using a touch or pen device
         if (pointerTypeRef !== 'mouse') {
-          handleSelectCustomEvent(event as unknown as PointerEvent)
+          handleSelectCustomEvent(event)
         }
       }"
🤖 Prompt for AI Agents 
In @packages/core/src/Select/SelectItem.vue around lines 174 - 179, The click
handler is unsafely casting MouseEvent to PointerEvent; update the signature of
handleSelectCustomEvent to accept (event: MouseEvent | PointerEvent) and remove
the cast in the @click handler, then audit all calls to handleSelectCustomEvent
to ensure any PointerEvent-only properties are accessed behind type guards
(e.g., narrow by checking 'pointerId' in the event) so both event types are
handled safely while keeping pointerTypeRef logic intact.

@pointerup="(event: PointerEvent) => {
// Using a mouse you should be able to do pointer down, move through
// the list, and release the pointer over the item to select it.
if (pointerTypeRef === 'mouse') {
handleSelectCustomEvent(event)
}
}"
@pointerdown="(event: PointerEvent) => {
pointerTypeRef = event.pointerType;
(event.currentTarget as HTMLElement).focus({ preventScroll: true })
}"
@touchend.prevent.stop
@pointermove="handlePointerMove"
@pointerleave="handlePointerLeave"
@keydown="handleKeyDown"
Expand Down
53 changes: 25 additions & 28 deletions packages/core/src/Select/SelectTrigger.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ const props = withDefaults(defineProps<SelectTriggerProps>(), {
const rootContext = injectSelectRootContext()
const { forwardRef, currentElement: triggerElement } = useForwardExpose()

// Track pointer type to differentiate between mouse and touch/pen
// eslint-disable-next-line prefer-const
let pointerTypeRef: PointerEvent['pointerType'] = 'touch'

const isDisabled = computed(() => rootContext.disabled?.value || props.disabled)

rootContext.contentId ||= useId(undefined, 'reka-select-content')
Expand All @@ -32,19 +36,19 @@ onMounted(() => {

const { getItems } = useCollection()
const { search, handleTypeaheadSearch, resetTypeahead } = useTypeahead()
function handleOpen() {

function handleOpen(pointerEvent?: MouseEvent | PointerEvent) {
if (!isDisabled.value) {
rootContext.onOpenChange(true)
// reset typeahead when we open
resetTypeahead()
}
}

function handlePointerOpen(event: PointerEvent) {
handleOpen()
rootContext.triggerPointerDownPosRef.value = {
x: Math.round(event.pageX),
y: Math.round(event.pageY),
if (pointerEvent) {
rootContext.triggerPointerDownPosRef.value = {
x: Math.round(pointerEvent.pageX),
y: Math.round(pointerEvent.pageY),
}
}
}
</script>
Expand All @@ -70,21 +74,23 @@ function handlePointerOpen(event: PointerEvent) {
:as-child="asChild"
:as="as"
@click="
(event: MouseEvent) => {
(event: PointerEvent) => {
// Whilst browsers generally have no issue focusing the trigger when clicking
// on a label, Safari seems to struggle with the fact that there's no `onClick`.
// We force `focus` in this case. Note: this doesn't create any other side-effect
// because we are preventing default in `onPointerDown` so effectively
// this only runs for a label 'click'
(event?.currentTarget as HTMLElement)?.focus();

// Open on click when using a touch or pen device
if (pointerTypeRef !== 'mouse') {
handleOpen(event);
}
Comment on lines 76 to +88
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Type mismatch: click event is MouseEvent, not PointerEvent.

The @click handler receives a MouseEvent, but it's typed as PointerEvent. While both have pageX/pageY properties, the type annotation is incorrect. Additionally, the cast at line 177 in SelectItem.vue has a similar pattern.

Suggested fix 
       @click="
-        (event: PointerEvent) => {
+        (event: MouseEvent) => {
           // Whilst browsers generally have no issue focusing the trigger when clicking
           // on a label, Safari seems to struggle with the fact that there's no `onClick`.
           // We force `focus` in this case. Note: this doesn't create any other side-effect
           // because we are preventing default in `onPointerDown` so effectively
           // this only runs for a label 'click'
           (event?.currentTarget as HTMLElement)?.focus();

           // Open on click when using a touch or pen device
           if (pointerTypeRef !== 'mouse') {
             handleOpen(event);
           }
         }
       "
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@click="
(event: MouseEvent) => {
(event: PointerEvent) => {
// Whilst browsers generally have no issue focusing the trigger when clicking
// on a label, Safari seems to struggle with the fact that there's no `onClick`.
// We force `focus` in this case. Note: this doesn't create any other side-effect
// because we are preventing default in `onPointerDown` so effectively
// this only runs for a label 'click'
(event?.currentTarget as HTMLElement)?.focus();
// Open on click when using a touch or pen device
if (pointerTypeRef !== 'mouse') {
handleOpen(event);
}
@click="
(event: MouseEvent) => {
// Whilst browsers generally have no issue focusing the trigger when clicking
// on a label, Safari seems to struggle with the fact that there's no `onClick`.
// We force `focus` in this case. Note: this doesn't create any other side-effect
// because we are preventing default in `onPointerDown` so effectively
// this only runs for a label 'click'
(event?.currentTarget as HTMLElement)?.focus();
// Open on click when using a touch or pen device
if (pointerTypeRef !== 'mouse') {
handleOpen(event);
}
🤖 Prompt for AI Agents 
In @packages/core/src/Select/SelectTrigger.vue around lines 76 - 88, The click
handler in SelectTrigger.vue is incorrectly typed as PointerEvent; change the
event parameter type to MouseEvent in the @click handler and update any related
casts to HTMLElement accordingly (refer to the @click handler, pointerTypeRef
and handleOpen identifiers), and make the analogous change in SelectItem.vue
where an event is cast (replace PointerEvent with MouseEvent for that cast) so
the runtime types match the declared types.

}
"
@pointerdown="
(event: PointerEvent) => {
// Prevent opening on touch down.
// https://github.com/unovue/reka-ui/issues/804
if (event.pointerType === 'touch')
return event.preventDefault();
pointerTypeRef = event.pointerType;

// prevent implicit pointer capture
// https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture
Expand All @@ -94,30 +100,21 @@ function handlePointerOpen(event: PointerEvent) {
}

// only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
// but not when the control key is pressed (avoiding MacOS right click)
if (event.button === 0 && event.ctrlKey === false) {
handlePointerOpen(event)
// but not when the control key is pressed (avoiding MacOS right click); also not for touch
// devices because that would open the menu on scroll. (pen devices behave as touch on iOS).
if (event.button === 0 && event.ctrlKey === false && event.pointerType === 'mouse') {
handleOpen(event);
// prevent trigger from stealing focus from the active item after opening.
event.preventDefault();
}
}
"
@pointerup.prevent="
(event: PointerEvent) => {
// Only open on pointer up when using touch devices
// https://github.com/unovue/reka-ui/issues/804
if (event.pointerType === 'touch')
handlePointerOpen(event)
}
"
@keydown="
(event) => {
(event: KeyboardEvent) => {
const isTypingAhead = search !== '';
const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
if (!isModifierKey && event.key.length === 1)
if (isTypingAhead && event.key === ' ') return;

handleTypeaheadSearch(event.key, getItems());
if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key, getItems() ?? []);
if (isTypingAhead && event.key === ' ') return;
if (OPEN_KEYS.includes(event.key)) {
handleOpen();
event.preventDefault();
Expand Down
Loading
Loading