michael/cordis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix overlays

Browse Source
This commit is contained in:
Michael Peters 2022-10-24 21:11:51 -07:00
parent 140a640865
commit aa90edb142
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/client/webapp/elements/require/react-helper.tsx
View File

@ -369,6 +369,7 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect(
const data = useRef< const data = useRef<
Map<number, { ref: RefObject<HTMLElement>; mouseDownTarget: Node | null; mouseUpTarget: Node | null }> Map<number, { ref: RefObject<HTMLElement>; mouseDownTarget: Node | null; mouseUpTarget: Node | null }>
>(new Map()); >(new Map());
const [hadMouseDown, setHadMouseDown] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
data.current.clear(); data.current.clear();
@ -380,7 +381,7 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect(
const handleClickOutside = useCallback( const handleClickOutside = useCallback(
(event: MouseEvent) => { (event: MouseEvent) => {
//console.log('current:', ref.current, 'target:', event.target, 'mouseDownTarget:', mouseRef.current.mouseDownTarget, 'mouseUpTarget:', mouseRef.current.mouseUpTarget); if (!hadMouseDown) return; // the click event can fire during the mouse up event that spawns the element that uses this hook
for (const [_idx, { ref, mouseDownTarget, mouseUpTarget }] of data.current) { for (const [_idx, { ref, mouseDownTarget, mouseUpTarget }] of data.current) {
if (!ref.current) return; if (!ref.current) return;
@ -393,11 +394,11 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect(
actionFunc(); actionFunc();
}, },
[actionFunc], [hadMouseDown, actionFunc],
); );
const handleMouseDown = useCallback((event: MouseEvent) => { const handleMouseDown = useCallback((event: MouseEvent) => {
//console.log('mouse down. Contains: ' + ref.current.contains(event.target as Node)); setHadMouseDown(true);
for (const [_idx, dataElement] of data.current) { for (const [_idx, dataElement] of data.current) {
if (!dataElement.ref.current) return; if (!dataElement.ref.current) return;
if (dataElement.ref.current.contains(event.target as Node)) { if (dataElement.ref.current.contains(event.target as Node)) {
@ -409,7 +410,6 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect(
}, []); }, []);
const handleMouseUp = useCallback((event: MouseEvent) => { const handleMouseUp = useCallback((event: MouseEvent) => {
//console.log('mouse up. Contains: ' + ref.current.contains(event.target as Node));
for (const [_idx, dataElement] of data.current) { for (const [_idx, dataElement] of data.current) {
if (!dataElement.ref.current) return; if (!dataElement.ref.current) return;
if (dataElement.ref.current.contains(event.target as Node)) { if (dataElement.ref.current.contains(event.target as Node)) {

2
src/client/webapp/elements/root.tsx
View File

@ -5,7 +5,7 @@ import App from './app';
const RootElement: FC = () => { const RootElement: FC = () => {
useInitRecoil(); useInitRecoil();
return <App /> return <App />;
}; };
export default RootElement; export default RootElement;