shadcn ui Select组件自动锁定页面滚动无法关闭的问题反馈

shadcn/ui的Select组件基于Radix UI的Select组件封装，滚动锁定是Radix组件的默认行为，无需修改源码，直接透传Radix的preventScroll属性即可关闭：

• 使用Select组件时，直接添加preventScroll={false}属性：

<Select defaultValue="option-1" preventScroll={false}>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="选择选项" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option-1">选项1</SelectItem>
    <SelectItem value="option-2">选项2</SelectItem>
    <SelectItem value="option-3">选项3</SelectItem>
  </SelectContent>
</Select>

• 若你是自行复制shadcn/ui的自定义Select组件代码，需确保SelectPrimitive.Root（即Radix的Select.Root）接收并传递所有props，比如自定义组件结构要包含：

const Select = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Root
    ref={ref}
    className={cn("relative", className)}
    {...props} // 必须传递props才能让preventScroll生效
  />
));

preventScroll是Radix UI Select.Root的原生属性，默认值为true，设为false即可禁用页面滚动锁定。

内容的提问来源于stack exchange，提问作者МаРмЕл TV