Clicks propagate to the underlying control

[adriano-repetti]

If trigger is a link <a> and on is click then click triggers both the popup and the navigation to the link (or its onclick, if any). For example:

<Popup trigger={<a onClick={this.handleClick}>click me</a>} />

Click to open is useful also for tooltip for touch devices (where hover isn't available and/or annoying/confusing for the user). We may mimic the hover behavior we see, for example, on Safari for iOS devices: first click always trigger the popup, second click when popup is open is bubbled down to the target control:

togglePopup(e) {
    if (e && !this.state.isOpen) {
        e.preventDefault();
    }
   
    // ...
}

We also need to change closePopup():

closePopup(e) {
    if (e) {
        e.preventDefault();
    }

    // ...
}

[yjose]

Hi @adriano-repetti , Thanks for your remarks, but I can't understand what you would demonstrate on your issue, can you please provide me a codesandbox test case with the Expected and Actual Behaviors ?

[adriano-repetti]

@yjose thank you for your quick reply. You can reproduce it simply with:

const Test = () => {
    const handleClick = () => console.info("Clicked!");
    return <Popup on="click" trigger={<a onClick={handleClick}>click me</a>} />;
};

When you click on the link the popup correctly opens but the event isn't stopped and it also triggers the onclick on <a>. There are few use-cases for this, for example when using your component as tooltip (maybe with on={[ "hover", "click" ]}) in a touch device: first click to show the tooltip and second click to navigate the link (it's what, for example, Safari on iOS does, by default, with the :hover event).

Expected behavior: when the click opens the popup then it stops propagating and it does not trigger any other action. Possibly a second click when the popup is already open goes through the normal path.

Actual behavior: the first click opens the popup but it also passed to the underlying control which may have a default behavior or another click handler attached.

Note: I don't know if to change this may be considered a breaking change but, in that case, you might expose a property (or a callback) to swallow events or not (default to the current behavior).

[yjose]

fixed :

<div onClick={() => console.log("I don't want to be called when trigger is clicked.")}>
    <Popup
      {...props}
      trigger={<button>Button Trigger</button>}
      onOpen={e => e.stopPropagation()}
      onClose={e => e.stopPropagation()}>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo
        voluptas s lore Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Nemo voluptas s loreLorem ipsum dolor sit amet consectetur
        adipisicing elit. Nemo voluptas s loreLorem ipsum dolor sit amet
        consectetur adipisicing elit. Nemo voluptas s lore
      </p>
    </Popup>
</div>

see #74

[TuanNamVu1997]

Hi @yjose, I think the typescript definitions have to be adjusted for onOpen or onClose, since an event is taken as an argument

[behzadmehrabi]

Hi, there's no event for onClose. version 2.0.4