How to fix this issue? problem is Select component is increasing its parent height when opening option. how could fix this? i don't wanna change in parent componet because Select will be reusable component
How to fix this issue? problem is Select component is increasing its parent height when opening option. how could fix this? i don't wanna change in parent componet because Select will be reusable
How to fix this issue? problem is Select component is increasing its parent height when opening option. how could fix this? i don't wanna change in parent componet because Select will be reusable
export default function Select() {
const [selected, setSelected] = useState(people[3])
return (
<Listbox value={selected} onChange={setSelected}>
{({ open }) => (
<>
<Listbox.Label className="al-block al-text-sm al-font-medium al-leading-6 al-text-gray-900">Assigned to</Listbox.Label>
<div className="al-w-full al-relative al-mt-2">
<Listbox.Button className="al-relative al-w-full al-cursor-default al-rounded-md al-bg-white al-py-1.5 al-pl-3 al-pr-10 al-text-left al-text-gray-900 al-shadow-sm al-ring-1 al-ring-inset al-ring-gray-300 focus:al-outline-none focus:al-ring-2 focus:al-ring-indigo-500 sm:al-text-sm sm:al-leading-6">
<span className="al-flex al-items-center">
<img src={selected.avatar} alt="" className="al-h-5 al-w-5 al-flex-shrink-0 al-rounded-full" />
<span className="al-ml-3 al-block al-truncate">{selected.name}</span>
</span>
<span className="al-pointer-events-none al-absolute al-inset-y-0 al-right-0 al-ml-3 al-flex al-items-center al-pr-2">
<ChevronUpDownIcon className="al-h-5 w-5 al-text-gray-400" aria-hidden="true" />
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
enter="al-transition al-ease-out al-duration-100"
enterFrom="al-opacity-0 al-translate-y-1 al-scale-95"
enterTo="al-opacity-100 al-translate-y-0 al-scale-100"
leave="al-transition al-ease-in al-duration-75"
leaveFrom="al-opacity-100 al-translate-y-0 al-scale-100"
leaveTo="al-opacity-0 al-translate-y-1 al-scale-95"
>
<Listbox.Options className="al-absolute al-z-10 al-mt-1 al-max-h-56 al-w-full al-overflow-auto al-rounded-md al-bg-white al-py-1 al-text-base al-shadow-lg al-ring-1 al-ring-black al-ring-opacity-5 focus:al-outline-none sm:al-text-sm">
{people.map((person) => (
<Listbox.Option
key={person.id}
className={({ active }) =>
classNames(
active ? 'al-bg-indigo-600 al-text-white' : 'al-text-gray-900',
'al-relative al-cursor-default al-select-none al-py-2 al-pl-3 al-pr-9'
)
}
value={person}
>
{({ selected, active }) => (
<>
<div className="al-flex al-items-center">
<img src={person.avatar} alt="" className="al-h-5 al-w-5 al-flex-shrink-0 al-rounded-full" />
<span
className={classNames(selected ? 'al-font-semibold' : 'al-font-normal', 'al-ml-3 al-block al-truncate')}
>
{person.name}
</span>
</div>
{selected ? (
<span
className={classNames(
active ? 'al-text-white' : 'al-text-indigo-600',
'al-absolute al-inset-y-0 al-right-0 al-flex al-items-center al-pr-4'
)}
>
<CheckIcon className="al-h-5 al-w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)
}