Popup closing Modal??

[aryzle]

Steps

I have a popup that has a edit button that then when clicked opens up a modal with a form in it to edit that thing. Here is the popup code:

<Popup
  trigger={
    <Label image basic color={car ? 'teal' : 'blue'}>
      <img src={chrisJPG} alt="chris" />
      {name}@{city}
      {earliestDepartureDateTime &&
        !car && (
          <Label.Detail>
            {moment(earliestDepartureDateTime).format('ddd h:mm a')}
          </Label.Detail>
        )}
    </Label>
  }
  content={
    <PassengerCard passenger={passengerData} eventId={eventId} />
  }
  on="click"
  hideOnScroll
/>

Expected Result

For the popup to stay open or even close, idc about that, but once the modal opens I can click around on it and edit it and submit the form.

Actual Result

If I click anywhere, the modal and popup close. I'm thinking this has to do with the popup closing since I clicked away and for some reason this closes the modal as well.

Version

0.74.2

Testcase

[gagahkharismanuary]

I think, you're forgot to put your testcase in jsfiddle or codepen ?
Let us see your modal result

[levithomason]

Likely a duplicate of #1580. Please provide the requested codepen for testing, fork this http://codepen.io/levithomason/pen/ZpBaJX.

Will reopen if we get a codepen and confirmation that this is not a duplicate.

[aryzle]

Thanks, through the issues here I figured out I needed to use closeOnDocumentClick={false}

[kunokdev]

Not fixed at all. I tried many hacks to solve this but I have issues all around.
E.g.

closePopup(e) {
    let path = e.target.parentElement
    let isModalClicked = false
    while (path) {
      if (path.className.includes("ui modal transition visible active"))
        isModalClicked = true
      if (path.parentElement) path = path.parentElement
      else path = null
    }
    if (true) this.setState({ isOpen: false })
  }

This would prevent modals from being closed but popup still remains open then. In any other case, modal always gets closed when popup is closed (even tho both are controlled components). They are totally separated components, but perhaps in the background semantic-ui-react uses shared state or something.

So solution for me was to write my own modal component from scratch... 😞

[crowdozer]

This isn't a duplicate and it still exists. Passing closeOnDocumentClick={false} will not solve the issue for any modals that exist within a Popup's content that should auto close..

https://codepen.io/anon/pen/KEoOqE

It could be entirely possible that it is working as intended and we're just assumed to not try to nest things inside of popups. Idk.

[kunokdev]

@crwdzr it is very likely that parent component unmounts, therefore there is no way to prevent your child (popup) component to unmount as well.

[crowdozer]

That's what my assumption was too. I would say that it's also largely because it's not possible for the popup to ignore clicks in things being rendered out through portals. That would explain why nesting of multiple popups, although listed as a feature in the docs, doesn't actually work with on="click" popups once you're past the first level of nesting. You've got to use on="hover".

The workaround is to control the state of the modal in a parent of the popup, render the modal along side the popup, and then place the trigger inside of the popup. That will get you the expected behavior for really simple use cases, but that doesn't make a lot of sense to me. That causes logic that should stay separate to end up in the same location, even if you try to hide it using something like redux or a context. At the risk of sounding like I'm too greedy, I would expect the library to handle that on its own.

I wanted to add that a rather ugly but by far the simplest way to hack this into working is treating it kind of like a HOC:
https://codepen.io/anon/pen/BbxBpg

[arslion]

Still not fixed?