Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal: closing on clicking inside itself after height change

See original GitHub issue

Bug Report

After adding more input fields in modal, clicking on plain link causes modal close. Seems like the height is changed and initial calculation of modal rectangle became outdated, so it behaves like on clicking outside of the modal. Of course, closeOnDimmerClick={false} prop prevents this strange behavior.

Steps

go to test case sandbox
open modal by clicking Login (top left corner, also zoom out to see the links of modal)
click Register link of the modal (the form just got bigger and Login click is out of initial dimension of the modal)
click Login link of the modal

Expected Result

Modal is open

Actual Result

Modal is closed

Version

Semantic-UI React 0.81.1

Testcase

https://codesandbox.io/s/30n2v379r1 Semantic-UI CSS 2.2.13 upd. https://codesandbox.io/s/n70787j0yp Semantic-UI CSS 2.3.1

Issue Analytics

State:
Created 5 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

3reactions

layershiftercommented, Jun 7, 2018

I’ve updated testcase to use SUI 2.3. However, I think that the problem is caused by removal of a click’s target node.

0reactions

stale[bot]commented, Nov 30, 2019

This issue will be closed due to lack of activity for 12 months. If you’d like this to be reopened, just leave a comment; we do monitor them!

Top Results From Across the Web

Bootstrap Modal immediately disappearing - Stack Overflow

The problem is that as soon as I click on the button, the modal fades in and then immediately disappears. I'd appreciate any...

Modal - Bootstrap

Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time. Nested modals aren't supported...

Considerations for Styling a Modal | CSS-Tricks

Heights are even more likely to change since height always related to the content inside. If you are absolutely certain of the height...

Bootstrap 5 Modal - W3Schools

Change the size of the modal by adding the .modal-sm class for small modals ... it is possible to only scroll inside the...

<Modal/> Component - React-Bootstrap

Close Save changes ... import Button from 'react-bootstrap/Button'; ... When backdrop is set to static, the modal will not close when clicking outside...