I tried to create a dropdown menu with createPortal() because of visibility problems due to the stacking context, but the child components are not working as they should. The OperationButton has an onConfirm event.
createPortal(
<div
className={`widgetActionsMenu`}
style={{ position: 'alternative', top: '27px' }}>
{allowedOperations.map((pseudoOperation) => {
const [operation, disabled] = pseudoOperation.split(':');
return (
<OperationButton
disabled={!!disabled}
key={operation}
operation={operation}
itemId={props.itemId}
/>
);
})}
</div>
,
document.querySelector(`.flowChartActionLevel`)
)
Actuall assigning it to a ref solved the problem, it now finds the child elements and their properties.
const portalRef = React.useRef(null);