I’m developing a Confluence global page using Forge Custom UI.
I have programmed to open a Modal when an element is clicked.
I can’t reopen the Modal as shown below.
Step 1: Click on the element to open the Modal.
Step 2: Click outside the Modal to close the Modal.
Step 3: When I click on the element again, the Modal does not open. (It was called open())
The source code is as follows
manifest.yml
resources:
- key: main
path: static/main/build
- key: modal-resource
path: static/modal-resource/build
App.js of main resource(No change other files of main resource)
import React from 'react';
import { Modal } from '@forge/bridge';
function App() {
const modal = new Modal({
resource: 'modal-resource',
onClose: (payload) => {
console.log('onClose called with', payload);
},
size: 'medium',
context: {
customKey: 'custom-value',
},
});
function handleClick(e) {
e.preventDefault();
modal.open();
console.log('Clicked.');
}
return (
<div class='open-button' onClick={handleClick}>
Open a modal.
</div>
);
}
export default App;
App.js of modal-resource(Other files have the same configuration as files of main resouce)
import React from 'react';
import { view } from '@forge/bridge';
function App() {
function handleClick(e) {
e.preventDefault();
view.close();
}
return (
<div class="close-button" onClick={handleClick}>
Close on click here.
</div>
);
}
export default App;
If you have any suggestions, please let me know.
Thanks.