MDBModal keeps display:block after 2nd time closed

[Frank683]

I have a modal dialog defined as below:

        <MDBModal show={detailsModalVisible} onHide={() => _setVisibleDetailsModal(false)}>
          <MDBModalDialog size="lg" centered="true">
            <MDBModalContent>
              <div className="container">
                <MDBModalBody className="px-0">
                  {detailsModalContent}
                </MDBModalBody>
              </div>
            </MDBModalContent>
          </MDBModalDialog>
        </MDBModal>

When it is shown for the first time the DOM looks like this:

When I close the dialog DOM looks like this:

When I open the dialog a 2nd time and close it again, the dialog disappears, the modal opacity is set to 0% but the element is still blocking the UI, being rendered above everything else. It seems the element stlye "display:block" is not removed from the div.

The only "workaround" is suppressing the rendering of the MDBModal at all when detailsModalVisible is false but that also takes away the fade animation.

Is this a bug or am I missing something? Any advise would be appreciated.

Thanks and best regards, Frank

[gbujanski]

I checked the example from our documentation and it works fine. I need to know what the _setVisibleDetailsModal method does. This is probably causing the issue. Notice that in our examples we change the visibility of the modal to onShow.

[Frank683]

@gbujanski I think now I know what causes the issue. It's not related to how often I open/close the dialog but to how I close it. If I click the "x" button on the top right everything is fine but if I close the dialog by clicking outside of it or by hitting ESC neither the onHide() nor the onHidePrevented() eventhandlers get called and thus the state is not changed.

Since my component is class based I can't use the useState hook and have to rely on onHide and onHidePrevented to fire. That's the difference to your demo implementation.

[Frank683]

Hi @gbujanski or any other maintainer?

Can I expect a fix for this issue? Given my previous explanation it should be possible to reproduce it. What do you think?

Best, Frank

[gbujanski]

Thanks! This will make it easier for us to fix this. onHide should also fire after the modal is closed by an outside click or esc button. We will fix it as soon as possible

[Frank683]

Hi, is there any timeline planned for the fix?

Best, Frank

[gbujanski]

Fix was added in the last version. Have you updated MDB React to version 6.1.0?

[Frank683]

Fix was added in the last version. Have you updated MDB React to version 6.1.0?

Now I have and it's working fine now. Thought I would see a notification here that this issue was fixed with release xyz. Thanks!