Bootstrap modal takes over screen when clicking to other stories

[jamesstar89]

Anyone else have this issue? Is there any Storybook onleave hook? Then maybe I could call something like close modal before going to next story?

Thanks!

[ndelangen]

From the description I can't really find out what the bug is, and how to reproduce it, could you help us with a reproduction repo or some good steps to reproduce?

[danielduan]

I'm guessing he's referring to the Bootstrap UI library. It sounds like the Bootstrap Modal needs to be closed or else it blocks other components from rendering. https://getbootstrap.com/docs/4.0/components/modal/

Do you have a repo online we can checkout @puffstream?

[jamesstar89]

@ndelangen as per @danielduan comment, correct, modal takes over Storybook. Unfortunately, no I don't have any examples online. I can describe the steps to get to that point.

1. Installed Storybook
2. On a storybook page import React Bootstrap Modal
3. Add button with onClick to show modal
4. Click to another story in your Storybook, e.g. typography, buttons, tables etc..
5. Note - modal is still open over the top of next story

What I have tried..

• When clicking on next story check to see if modal is open and delete related DOM - fails until second or third story link is clicked, toggling back and forth
• Global click to try and implement like an on leave click - fails as I'm in an iframe, doesn't work too well

Any ideas appreciated, some of the Storybook examples - https://storybook.js.org/examples/ use modals and when you click away the modal goes away as well, no idea how their managing that, but looks good here!

[ndelangen]

Whatever is in control of the modal should close + remove the modal when itself is removed from DOM ?

Could you add a ComponentWillUnmount lifecycle-hook to your component to do that?

[danielduan]

@puffstream you can open an issue with them for the bug. I don't see anything that closes the modal when it unmounts: https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.js#L160

I don't think this is on our end. Please reopen the ticket if you think otherwise though.

[jamesstar89]

@danielduan I got a little further with the ComponentWillUnmount, will follow up with react-bootstrap next. Thanks!

[Jesus6Connex]

Same issue with bootstrap vue, modal just wont go away

[xxxKOTxxx]

I have the same issue with my custom modal. It was solved by using React useEffect hook in template function:

...
const template: Story<IModalOptions> = (args: IModalOptions) => {
  const openModal = (options: IModalOptions) => (): void => modalService.show(options);
  useEffect(
    () => {
      return () => {
        modalService.hide();
      }
    },
    []
  );
  return (
    <Button
      preset="default"
      text="Test"
      onClick={openModal(args)}
    />
  );
};
export const Modal = template.bind({});

Maybe it can help someone.