[Bug]: Impossible to display a modal.

[LamsaLL]

Describe the bug

I have a ModalButton component (in React). My component work well on my app but in my story, when i click on the button it does not display the modal.

To Reproduce

Here the code of my component :

"use client";

import React, {
  cloneElement,
  ComponentProps,
  FunctionComponent,
  ReactElement,
  ReactNode,
} from "react";
import useModal from "../../../hooks/useModal";
import Modal from "../Modal/Modal";

type ModalButtonProps = {
  trigger: ReactElement;
  modalProps?: Pick<
    ComponentProps<typeof Modal>,
    "className" | "header" | "leading" | "size" | "trailing" | "title"
  >;
  modalContent: ReactNode;
};

const ModalButton: FunctionComponent<ModalButtonProps> = ({
  trigger,
  modalProps,
  modalContent,
}) => {
  const modalState = useModal();

  return (
    <>
      {cloneElement(trigger, {
        onClick: (event: any) => {
          event?.preventDefault();
          modalState.open();
        },
      })}
      <Modal
        open={modalState.isOpen}
        onClose={modalState.close}
        {...modalProps}
      >
        {modalContent}
      </Modal>
    </>
  );
};

export default ModalButton;

The code of the story :

import { Meta, StoryObj } from "@storybook/react";
import Button from "../../components/elements/Button";
import ModalButton from "../../components/modules/ModalButton";

export default {
  title: "modules/ModalButton",
  component: ModalButton,
  args: {
    modalContent: <p>Modal content</p>,
  },
  argTypes: {
    trigger: { table: { disable: true } },
    modalContent: { table: { disable: true } },
    modalProps: { table: { disable: true } },
  },
} as Meta<typeof ModalButton>;

type Story = StoryObj<typeof ModalButton>;

export const ButtonTrigger: Story = {
  args: {
    trigger: <Button>Lorem ipsum</Button>,
  },
};
export const AnchorTrigger: Story = {
  args: {
    trigger: <Button as="a">Lorem ipsum</Button>,
  },
};

System

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 2700 Eight-Core Processor
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
  npmPackages:
    @storybook/addon-actions: ^7.3.1 => 7.3.2 
    @storybook/addon-essentials: ^7.3.1 => 7.3.2 
    @storybook/addon-interactions: ^7.3.1 => 7.3.2 
    @storybook/addon-links: ^7.3.1 => 7.3.2 
    @storybook/addon-mdx-gfm: ^7.3.1 => 7.3.2 
    @storybook/nextjs: ^7.3.1 => 7.3.2 
    @storybook/react: ^7.3.1 => 7.3.2 
    @storybook/testing-library: 0.2.0 => 0.2.0

Additional context

No response

[kmalap05]

I can help to solve this issue. Since, I am very much familiar with this issue.
Assign it to me with Hacktoberfest 2023.

[Rainnut]

i have this problem too，when fix it ？

[valentinpalkovic]

Hi @LamsaLL

My guess is that the Modal is displayed, but since Story iframes don't leak any content, you have to increase the visibility area to display it. I think this issue is connected to the following discussions and issues.

• [Bug]: Don't use css zoom in ZoomElement #21302
• Firefox zoom implementation breaks position: fixed elements in Docs #16774
• [Bug]: Docs story wrapping issue with fixed positioned elements #23586

A feature request exists to implement a granular control of the zoom feature:

• Granular control of zoom feature in canvas, to avoid breaking `fixed` positioning #23699

Please take a look at the DOM, whether the modal actually is displayed or not.

[Azgharpasha]

@LamsaLL I would like to contribute. But the above bug its difficult to trace . can some more specify exactly the bug and show the code in the storybook , where;s its actual rendering .

[harsh1898]

Hi @LamsaLL @Rainnut
Please provide some more brainstorming or your bug affected code repo about this issue. As per above thread comments, information is not sufficient to get into.

@shilman , Please confirm , is it really a bug that is coming from storybook code configuration. As, I suppose, this is not a typical bug as some configuration of storybook that I have initiated in my react code , is working fine

[harsh1898]

Hi @LamsaLL

My guess is that the Modal is displayed, but since Story iframes don't leak any content, you have to increase the visibility area to display it. I think this issue is connected to the following discussions and issues.

• [Bug]: Don't use css zoom in ZoomElement #21302
• Firefox zoom implementation breaks position: fixed elements in Docs #16774
• [Bug]: Docs story wrapping issue with fixed positioned elements #23586

A feature request exists to implement a granular control of the zoom feature:

• Granular control of zoom feature in canvas, to avoid breaking fixed positioning #23699

Please take a look at the DOM, whether the modal actually is displayed or not.

@valentinpalkovic , can you little elaborate, how these other issues are connected to this modal issue.

[harsh1898]

Hi @LamsaLL

With your provided code, I have tried to reproduce and fix the issue.
https://github.com/harsh1898/Modal_Story , this is my code repository. You can check it and gain some idea.

[Azgharpasha]

@LamsaLL
the solution provided by @harsh1898 its working fine for me and . once check the code in repo.