GithubProxy/coai
1
0
Fork 0
mirror of https://github.com/coaidev/coai.git synced 2025-05-20 05:20:15 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sh1n3zZ 2025-02-17 23:08:05 +08:00
parent 1998b42643
commit ec48ae9a51
No known key found for this signature in database
GPG Key ID: 696702CF723B0452
2 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/components/SelectGroup.tsx
View File

@ -131,16 +131,17 @@ 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>
@ -148,7 +149,7 @@ function SelectGroupMobile(props: SelectGroupProps) {
{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>

59
app/src/components/ui/select.tsx
View File

@ -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<