I have the following problem and I assume it is a bug. Confluence macro modules (Forge + UI Kit) can’t handle input components like Textfield or InlineEdit properly. When trying to type text in those inputs, it overrides/deletes the macro and puts the text on the main page. This seems to be an issue with the focus.
Steps to reproduce:
- create a new app with “forge create” > select “UI Kit”, “Confluence” and “confluence-macro”
- open src/frontend/index.jsx and replace the macro content with a Textfield or InlineEdit (see example below)
- deploy, install, and insert the macro in a Confluence page
Now, when selecting the Textfield it gets focused to receive input. Unfortunately, the surrounding macro component keeps its focus. Hence, when starting to type anything into the textfield, it deletes the macro and types the content onto the main page.
This screenshot shows that the macro still has focus, although my cursor is in the textfield which also is focused.
Only with keyboard navigation, I can loose the macro focus and keep the textfield focus. Then writing something into the textfield works as expected.
The expected behavior is, that the surrounding macro component loses focus, after an inner input component gets focused.
Please note:
- I can share the example code or provide an installation link from my developer console
- I’m aware of macro configs. This is just a technical description without the actual usecase behind it. I want to achieve something similar like the built-in “Decision” macro.
index.jsx snippet
const App = () => {
const [data, setData] = useState('');
useEffect(() => {
invoke('getText', {example: 'my-invoke-variable'}).then(setData);
}, []);
return (
<>
<Box padding="space.100">
<Textfield value={data} onChange={(e) => setData(e.target.value)}></Textfield>
</Box>
</>
);
};
Looking forward for your feedback!