Modal not displaying properly in custom UI - Forge

[Kumar]

 I'm trying to display a modal when clicking the button by adding the macro in the confluence page with Forge in custom UI template.

frontend code:

import React, { useEffect, useState, useCallback } from 'react';
import { invoke } from '@forge/bridge';
import Button from '@atlaskit/button/new';
import Modal, {
  ModalBody,
  ModalFooter,
  ModalHeader,
  ModalTitle,
  ModalTransition,
} from '@atlaskit/modal-dialog';
import { Label } from '@atlaskit/form';
import Select from '@atlaskit/select';

function App() {
  const [data, setData] = useState(null);
  const [isOpen, setIsOpen] = useState(false);

  const openModal = useCallback(() => setIsOpen(true), []);
  const closeModal = useCallback(() => setIsOpen(false), []);

  useEffect(() => {
    invoke('getText', { example: 'my-invoke-variable' }).then(setData);
  }, []);

  return (
    <div>
      <div>
        <Button appearance="primary" onClick={openModal}>
          Open modal
        </Button>
      </div>

      <ModalTransition>
        {isOpen && (
          <Modal onClose={closeModal}>
            <ModalHeader>
              <ModalTitle>Edit the details: </ModalTitle>
            </ModalHeader>
            <ModalBody>              

              <div className='' style={{margin: "14px 0"}}>
                <Label htmlFor="single-select-example">Choose a city <span style={{color: "red"}}>*</span> </Label>
                <Select
                  inputId="single-select-example"
                  className="single-select"
                  classNamePrefix="react-select"
                  options={[
                    { label: 'Adelaide', value: 'adelaide' },
                    { label: 'Brisbane', value: 'brisbane' },
                    { label: 'Canberra', value: 'canberra' },
                    { label: 'Darwin', value: 'darwin' },
                    { label: 'Hobart', value: 'hobart' },
                    { label: 'Melbourne', value: 'melbourne' },
                    { label: 'Perth', value: 'perth' },
                    { label: 'Sydney', value: 'sydney' },

                  ]}
                  placeholder="Choose a city"
                />
              </div>
            </ModalBody>
            <ModalFooter>
              <Button appearance="subtle" onClick={closeModal}>
                Cancel
              </Button>

              <Button appearance="primary" onClick={closeModal}>
                Duplicate
              </Button>
            </ModalFooter>
          </Modal>
        )}
      </ModalTransition>
    </div>
  );
}

export default App;

I need the modal to be displayed outside of the button, but the modal is displayed within a frame.



Can anyone help how to resolve this issue?

[Brant Schroeder]

@Arun I would suggest submitting this question to the developers community.  https://community.developer.atlassian.com/