Modals and Forms never pop up

I am trying to make a modal or form appear upon the event of a button click. My code failed to do this when using a modal, so I tried using the example provided in the UI kit docs. This also did not work. As soon as I select the button to trigger a form, I get a blank page.

I am unsure if this is a bug or an issue on my end, but I simply can not get this to work. I can get a modal to pop up if I use a custom UI project, but I would ideally like to use the Forge UI Kit if possible.

I would prefer to get the form popup to work, but either would suffice. The modal code did not work even when I deleted all my code and simply pasted example from Modal UI kit info page.

** Here is the modal code frontend index.js:**

import ForgeReconciler, {   Form,
  FormHeader,
  FormSection,
  FormFooter,
  Label,
  RequiredAsterisk, ModalBody, ModalTransition, ModalTitle, ModalFooter, ModalHeader, ButtonGroup, Stack, Text, Button, Heading} from '@forge/react';
import { invoke } from '@forge/bridge';
//import {Button, Heading } from '@forge/ui';
const App = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    invoke('getText', { example: 'my-invoke-variable' }).then(setData);
  }, []);
  const [isOpen, setIsOpen] = useState(false);
  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);
  return (
    <>
      <Heading as="h1">Engineering Change Management For Confluence</Heading>
      <ButtonGroup appearance="primary"><Button onClick={openModal}>Create New Template</Button>  <Button>Edit Existing Template</Button></ButtonGroup>
      <ModalTransition>
        {isOpen && (
          <Modal onClose={closeModal}>
            <ModalHeader>
              <ModalTitle>Duplicate this page</ModalTitle>
            </ModalHeader>
            <ModalBody>
              <Text>
                Duplicating this page will make it a child page of <Strong>Search - user
                exploration</Strong>, in the <Strong>Search & Smarts</Strong> space.
              </Text>
            </ModalBody>
            <ModalFooter>
              <Button appearance="subtle" onClick={closeModal}>
                Cancel
              </Button>
              <Button appearance="primary" onClick={closeModal}>
                Duplicate
              </Button>
            </ModalFooter>
          </Modal>
        )}
      </ModalTransition>
   </>
  );
};
ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

And the form version:

import React, { useEffect, useState } from 'react';
import ForgeReconciler, {   Form,
  FormHeader,
  FormSection,
  FormFooter,
  Label,
  RequiredAsterisk, ModalBody, ModalTransition, ModalTitle, ModalFooter, ModalHeader, ButtonGroup, Stack, Text, Button, Heading} from '@forge/react';
import { invoke } from '@forge/bridge';
//import {Button, Heading } from '@forge/ui';
const App = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    invoke('getText', { example: 'my-invoke-variable' }).then(setData);
  }, []);
  const [isOpen, setIsOpen] = useState(false);
  const openForm = () => setIsOpen(true);
  const closeForm = () => setIsOpen(false);
  return (
    <>
      <Heading as="h1">E</Heading>
      <ButtonGroup appearance="primary"><Button onClick={openForm}>Create New Template</Button>  <Button>Edit Existing Template</Button></ButtonGroup>
      {isOpen && (
        <Form onSubmit={closeForm}>
          <Heading as="h3">Create Template</Heading>
          <Label labelFor={getFieldId('templateName')}>Template Name</Label>
          <Textfield {...register('templateName')} />
          <Label labelFor={getFieldId('description')}>Description</Label>
          <Textfield {...register('description')} />
          <Button appearance="subtle" onClick={closeForm}>Cancel</Button>
          <Button appearance="primary" type="submit">Submit</Button>
        </Form>
      )}
   </>
  );
};
ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

As far as I know, my modal works, you can look here for inspiration: my-reminders/src/frontend/issueGlance.jsx at master · robertmassaioli/my-reminders · GitHub

I’m on leave so I’ll let others help with your code above.

The example @rmassaioli linked to doesn’t include the ModalTransition component. Have you tried without it?

I was able to get mine functioning by using the forge quiz app example project provided by Atlassian as my starting point, then deleting everything from that project and adding a modal. Unsure why my original project would not work!

The working version uses modal transitions just like the example in the documentation for the UI kit does. Something about my initial project must have been wrong!