Blue outline in Jira Forge bridge custom ui Modal

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;
1 Like

I have a similar issue, which is not solved yet.

I’m using a forge Custom UI bridge Modal with a Jira global page module.
When I open the modal after reloading the global page, I see the upper half of the modal surrounded by a blue line.

Does anyone know how to remove the blue line?

We are having the same problem. Is this a bug?