binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2783]fix: dropdown visibility in onboarding (#6329)

Browse source 
* fix: dropdown visibility on scroll to bottom

* chore: removed unused variables
This commit is contained in:
Vamsi Krishna 2025-01-08 13:10:09 +05:30 • committed by GitHub
parent 3691cef351
commit bb71e60fcb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 46 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

50
web/core/components/onboarding/invite-members.tsx
View file

@ -15,8 +15,9 @@ import {
useForm,
} from "react-hook-form";
// icons
import { usePopper } from "react-popper";
import { Check, ChevronDown, Plus, XCircle } from "lucide-react";
import { Listbox, Transition } from "@headlessui/react";
import { Listbox } from "@headlessui/react";
// types
import { IUser, IWorkspace } from "@plane/types";
// ui
@ -28,7 +29,6 @@ import { ROLE, ROLE_DETAILS } from "@/constants/workspace";
import { getUserRole } from "@/helpers/user.helper";
// hooks
import { useEventTracker } from "@/hooks/store";
import useDynamicDropdownPosition from "@/hooks/use-dynamic-dropdown";
// plane web constants
import { EUserPermissions } from "@/plane-web/constants/user-permissions";
// services
@ -101,12 +101,8 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
watch,
} = props;
const buttonRef = useRef<HTMLButtonElement>(null);
const dropdownRef = useRef<HTMLDivElement>(null);
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
useDynamicDropdownPosition(isDropdownOpen, () => setIsDropdownOpen(false), buttonRef, dropdownRef);
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const email = watch(`emails.${index}.email`);
@ -134,6 +130,18 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
}
};
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "bottom-end",
modifiers: [
{
name: "preventOverflow",
options: {
padding: 12,
},
},
],
});
return (
<div>
<div className="group relative grid grid-cols-10 gap-4">
@ -177,15 +185,13 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
value={value}
onChange={(val) => {
onChange(val);
setIsDropdownOpen(false);
setValue(`emails.${index}.role_active`, true);
}}
className="w-full flex-shrink-0 text-left"
>
<Listbox.Button
type="button"
ref={buttonRef}
onClick={() => setIsDropdownOpen((prev) => !prev)}
ref={setReferenceElement}
className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-sm border-[0.5px] border-onboarding-border-100"
>
<span
@ -207,23 +213,16 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
/>
</Listbox.Button>
<Transition
show={isDropdownOpen}
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
<Listbox.Options as="div">
<div
className="p-2 absolute space-y-1 z-10 mt-1 h-fit w-48 sm:w-60 rounded-md border border-onboarding-border-100 bg-onboarding-background-200 shadow-sm focus:outline-none"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<Listbox.Options
ref={dropdownRef}
className="fixed z-10 mt-1 h-fit w-48 sm:w-60 overflow-y-auto rounded-md border border-onboarding-border-100 bg-onboarding-background-200 shadow-sm focus:outline-none"
>
<div className="space-y-1 p-2">
{Object.entries(ROLE_DETAILS).map(([key, value]) => (
<Listbox.Option
as="div"
key={key}
value={parseInt(key)}
className={({ active, selected }) =>
@ -245,7 +244,6 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
))}
</div>
</Listbox.Options>
</Transition>
</Listbox>
)}
/>