fix: revert changes to closeOnBlur and add closeOnClickOutside
This commit is contained in:
@@ -15,10 +15,16 @@ const NotesContextMenu = observer(({ appState }: Props) => {
|
|||||||
(open: boolean) => appState.notes.setContextMenuOpen(open)
|
(open: boolean) => appState.notes.setContextMenuOpen(open)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const closeOnClickOutside = (event: MouseEvent) => {
|
||||||
|
if (!contextMenuRef.current?.contains(event.target as Node)) {
|
||||||
|
appState.notes.setContextMenuOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.addEventListener('click', closeOnBlur);
|
document.addEventListener('click', closeOnClickOutside);
|
||||||
return () => {
|
return () => {
|
||||||
document.removeEventListener('click', closeOnBlur);
|
document.removeEventListener('click', closeOnClickOutside);
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -6,10 +6,7 @@ import { useRef } from 'preact/hooks';
|
|||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
appState: AppState;
|
appState: AppState;
|
||||||
closeOnBlur: (event: {
|
closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
|
||||||
relatedTarget: EventTarget | null;
|
|
||||||
target: EventTarget | null;
|
|
||||||
}) => void;
|
|
||||||
setLockCloseOnBlur: (lock: boolean) => void;
|
setLockCloseOnBlur: (lock: boolean) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -10,23 +10,16 @@ export function useCloseOnBlur(
|
|||||||
container: { current: HTMLDivElement },
|
container: { current: HTMLDivElement },
|
||||||
setOpen: (open: boolean) => void
|
setOpen: (open: boolean) => void
|
||||||
): [
|
): [
|
||||||
(event: {
|
(event: { relatedTarget: EventTarget | null }) => void,
|
||||||
relatedTarget: EventTarget | null;
|
|
||||||
target: EventTarget | null;
|
|
||||||
}) => void,
|
|
||||||
StateUpdater<boolean>
|
StateUpdater<boolean>
|
||||||
] {
|
] {
|
||||||
const [locked, setLocked] = useState(false);
|
const [locked, setLocked] = useState(false);
|
||||||
return [
|
return [
|
||||||
useCallback(
|
useCallback(
|
||||||
function onBlur(event: {
|
function onBlur(event: { relatedTarget: EventTarget | null }) {
|
||||||
relatedTarget: EventTarget | null;
|
|
||||||
target: EventTarget | null;
|
|
||||||
}) {
|
|
||||||
if (
|
if (
|
||||||
!locked &&
|
!locked &&
|
||||||
!container.current?.contains(event.relatedTarget as Node) &&
|
!container.current?.contains(event.relatedTarget as Node)
|
||||||
!container.current?.contains(event.target as Node)
|
|
||||||
) {
|
) {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user