Выпадающий список не прокручивается на мобильных устройствах. ⇐ CSS

[Anonymous]

Я работаю над приложением Nextjs и использую shadcn и Tailwindcss для стилизации. Проблема в том, что у меня есть компонент, который нельзя прокручивать на мобильных устройствах (он не доступен для касания).
Это мой дочерний компонент:

Код: Выделить всё

import { useState } from "react";
import {
Popover,
PopoverTrigger,
PopoverContent,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import {
Command,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem
} from "@/components/ui/command";
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";

export default function DynamicSelector({
options,
selectedValue,
setSelectedValue,
placeholder,
}) {
const [open, setOpen] = useState(false);

return (



{selectedValue ? options.find(option => option.value === selectedValue)?.label : placeholder}







No se encontraron opciones.

{options.map((option) => (
 {
setSelectedValue(option.value);
setOpen(false);
}}
>

{option.label}

))}





);
}

А это фрагмент родительского компонента:

Код: Выделить всё

{step === 4 && !isLoading && (

 ({
value: banco.Codigo,
label: banco.Descripcion,
}))}
placeholder={"Selecciona tu banco"}
/>
 processInput(selectedBank)}
className="bg-blue-500 text-white px-4 py-2 rounded-lg"
>



)}

Я пробовал использовать overflow-y-auto, overflow-y-scroll, touch-* и другие свойства, но это не помогло даже близок к тому, чтобы сделать этот компонент прокручиваемым на мобильных устройствах.
Я не знаю, проблема ли это в shadcn (я так не думаю) или это просто что-то, что я делаю неправильно (Я понятия не имею).
Дело в том, что Полоса прокрутки появляется в моем компоненте, когда я моделирую мобильное устройство с помощью инструментов разработчика, я не могу прокручивать, я также пробовал напрямую с телефона, но ни один из них не прокрутил.

Подробнее здесь: https://stackoverflow.com/questions/791 ... le-devices