Skip to content

Commit

Permalink
fix: popover display issue of safari (#1962)
Browse files Browse the repository at this point in the history
  • Loading branch information
@OgDev-01
OgDev-01 authored Oct 23, 2023
1 parent 24ca123 commit afe5ab2
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 23 deletions.
30 changes: 26 additions & 4 deletions components/molecules/ContributorHighlight/contributor-highlight-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,8 @@ const ContributorHighlightCard = ({
const { follow, unFollow, isError } = useFollowUser(
dropdownOpen && loggedInUser && loggedInUser?.user_metadata.user_name !== user ? user : ""
);
const [popoverOpen, setPopoverOpen] = useState(false);
const popoverContentRef = React.useRef<HTMLDivElement>(null);

const [date, setDate] = useState<Date | undefined>(shipped_date ? new Date(shipped_date) : undefined);

Expand Down Expand Up @@ -167,6 +169,20 @@ const ContributorHighlightCard = ({
return !matches ? false : true;
};

const handleClickOutsidePopoverContent = (e: MouseEvent) => {
if (popoverContentRef.current && !popoverContentRef.current.contains(e.target as Node)) {
setPopoverOpen(false);
}
};

useEffect(() => {
// This closes the popover when user clicks outside of it's content
document.addEventListener("mousedown", handleClickOutsidePopoverContent);
return () => {
document.removeEventListener("mousedown", handleClickOutsidePopoverContent);
};
}, [popoverOpen]);

const getEmojiReactors = (reaction_users: string[]) => {
if (!Array.isArray(reaction_users)) return "";

Expand Down Expand Up @@ -659,20 +675,26 @@ const ContributorHighlightCard = ({
></Textarea>
<div className="flex items-center justify-between py-1 pl-3">
<Tooltip direction="top" content="Pick a date">
<Popover>
<Popover open={popoverOpen}>
<PopoverTrigger asChild>
<button className="flex items-center gap-2 text-base text-light-slate-9">
<button
onClick={() => setPopoverOpen(!popoverOpen)}
className="flex items-center gap-2 text-base text-light-slate-9"
>
<BsCalendar2Event className="text-light-slate-9" />
{date && <span className="text-xs">{format(date, "PPP")}</span>}
</button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0 bg-white pointer-events-auto">
<PopoverContent ref={popoverContentRef} className="w-auto p-0 bg-white pointer-events-auto">
<Calendar
// block user's from selecting a future date
toDate={new Date()}
mode="single"
selected={date}
onSelect={setDate}
onSelect={(date) => {
setDate(date);
setPopoverOpen(false);
}}
className="border rounded-md"
/>
</PopoverContent>
Expand Down
59 changes: 40 additions & 19 deletions components/molecules/HighlightInput/highlight-input-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,8 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
const [errorMsg, setError] = useState("");
const [highlightSuggestions, setHighlightSuggestions] = useState<any[]>([]);
const [loadingSuggestions, setLoadingSuggestions] = useState<boolean>(false);
const [createPopoverOpen, setCreatePopoverOpen] = useState(false);
const popoverContentRef = useRef<HTMLDivElement>(null);
const generateSummary = useRef(false);

const fetchAllUserHighlights = async (page: number): Promise<DbHighlight[]> => {
Expand Down Expand Up @@ -150,6 +152,12 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
setBodyText(value);
};

const handleClickOutsidePopoverContent = (e: MouseEvent) => {
if (popoverContentRef.current && !popoverContentRef.current.contains(e.target as Node)) {
setCreatePopoverOpen(false);
}
};

useEffect(() => {
// disable scroll when form is open
if (isFormOpenMobile) {
Expand All @@ -159,6 +167,14 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
}
}, [isFormOpenMobile]);

useEffect(() => {
// This closes the popover when user clicks outside of it's content
document.addEventListener("mousedown", handleClickOutsidePopoverContent);
return () => {
document.removeEventListener("mousedown", handleClickOutsidePopoverContent);
};
}, []);

// get the user's latest pull requests and issues that don't yet have highlights associated with them
// and suggest them to the user when they are creating a highlight.
useEffect(() => {
Expand Down Expand Up @@ -555,20 +571,29 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
<div className="flex">
<div className="flex w-full gap-1 items-center">
<Tooltip direction="top" content="Pick a date">
<Popover>
<Popover open={createPopoverOpen}>
<PopoverTrigger asChild>
<button className="flex items-center gap-2 p-2 text-base rounded-full text-light-slate-9 bg-light-slate-3">
<button
type="button"
onClick={() => {
setCreatePopoverOpen(true);
}}
className="flex items-center gap-2 p-2 text-base rounded-full z-10 text-light-slate-9 bg-light-slate-3 cursor-pointer"
>
<FiCalendar className="text-light-slate-11" />
{date && <span className="text-xs">{format(date, "PPP")}</span>}
</button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0 bg-white pointer-events-auto">
<PopoverContent ref={popoverContentRef} className="w-auto p-0 bg-white pointer-events-auto">
<Calendar
// block user's from selecting a future date
toDate={new Date()}
mode="single"
selected={date}
onSelect={setDate}
onSelect={(date) => {
setDate(date);
setCreatePopoverOpen(false);
}}
className="border rounded-md"
/>
</PopoverContent>
Expand Down Expand Up @@ -656,24 +681,20 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
<div className="flex w-full gap-2">
{suggestion.type === "pull_request" && (
<BiGitMerge
className={`
text-xl
${suggestion.status_reason === "open" ? "text-green-600" : "text-purple-600"}
`}
className={`text-xl${
suggestion.status_reason === "open" ? "text-green-600" : "text-purple-600"
}`}
/>
)}
{suggestion.type === "issue" && (
<VscIssues
className={`
text-xl
${
suggestion.status === "open"
? "text-green-600"
: suggestion.status_reason === "not_planned"
? "text-red-600"
: "text-purple-600"
}
`}
className={`text-xl${
suggestion.status === "open"
? "text-green-600"
: suggestion.status_reason === "not_planned"
? "text-red-600"
: "text-purple-600"
}`}
/>
)}
<p
Expand Down Expand Up @@ -818,7 +839,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
<FiCalendar className="text-light-slate-11" />
</button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0 bg-white">
<PopoverContent ref={popoverContentRef} className="w-auto p-0 bg-white">
<Calendar
// block user's from selecting a future date
toDate={new Date()}
Expand Down

0 comments on commit afe5ab2

Please sign in to comment.