fix: revert changes to closeOnBlur and add closeOnClickOutside

This commit is contained in:
Antonella Sgarlatta
2021-05-04 15:44:12 -03:00
parent 15db4767f5
commit 45357c1976
3 changed files with 12 additions and 16 deletions

View File

@@ -15,10 +15,16 @@ const NotesContextMenu = observer(({ appState }: Props) => {
(open: boolean) => appState.notes.setContextMenuOpen(open)
);
const closeOnClickOutside = (event: MouseEvent) => {
if (!contextMenuRef.current?.contains(event.target as Node)) {
appState.notes.setContextMenuOpen(false);
}
};
useEffect(() => {
document.addEventListener('click', closeOnBlur);
document.addEventListener('click', closeOnClickOutside);
return () => {
document.removeEventListener('click', closeOnBlur);
document.removeEventListener('click', closeOnClickOutside);
};
});

View File

@@ -6,10 +6,7 @@ import { useRef } from 'preact/hooks';
type Props = {
appState: AppState;
closeOnBlur: (event: {
relatedTarget: EventTarget | null;
target: EventTarget | null;
}) => void;
closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
setLockCloseOnBlur: (lock: boolean) => void;
};

View File

@@ -10,23 +10,16 @@ export function useCloseOnBlur(
container: { current: HTMLDivElement },
setOpen: (open: boolean) => void
): [
(event: {
relatedTarget: EventTarget | null;
target: EventTarget | null;
}) => void,
(event: { relatedTarget: EventTarget | null }) => void,
StateUpdater<boolean>
] {
const [locked, setLocked] = useState(false);
return [
useCallback(
function onBlur(event: {
relatedTarget: EventTarget | null;
target: EventTarget | null;
}) {
function onBlur(event: { relatedTarget: EventTarget | null }) {
if (
!locked &&
!container.current?.contains(event.relatedTarget as Node) &&
!container.current?.contains(event.target as Node)
!container.current?.contains(event.relatedTarget as Node)
) {
setOpen(false);
}