React onBlur detect

Question

I have two react components, one is to display the name and the circle and another is a sidebar. When I click the circle component, the sidebar will show. And when I click the outside of the circle component, the sidebar will be hidden.

I was set a onBlur to the circle component, so when I click outside of the element, the sidebar will be hidden.

However, there is a problem in this way that when I switch from Name A to Name B, the sidebar will be hidden first and then show.

Is there a way I can keep the sidebar open when I switch from Name A to Name B and the sidebar will be open if I click outside of the circle element without swtich?

The below is part of my code logic:

For the circle component:

const handleParticipantOnClick = () => {
    dispatch(oepnSidebar())
}

const handleParticipantOnBlur = () => {
    dispatch(closeSidebar())
}

<div onBlur={handleParticipantOnBlur} onClick={handleParticipantOnClick}>
    <ProgressRing/>
</div>

The sidebar will be show/close based on the method dispatch, that action only update the open status of the sidebar.

Does this answer your question? [ReactJS - How to get onFocus and onBlur to work](https://stackoverflow.com/questions/46896776/reactjs-how-to-get-onfocus-and-onblur-to-work) — hgb123, Jul 02 '20 at 03:20

score 0 · Answer 1 · answered Jul 03 '20 at 10:29

here is what I do to resolve this:

Assign all the Name components to a Ref (the ref will be a list)
onBlur function will check if user clicking on other names or not, if not, go ahead and close the sidebar, if yes, do nothing.

Code Sandbox example: https://codesandbox.io/s/unruffled-bash-2slgm?file=/src/App.js

you can comment on the code from lines 19 to 21 to see the difference.

Hope this helps :D

React onBlur detect

1 Answers1