fix(Select): Touch scroll triggers the select content (#807)

* fix(select): touch scroll triggers the select content

* chore(select): remove test comments

* revert(select): revert and use simple pointer prevent on touch

* fix: item focus

---------

Co-authored-by: zernonia <zernonia@gmail.com>

packages/radix-vue/src/Select/Select.test.ts

@@ -59,7 +59,7 @@ describe('given default Select', () => {
         const selection = wrapper.findAll('[role=option]')[1];
         (selection.element as HTMLElement).focus()
         await selection.trigger('pointerup')
-        // not sure why need 2 pointUp to trigger the selection correctly
+        // Needs 2 pointerup because SelectContentImpl prevents accidental pointerup's
         await fireEvent.pointerUp(selection.element)
       })
 
@@ -119,7 +119,7 @@ describe('given select in a form', async () => {
       const selection = wrapper.findAll('[role=option]')[1];
       (selection.element as HTMLElement).focus()
       await selection.trigger('pointerup')
-      // not sure why need 2 pointUp to trigger the selection correctly
+      // Needs 2 pointerup because SelectContentImpl prevents accidental pointerup's
       await fireEvent.pointerUp(selection.element)
       await wrapper.find('form').trigger('submit')
     })
@@ -140,7 +140,7 @@ describe('given select in a form', async () => {
       const selection = wrapper.findAll('[role=option]')[4];
       (selection.element as HTMLElement).focus()
       await selection.trigger('pointerup')
-      // not sure why need 2 pointUp to trigger the selection correctly
+      // Needs 2 pointerup because SelectContentImpl prevents accidental pointerup's
       await fireEvent.pointerUp(selection.element)
       await wrapper.find('form').trigger('submit')
     })

packages/radix-vue/src/Select/SelectContentImpl.vue

@@ -139,6 +139,11 @@ watchEffect((cleanupFn) => {
     }
   }
   const handlePointerUp = (event: PointerEvent) => {
+    // Prevent options from being untappable on touch devices
+    // https://github.com/radix-vue/radix-vue/issues/804
+    if (event.pointerType === 'touch')
+      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) {
       event.preventDefault()

packages/radix-vue/src/Select/SelectItem.vue

@@ -144,6 +144,9 @@ provideSelectItemContext({
     @focus="isFocused = true"
     @blur="isFocused = false"
     @pointerup="handleSelect"
+    @pointerdown="(event) => {
+      (event.currentTarget as HTMLElement).focus({ preventScroll: true })
+    }"
     @touchend.prevent.stop
     @pointermove="handlePointerMove"
     @pointerleave="handlePointerLeave"

packages/radix-vue/src/Select/SelectTrigger.vue

@@ -42,6 +42,14 @@ function handleOpen() {
     resetTypeahead()
   }
 }
+
+function handlePointerOpen(event: PointerEvent) {
+  handleOpen()
+  rootContext.triggerPointerDownPosRef.value = {
+    x: Math.round(event.pageX),
+    y: Math.round(event.pageY),
+  }
+}
 </script>
 
 <template>
@@ -75,6 +83,11 @@ function handleOpen() {
       "
       @pointerdown="
         (event: PointerEvent) => {
+          // Prevent opening on touch down.
+          // https://github.com/radix-vue/radix-vue/issues/804
+          if (event.pointerType === 'touch')
+            return event.preventDefault();
+
           // prevent implicit pointer capture
           // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture
           const target = event.target as HTMLElement;
@@ -85,17 +98,20 @@ function handleOpen() {
           // 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) {
-            handleOpen();
-            rootContext.triggerPointerDownPosRef.value = {
-              x: Math.round(event.pageX),
-              y: Math.round(event.pageY),
-            };
+            handlePointerOpen(event)
             // prevent trigger from stealing focus from the active item after opening.
             event.preventDefault();
           }
         }
       "
-      @pointerup.prevent
+      @pointerup.prevent="
+        (event: PointerEvent) => {
+          // Only open on pointer up when using touch devices
+          // https://github.com/radix-vue/radix-vue/issues/804
+          if (event.pointerType === 'touch')
+            handlePointerOpen(event)
+        }
+      "
       @keydown="
         (event) => {
           const isTypingAhead = search !== '';