Click outside component React - reactjs

I've use this method : Detect click outside React component
The problem is :
I have a component for a burger menu that as a state.
State determine if menu should be open or not.
The 2 components are not in the same container.
When I click burger, I just toggle state (!state).
When I click outside the menu I say state = false
But when I click the burger it now says (!state AND state = false) which cause the menu to stay open when clicking again to (try to) close it.
Burger icon code :
const onClick = () => {
setDeployMode(!deployMode);
dispatch(deployModeAsideMenu({ deployMode: !deployMode }));
};
<HamburgerButton
open={asideMenu.deployMode}
width={28.88}
height={25.27 / 1.5}
strokeWidth={3}
color={asideMenu.deployMode ? "var(--black)" : "var(--pink)"}
animationDuration={0.5}
onClick={onClick}
/>
Aside menu as a ref wrapper :
const [deployMode, setDeployMode] = useState(false);
const changeDeployMode = () => {
setDeployMode(!deployMode);
dispatch(deployModeAsideMenu({ deployMode: !deployMode }));
};
useEffect(() => {
setDeployMode(asideMenu.deployMode);
setLandscapeMode(asideMenu.landscapeMode);
}, [asideMenu]);
const useOutsideAlerter = ref => {
useEffect(() => {
const handleClickOutside = event => {
if (ref.current && !ref.current.contains(event.target) && window.innerWidth < 900) {
setDeployMode(false);
dispatch(deployModeAsideMenu({ deployMode: false }));
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [ref]);
};
const wrapperRef = useRef(null);
useOutsideAlerter(wrapperRef);
// asideMenu comp
<AsideMenuContainer
ref={wrapperRef}>
// as other code here
<AsideMenuContainer />

Related

handle click outside event not updating UI base on prev state

Function for click outside detection -
const useClickOutside = <T extends HTMLElement>(initialIsVisible: boolean) => {
const [isVisibleState, setIsVisibleState] = useState<boolean>(initialIsVisible);
const ref = useRef<T>(null);
const handleClickOutside = (event: MouseEvent) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
setIsVisibleState(() => false);
}
};
const toggleVisibility = () => setIsVisibleState((prev) => !prev);
useEffect(() => {
document.addEventListener('click', handleClickOutside, true);
return () => {
document.removeEventListener('click', handleClickOutside, true);
};
}, []);
return { ref, isVisible: isVisibleState, toggleVisibility };
};
Usage -
const {
ref,
isVisible,
toggleVisibility,
} = useClickOutside<HTMLDivElement>(false);
I have a click event for the tooltip opening, looks like this -
Opening is working, here is the code -
<ThreeDots onClick={props.toggleVisibility} />
After firing the click event -
When clicking outside, the tooltip is closed.
The problem is when I click on the <ThreeDots onClick={props.toggleVisibility} /> again -
It does not close the tooltip. I checked the isVisibleState and it's set to false.

clickOutside hook doesn't work on 2nd click

I have a list of items and want to include an icon that opens a modal for a user to choose 'edit' or 'delete' the item.
And I put this code inside the ActionModal so that only clicked modal would open by comparing the ids.
The problem is, clicking outside the element work only one time and after that, nothing happens when the ellipsis button clicked. I think it's probably because the state inside ActionModal, 'modalOpen' remains false, but I'm stuck here and don't know how to handle it.
if (!isOpen.show || isOpen.id !== id || !modalOpen) return null;
const List = () => {
const [modal, setModal] = useState({ id: null, show: false });
const onDialogClick = (e) => {
setModal((prevState) => {
return { id: e.target.id, show: !prevState.show };
});
};
const journals = journals.map((journal) => (
<StyledList key={journal.id}>
<Option>
<FontAwesomeIcon
icon={faEllipsisV}
id={journal.id}
onClick={onDialogClick}
/>
<ActionModal
actions={['edit', 'delete']}
id={journal.id}
isOpen={modal}
></ActionModal>
</Option>
const ActionModal = ({ id, actions, isOpen }) => {
const content = actions.map((action) => <li key={action}>{action}</li>);
const ref = useRef();
const [modalOpen, setModalOpen] = useState(true);
useOnClickOutside(ref, () => setModalOpen(!modalOpen));
if (!isOpen.show || isOpen.id !== id || !modalOpen) return null;
return (
<StyledDiv>
<ul ref={ref}>{content}</ul>
</StyledDiv>
);
};
function useOnClickOutside(ref, handler) {
useEffect(() => {
const listener = (event) => {
if (!ref.current || ref.current.contains(event.target)) {
return;
}
handler(event);
};
document.addEventListener('mousedown', listener);
document.addEventListener('touchstart', listener);
return () => {
document.removeEventListener('mousedown', listener);
document.removeEventListener('touchstart', listener);
};
}, [ref, handler]);
}
So fistly you do not need to include ref and handler as dependencies in useEffect hook, because evvent listeners are set on initial load, there is no need to set it on every value change.
I think I don't fully understand your situation. So you need to close the modal after it is opened by pressing outside it? or you want to be able to press that 3 dots icon when it's opened?
P.S.
I little bit condesed your code. Try this and let me know what is happening. :)
const ActionModal = ({ id, actions, isOpen, setOpen }) => {
const ref = useRef();
const content = actions.map((action) => <li key={action}>{action}</li>);
useEffect(() => {
const listener = (event) => {
if (ref.current || !ref.current.contains(event.target)) {
setOpen({...open, show: false});
}
};
document.addEventListener('mousedown', listener);
document.addEventListener('touchstart', listener);
return () => {
document.removeEventListener('mousedown', listener);
document.removeEventListener('touchstart', listener);
};
}, []);
return (
<StyledDiv>
<div ref={ref}>
<ul>{content}</ul>
</div>
</StyledDiv>
);
};

Run event handler functions synchronously after a React state change

I know useEffect allows you to run a function after state is updated.
However, I want to run different logic after a state change based on which different event handler causes a state change.
Context
I have a Parent component that shows or hides a child DialogModal component based on the [isDialogShown, setIsDialogShown] = useState(false) in Parent.
When isDialogShown
The Parent passes setIsDialogShown and 2 event handler callbacks to DialogModal: onDismiss (which adds focus to some element) and onConfirm (which adds focus to another element).
When onDismiss or onConfirm on the DialogModal is pressed, setIsDialogShown(false) should run first to hide the DialogModal, then run the respective callbacks to focus on differing elements of the page.
const Parent = () => {
const [isDialogShown, setIsDialogShown] = useState(false);
// These need to run after Dialog is closed.
// In other words, after isDialogShown state is updated to false.
const focusOnElementA = () => { .... };
const focusOnElementB = () => { .... };
const handleDismiss = () => {
setIsDialogShown(false);
focusOnElementA() // Needs to run after state has changed to close the modal
}
const handleConfirm = () => {
setIsDialogShown(false);
focusOnElementB() // Needs to run after state has changed to close the modal
}
return (
<>
<Button onClick={() => { setIsDialogShown(true) }>Open dialog</Button>
<DialogModal
isOpen={isDialogShown}
onDismiss={handleDismiss}
onConfirm={handleConfirm}
/>
</>
)
}
What's the right pattern for dealing with this scenario?
I would use a separate state for the elements A and B to trigger them by in an additional effect. Enqueueing the toggle A/B state ensures the effect handles the update to call the focus A/B handles on the next render after the modal has closed.
const Parent = () => {
const [isDialogShown, setIsDialogShown] = useState(false);
const [toggleA, setToggleA] = useState(false);
const [toggleB, setToggleB] = useState(false);
useEffect(() => {
if (toggleA) {
focusOnElementA();
setToggleA(false);
}
if (toggleB) {
focusOnElementB();
setToggleB(false);
}
}, [toggleA, toggleB]);
const focusOnElementA = () => { .... };
const focusOnElementB = () => { .... };
const handleDismiss = () => {
setIsDialogShown(false);
setToggleA(true);
}
const handleConfirm = () => {
setIsDialogShown(false);
setToggleB();
}
return (
<>
<Button onClick={() => { setIsDialogShown(true) }>Open dialog</Button>
<DialogModal
isOpen={isDialogShown}
onDismiss={handleDismiss}
onConfirm={handleConfirm}
/>
</>
)
}
A slight difference to Drew's answer but achieved using the same tools (useEffect).
// Constants for dialog state
const DIALOG_CLOSED = 0;
const DIALOG_OPEN = 1;
const DIALOG_CONFIRM = 2;
const DIALOG_CANCELLED = 3;
const Parent = () => {
// useState to keep track of dialog state
const [dialogState, setDialogState] = useState(DIALOG_CLOSED);
// Set dialog state to cancelled when dismissing.
const handleDismiss = () => {
setDialogState(DIALOG_CANCELLED);
}
// set dialog state to confirm when confirming.
const handleConfirm = () => {
setDialogState(DIALOG_CONFIRM);
}
// useEffect that triggers on dialog state change.
useEffect(() => {
// run code when confirm was selected and dialog is closed.
if (dialogState === DIALOG_CONFIRM) {
const focusOnElementB = () => { .... };
focusOnElementB()
}
// run code when cancel was selected and dialog is closed.
if (dialogState === DIALOG_CANCELLED) {
const focusOnElementA = () => { .... };
focusOnElementA()
}
}, [dialogState])
return (
<>
<Button onClick={() => { setDialogState(DIALOG_OPEN) }}>Open dialog</Button>
<DialogModal
isOpen={dialogState === DIALOG_OPEN}
onDismiss={handleDismiss}
onConfirm={handleConfirm}
/>
</>
)
}
You should add another state for which element was triggered and then trigger the effect when the states change:
const [action, setAction] = useState('');
// ...code
const handleDismiss = () => {
setAction('dismiss');
setIsDialogShown(false);
}
const handleConfirm = () => {
setAction('confirm');
setIsDialogShown(false);
}
// Add dependencies to useEffect and it will run only when the states change
useEffect(() => {
if(!isDialogShown) {
if(action === 'dismiss') {
focusOnElementA()
} else {
focusOnElementB()
}
}
}, [action, isDialogShown])

React: Saved state updates the DOM but not the console

When I click, I set the saveMouseDown state to 1, when I release I set it to 0.
When I click and move the mouse I log out mouseDown and it's 0 even when my mouse is down? Yet on the screen it shows 1
import React, { useEffect, useRef, useState } from 'react';
const Home: React.FC = () => {
const [mouseDown, saveMouseDown] = useState(0);
const [canvasWidth, saveCanvasWidth] = useState(window.innerWidth);
const [canvasHeight, saveCanvasHeight] = useState(window.innerHeight);
const canvasRef = useRef<HTMLCanvasElement>(null);
let canvas: HTMLCanvasElement;
let ctx: CanvasRenderingContext2D | null;
const addEventListeners = () => {
canvas.addEventListener('mousedown', (e) => { toggleMouseDown(); }, true);
canvas.addEventListener('mouseup', (e) => { toggleMouseUp(); }, true);
};
const toggleMouseDown = () => saveMouseDown(1);
const toggleMouseUp = () => saveMouseDown(0);
const printMouse = () => console.log(mouseDown);
// ^------ Why does this print the number 1 and the 2x 0 and then 1... and not just 1?
const removeEventListeners = () => {
canvas.removeEventListener('mousedown', toggleMouseDown);
canvas.removeEventListener('mouseup', toggleMouseUp);
};
useEffect(() => {
if (canvasRef.current) {
canvas = canvasRef.current;
ctx = canvas.getContext('2d');
addEventListeners();
}
return () => removeEventListeners();
}, []);
useEffect(() => {
if (canvasRef.current) {
canvas = canvasRef.current;
canvas.addEventListener('mousemove', (e) => { printMouse(); }, true );
}
return () => canvas.removeEventListener('mousemove', printMouse);
}, [mouseDown, printMouse]);
return (
<React.Fragment>
<p>Mouse Down: {mouseDown}</p>
{/* ^------ When this does print 1? */}
<canvas
id='canvas'
ref={canvasRef}
width={canvasWidth}
height={canvasHeight}
/>
</React.Fragment>
);
};
export { Home };
You only add the move listener once when the component mounted, thus enclosing the initial mouseDown value.
Try using a second useEffect hook to specifically set/update the onMouseMove event listener when the mouseDown state changes. The remove eventListener needs to specify the same callback.
useEffect(() => {
if (canvasRef.current) {
canvas = canvasRef.current;
canvas.addEventListener('mousemove', printMouse, true );
}
return () => canvas.removeEventListener('mousemove', printMouse);;
}, [mouseDown, printMouse]);
It may be simpler to attach the event listeners directly on the canvas element, then you don't need to worry about working with enclosed stale state as much with the effect hooks.
<canvas
onMouseDown={() => setMouseDown(1)}
onMouseUp={() => setMouseDown(0)}
onMouseMove={printMouse}
width={canvasWidth}
height={canvasHeight}
/>

React memory leaks warning with using a stateful button in a dialog or alert in Material UI

I am using Material UI for a component library and noticed when I click a button within a Dialog or Alert (both components manage states of open/closed), I get a memory leaks warning. I am unsure of how to fix the problem here. The button component uses state to create an active class when clicked, which uses a setTimeout onClick to make the button click more visible/longer lasting in the UI.
This is the button component:
function Button({
classes,
className,
onClick,
...props
}) {
let [active, setActive] = useState(false);
let handleClick = e => {
e.persist();
setActive(true);
setTimeout(() => {
setActive(false);
}, 250);
if (typeof onClick === "function") onClick(e);
};
return (
<MuiButton
variant={finalVariant(variant)}
className={`${active ? "Mui-active" : ""} ${className}`}
classes={buttonClasses}
onClick={handleClick}
{...props}
/>
);
}
let containedStyle = color => ({
"&:active": {
backgroundColor: color.dark
},
"&.Mui-active": {
backgroundColor: color.dark
}
});
This is the memory leaks warning I get when I click a button inside either an Alert or Dialog component:
index.js:1437 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
I've tried using useEffect as suggested by the warning to clear the active state but haven't had luck. Here is a demo of what happens when I use a custom button built with MUI that uses hooks to manage state when the button is used in a dialog or alert https://codesandbox.io/s/traffic-light-using-hooks-zpfrc?fontsize=14&hidenavigation=1&theme=dark
This happens because your handleClick function uses setTimeout:
let handleClick = e => {
e.persist();
setActive(true);
setTimeout(() => {
setActive(false);
}, 250);
if (typeof onClick === "function") onClick(e);
};
To update the state.
The component is getting unmounted by the parent component when onClick is called, but there is still a subscription (your timeout) kept alive.
This isn't really a big deal if it's a one-off event, like in this case. It's a warning, not an error. The main purpose of this warning is to let you know if you are keeping subscriptions or references around for a long time after something is unmounted.
There are a few work-arounds to get rid of the warning by setting a flag if the component is unmounted and, if the flag is set, not updating state, but that doesn't really solve the problem that there is a reference to a component kept around after it's unmounted.
A better way of resolving this problem would be to keep a reference to the timeout using React.useRef() and then clearing it in useEffect(), like this:
function Button({
classes,
className,
onClick,
...props
}) {
let [active, setActive] = useState(false);
+ const timeout = React.useRef(undefined);
+ React.useEffect(() => {
+ return () => {
+ if (timeout.current !== undefined) {
+ clearTimeout(timeout.current);
+ }
+ }
+ }, []);
let handleClick = e => {
e.persist();
setActive(true);
- setTimeout(() => {
+ timeout.current = setTimeout(() => {
setActive(false);
}, 250);
if (typeof onClick === "function") onClick(e);
};
return (
<MuiButton
variant={finalVariant(variant)}
className={`${active ? "Mui-active" : ""} ${className}`}
classes={buttonClasses}
onClick={handleClick}
{...props}
/>
);
}
This could be encapsulated in a hook like so:
function useSafeTimeout() {
const timeouts = React.useRef([])
React.useEffect(() => {
return () => {
timeouts.forEach(timeout => {
clearTimeout(timeout)
})
}
}, [])
return React.useCallback((fn, ms, ...args) => {
const cancel = setTimeout(fn, ms, ...args)
timeouts.current.push(cancel)
}, [])
}
And used in this manner:
function Button({
classes,
className,
onClick,
...props
}) {
let [active, setActive] = useState(false);
+ const setTimeout = useSafeTimeout();
let handleClick = e => {
e.persist();
setActive(true);
setTimeout(() => {
setActive(false);
}, 250);
if (typeof onClick === "function") onClick(e);
};
return (
<MuiButton
variant={finalVariant(variant)}
className={`${active ? "Mui-active" : ""} ${className}`}
classes={buttonClasses}
onClick={handleClick}
{...props}
/>
);
}
Here is my solution for the problem:
function Button({
classes,
className,
onClick,
...props
}) {
let [active, setActive] = useState(false);
let timeoutIds = useRef([]);
let registerTimeout = (f, ms) => {
let timeoutId = setTimeout(f, ms);
timeoutIds.current.push(timeoutId);
};
let handleClick = e => {
e.persist();
setActive(true);
if (typeof onClick === "function") onClick(e);
};
let cleanup = () => {
timeoutIds.current.forEach(clearTimeout);
};
useEffect(() => {
if (active === true) {
registerTimeout(() => setActive(false), 250);
}
return cleanup;
}, [active]);
return (
<MuiButton
variant={finalVariant(variant)}
className={`${active ? "Mui-active" : ""} ${className}`}
classes={buttonClasses}
onClick={handleClick}
{...props}
/>
);
}

Resources