onClickOutside doesn't prevent reopening

[thekashey]

onClickOutside doesn't prevent reopening

[theKashey]

Yeah, I hate this. Clicking external buttons, expecting this modal to be closed, is reopening it.
It's working quite simple - you click, the click got caught on capture phase, DOM got unblocked, and the initial click lands on the element you just clicked.

Known solutions:

• delay lock deactivation, when "click" is ended. Just by one useEffect - would be enough.
• prevent during onClickOutside - see #32. However, it does not always work, because that's not "React Event"
• (my favourite) use shards to include "Profile" button to the lock. As a result, when you will click on it - it would not be "outside", and 👍

[zoontek]

prevent during onClickOutside did not worked for me.

What I finally found (using portals):

<div id="app-root">
  <!-- … -->
</div>

<div id="modals-root">
  <FocusOn>
    <!-- a div that cover the page entirelly -->
    <div style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }} onClick={handleClose} />

    <div id="the-modal">
      <!-- … -->
    </div>
  </FocusOn>
</div>

[theKashey]

A bit complicated, but hopefully it works 👍

[pablen]

I'm trying something like this. Basically I check if the click was inside the trigger element before closing the modal. If that's the case I do nothing and let the trigger element handler toggle the modal visibility.

const [referenceElement, setReferenceElement] = React.useState(null)
const [isVisible, setIsVisible] = React.useState(false)

<button
  aria-expanded={isVisible}
  onClick={() => setIsVisible(s => !s)}
  ref={setReferenceElement}
>
  Click here
</button>


<FocusOn
  onClickOutside={event => {
    if (
      !referenceElement.contains(event.target) &&
      referenceElement !== event.target
    ) {
      setIsVisible(false)
    }
  }}
>
  <Modal />
</FocusOn>

Seems to work fine, but I would appreciate any heads up.

[theKashey]

@pablen your code can be simplified a little:

const referenceElement = React.useRef(null);
const [isVisible, setIsVisible] = React.useState(false)

<button
  aria-expanded={isVisible}
  onClick={() => setIsVisible(s => !s)}
  ref={setReferenceElement}
>
  Click here
</button>


<FocusOn
  shards={[referenceElement]} // 👈 now that button is considered as a part of FocusOn
  onClickOutside={() =>  setIsVisible(false)}
>
  <Modal />
</FocusOn>

[pablen]

Love it. Thanks!