Skip to content

Commit

Permalink
2401 bug team selector collapse does not work (#2459)
Browse files Browse the repository at this point in the history
* Mod1

bug: dropdown arrow

* Mod1

bug: dropdown arrow

* Mod1

bug: dropdown arrow

* Mod1

bug: dropdowns disable revert
Anishali2 authored Apr 29, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent d5b8c16 commit 30a3bbd
Showing 1 changed file with 19 additions and 3 deletions.
22 changes: 19 additions & 3 deletions apps/web/lib/components/dropdown.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import { Card } from './card';
import { SpinnerLoader } from './loader';
import { useTranslations } from 'next-intl';
import { ScrollArea } from '@components/ui/scroll-bar';

export type DropdownItem<D = Record<string | number | symbol, any>> = {
key: React.Key;
Label: (props: { active?: boolean; selected?: boolean }) => JSX.Element;
@@ -49,16 +48,31 @@ export function Dropdown<T extends DropdownItem>({
setSearchText
}: Props<T>) {
const t = useTranslations();
const [open, setOpen] = React.useState(false);
return (
<div className={clsxm('rounded-xl', className)}>
<Listbox value={Value} onChange={onChange} disabled={publicTeam}>
{open && (
<div
onClick={() => setOpen(false)}
className="h-screen w-screen absolute bg-transparent top-0 left-0"
></div>
)}
<Listbox
value={Value}
onChange={(e: T) => {
onChange && onChange(e);
setOpen(false);
}}
disabled={publicTeam}
>
<Listbox.Button
className={clsxm(
'input-border',
'w-full flex justify-between rounded-xl px-3 py-2 text-sm items-center',
'font-normal outline-none',
buttonClassName
)}
onClick={() => setOpen(!open)}
style={buttonStyle}
>
<div title={Value?.itemTitle} className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
@@ -72,7 +86,8 @@ export function Dropdown<T extends DropdownItem>({
) : !publicTeam ? (
<ChevronDownIcon
className={clsxm(
'ml-2 h-5 w-5 dark:text-white transition duration-150 ease-in-out group-hover:text-opacity-80'
'ml-2 h-5 w-5 dark:text-white transition duration-150 ease-in-out group-hover:text-opacity-80',
open && 'transform rotate-180'
)}
aria-hidden="true"
/>
@@ -89,6 +104,7 @@ export function Dropdown<T extends DropdownItem>({
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
className={clsxm('absolute z-40')}
show={open}
>
<Listbox.Options
className={clsxm(

0 comments on commit 30a3bbd

Please sign in to comment.