fix: improve mobile touch interaction for select components (#334)

coaidev · Feb 17, 2025 · ec48ae9 · ec48ae9
1 parent 1998b42
commit ec48ae9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 34 deletions.
diff --git a/app/src/components/SelectGroup.tsx b/app/src/components/SelectGroup.tsx
@@ -131,24 +131,25 @@ function SelectGroupMobile(props: SelectGroupProps) {
           props.onChange?.(value);
         }}
       >
-        <SelectTrigger className="select-group mobile whitespace-nowrap flex-nowrap">
+        <SelectTrigger className="select-group mobile whitespace-nowrap flex-nowrap touch-manipulation">
           <SelectValue placeholder={props.current?.value || ""} />
         </SelectTrigger>
         <SelectContent
-          className={`${props.className} ${props.classNameMobile}`}
+          className={`${props.className} ${props.classNameMobile} touch-manipulation`}
         >
           {props.selectGroupTop && (
             <SelectItem
               value={props.selectGroupTop.name}
               onClick={() => props.onChange?.(props.selectGroupTop!.name)}
+              className="touch-manipulation"
             >
               <GroupSelectItem {...props.selectGroupTop} />
             </SelectItem>
           )}
 
           {props.list.map((select: SelectItemProps, idx: number) => (
             <SelectItem
-              className={`whitespace-nowrap`}
+              className={`whitespace-nowrap touch-manipulation`}
               key={idx}
               value={select.name}
             >
@@ -160,6 +161,7 @@ function SelectGroupMobile(props: SelectGroupProps) {
             <SelectItem
               value={props.selectGroupBottom.name}
               onClick={() => props.onChange?.(props.selectGroupBottom!.name)}
+              className="touch-manipulation"
             >
               <GroupSelectItem {...props.selectGroupBottom} />
             </SelectItem>

diff --git a/app/src/components/ui/select.tsx b/app/src/components/ui/select.tsx
@@ -68,41 +68,38 @@ SelectScrollDownButton.displayName =
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }) => {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        ref={(ref) => {
-          if (!ref) return;
-          ref.ontouchend = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          };
-        }}
+>(({ className, children, position = "popper", ...props }) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={(ref) => {
+        if (!ref) return;
+        ref.ontouchstart = (e) => {
+          e.stopPropagation();
+        };
+      }}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
         className={cn(
-          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "p-1",
           position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className,
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
-        position={position}
-        {...props}
       >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  );
-});
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<