Jira Custom UI Modal replaces the display of the issue activity panel

[Kyle Hansen]

I am using the Jira Custom UI Modal in the jira issue activity panel. When clicking my button to call "open.modal", the modal opens. When clicking the select object I have on the modal, the issue activity scree behind the modal gets overwritten with what is on the modal screen (Select object and other buttons). I cannot figure out what is causing this overwrite to happen.

Above is the starting button of the app. Below is what happens when the button is clicked to open the modal. As you can see behind the modal, the original button has been overwritten.

Initial App code:

import React, { useEffect, useState} from 'react';
import { invoke, Modal } from '@forge/bridge';
import Button from '@atlaskit/button';



function App() {
    const [data, setData] = useState(null);
    const openModal = () => {
        const modal = new Modal({
            resource: 'time-entry-modal',
            onClose: (payload) => {
                console.log('onClose called with', payload);
            },
            size: 'medium',
            context: {
                customKey: 'custom-value',
            },
        });
        modal.open();
    };


    return (
        <div>

            <Button onClick={openModal}>
                Enter Time
            </Button>

        </div>
    );
}

export default App;

Modal app code:

import React, { useEffect, useState} from 'react';
import {invoke, view} from '@forge/bridge';
import Button from '@atlaskit/button';
import Select from '@atlaskit/select';


function TimeEntryModal() {

    const [data, setData] = useState(null);
    return (
        <div>

            <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 Modal"
            />

            <Button appearance="primary" onClick={() => view.close()}>
                Save
            </Button>

            <Button appearance="danger" onClick={() => view.close()}>Cancel</Button>
        </div>
    );

}

export default TimeEntryModal;

Any help would be appreciated.