In a default forge app of template “jira issue panel”. I added a forge bridge custom ui modal from here https://developer.atlassian.com/platform/forge/custom-ui-bridge/modal/.
I am seeing a blue outline as shown in the image below. Please suggest, how can I remove the blue outline box. The blue box automatically gets removed as soon as I click on the modal. However, I don’t want that blue outline.
This is my code to open a modal:
const openModal = () => {
const m = new Modal({
size: 'large',
closeOnEscape: true,
closeOnOverlayClick: true
});
m.open();
}
This is the entire code for App.js
import React, { useEffect, useState } from 'react';
import { invoke, Modal } from '@forge/bridge';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
invoke('getText', { example: 'my-invoke-variable' }).then(setData);
}, []);
const openModal = () => {
const m = new Modal({
size: 'large',
closeOnEscape: true,
closeOnOverlayClick: true
});
m.open();
}
return (
<div>
{data ? data : 'Loading...'}
<button onClick={() => openModal()} >Open Modal</button>
</div>
);
}
export default App;
