Skip to content

Commit

Permalink
Merge pull request #1005 from siiddhantt/fix/modals-and-sidebar
Browse files Browse the repository at this point in the history
fix: modals close on clicking outside
  • Loading branch information
dartpain authored Jun 23, 2024
2 parents b70fc11 + e16e269 commit 35b29a0
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 3 deletions.
18 changes: 18 additions & 0 deletions frontend/src/components/Dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,26 @@ function Dropdown({
onDelete?: (value: string) => void;
placeholder?: string;
}) {
const dropdownRef = React.useRef<HTMLDivElement>(null);
const [isOpen, setIsOpen] = React.useState(false);
const borderRadius = rounded === 'xl' ? 'rounded-xl' : 'rounded-3xl';
const borderTopRadius = rounded === 'xl' ? 'rounded-t-xl' : 'rounded-t-3xl';

const handleClickOutside = (event: MouseEvent) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setIsOpen(false);
}
};

React.useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
return (
<div
className={[
Expand All @@ -53,6 +70,7 @@ function Dropdown({
: 'relative align-middle',
size,
].join(' ')}
ref={dropdownRef}
>
<button
onClick={() => setIsOpen(!isOpen)}
Expand Down
20 changes: 18 additions & 2 deletions frontend/src/components/SourceDropdown.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from 'react';
import Trash from '../assets/trash.svg';
import Arrow2 from '../assets/dropdown-arrow.svg';
import { Doc } from '../preferences/preferenceApi';
Expand All @@ -21,6 +22,8 @@ function SourceDropdown({
handleDeleteClick,
}: Props) {
const dispatch = useDispatch();
const { t } = useTranslation();
const dropdownRef = React.useRef<HTMLDivElement>(null);
const embeddingsName =
import.meta.env.VITE_EMBEDDINGS_NAME ||
'huggingface_sentence-transformers/all-mpnet-base-v2';
Expand All @@ -30,10 +33,23 @@ function SourceDropdown({
setIsDocsListOpen(false);
};

const { t } = useTranslation();
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setIsDocsListOpen(false);
}
};

React.useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
return (
<div className="relative w-5/6 rounded-3xl">
<div className="relative w-5/6 rounded-3xl" ref={dropdownRef}>
<button
onClick={() => setIsDocsListOpen(!isDocsListOpen)}
className={`flex w-full cursor-pointer items-center border border-silver bg-white p-[14px] dark:bg-transparent ${
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/conversation/Conversation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export default function Conversation() {
<div
onWheel={handleUserInterruption}
onTouchMove={handleUserInterruption}
className="flex h-[90%] w-full justify-center overflow-y-auto p-4 md:h-[84vh]"
className="flex h-[90%] w-full justify-center overflow-y-auto p-4 md:h-[83vh]"
>
{queries.length > 0 && !hasScrolledToLast && (
<button
Expand Down

0 comments on commit 35b29a0

Please sign in to comment.