Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug - [Modal] - [When description property is used id is duplicated] #9512

Closed
KKoukiou opened this issue Aug 17, 2023 · 1 comment
Closed

Comments

@KKoukiou
Copy link
Collaborator

KKoukiou commented Aug 17, 2023

Describe the problem
When 'description' property is used for the Modal and 'id' is also supplied the 'id' is applied to the 'pf-v5-c-modal-box' and 'pf-v5-c-modal-box__body' elements in the DOM.

How do you reproduce the problem?

import React from "react";
import { Modal, Button } from "@patternfly/react-core";

export const ModalBasic: React.FunctionComponent = () => {
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
    setIsModalOpen(!isModalOpen);
  };

  return (
    <React.Fragment>
      <Button
        variant="primary"
        onClick={handleModalToggle}
        ouiaId="ShowBasicModal"
      >
        Show basic modal
      </Button>
      <Modal
        id="test-123-modal"
        title="Basic modal"
        description="test modal 123"
        isOpen={isModalOpen}
        onClose={handleModalToggle}
        actions={[
          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
            Confirm
          </Button>,
          <Button key="cancel" variant="link" onClick={handleModalToggle}>
            Cancel
          </Button>
        ]}
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </Modal>
    </React.Fragment>
  );
};

https://codesandbox.io/s/frosty-rhodes-lf5fxl?file=/index.js

Expected behavior
Ids are expected to be unique.

Is this issue blocking you?
No

@wise-king-sullyman
Copy link
Contributor

Thanks for reporting! I'm going to close this issue as it's a duplicate of #9399 and something we're already working on 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Archived in project
Development

No branches or pull requests

2 participants