Semantic-ui-react: Modal closing when selecting datepicker

[vincentwongso]

Bug Report

I am using react-datepicker for the following test.
When selecting a date in the datepicker inside a modal, the modal also close together with the datepicker. It's working fine with react-bootstrap and react-material modal, so I assume the problem is with semantic ui modal.

Steps

1. Create a modal using semantic ui.
2. Add datepicker inside modal.
3. Select the date and when you click the date, it will close the datepicker as well as the modal.

Please see codesandbox below to demonstrate the issue.

Expected Result

When clicking the datepicker it should only close the datepicker.

Actual Result

When clicking the datepicker it close the datepicker as well as the modal.

Version

React semantic ui: 0.81.1
react-datepicker: 1.5.0

Testcase

https://codesandbox.io/s/y7q96n58q9

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[honzajerabek]

Hey, I'm using the same setup. This happened to me as well, when the react-datepicker was overlapping the modal's edge and I clicked the date which was positioned out of the modal.. Technically, I clicked out of the modal -> modal closes

Solved temporarily with not passing onClose prop and handling close myself

edit: I see your test case does just that..

[vincentwongso]

@honzajerabek thank you so much for the info, do you have any example on your workaround.
I tried passing onClose callback but the event that get passed to that callback function is MouseEvent and the data is the modal itself.

[levithomason]

Suspected Issue

This might be happening because the click is not considered inside the modal.

We had this bug previously due to this flow:

1. The modal closes on click outside
2. A click in an element inside the modal removes that element from the modal
3. Checking if the modal contained the click fails since the node that was clicked is no longer in the modal

This was addressed by checking the coordinates of the click as a last resort to see if the click happened in the area of the portal. I'm guessing something in that code path is to blame. The workaround also suggests this is the case.

Workaround

Add closeOnDimmerClick={false} which will ignore closing the modal when the click propagates up. Caveat, the user will have to use the ESC key to close the modal.

You can also implement a more robust workaround by using a controlled modal and handling the open, onOpen, and onClose props yourself.

[herbertpimentel]

This only happening when using the property trigger to open the modal, if you use the property open it does not happen.

[vincentwongso]

It's happening when I use open as well. Even when the I handle the close function manually, it's still happening.
Please see the following example:
https://codesandbox.io/s/z6xoo25p3p

[herbertpimentel]

in your code (https://codesandbox.io/s/z6xoo25p3p) remove the onClose and onOpen events from the modal... they dont make sense. To display or not the modal you only need the property open

Use onOpen and onClose when you need do something when the modal opens and closes respectively. Example: onOpen load some data that will be shown in the modal and onClose to release some resources that is only necessary while modal still open.

[drew23c]

I added showModal to handleChangeDate so that it closes when the user changes the date:

https://codesandbox.io/s/olopwjk9q6

I edited the link

[drew23c]

Ok. I think I understand now. Thank you!

On Fri, Jul 6, 2018 at 7:20 AM, Herbert Pimentel [e-mail]
wrote:

It closes because your event handleChangeDate changes showModal to false.

handleChangeDate = (date) => {
this.setState({
date,
showModal: false
});
};

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/Semantic-Org/Semantic-UI-React/issues/2945#issuecomment-403006023,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ae11GYAwWAkCe-Z9V4aKS9xdu6QkW2F6ks5uD0gXgaJpZM4U1j64
.

[vincentwongso]

This issue has been fixed with the release of 0.82.1, the fix is on #3015. So I think we can close this ticket.
Thanks @layershifter .