Render ix Modal in same DOM

Siemens iX
1

Hello

I am rendering a IX-modal in my app, but struggle a bit.
The issue is that this modal renders in a separate DOM, i guess using ReactPortal or something.
The modal is supposed to use redux for some state handling, but when it renders outside the main DOM, it doesn’t get wrapped in a redux-provider, resulting in crash.

Is there a way to force the modals to render in the main apps DOM tree?

This is how I call the component

  async function showAddWidgetModal() {

    if (dashboard) {
      await showModal({
        content: <AddWidgetModal dashboard={dashboard} onClose={handleAddWidgetModalClose} />,
      });
    }
  }

Modal component:

const AddWidgetModal: React.FC<AddWidgetProps> = ({ dashboard, onClose }) => {

//some code

    return (
        <Modal ref={modalRef}>
            <IxModalHeader>Add widget</IxModalHeader>
            <IxModalContent>
                <label>
                    Widget Name:
                    <input type="text" value={widgetName} onChange={(e) => setWidgetName(e.target.value)} />
                </label>
            </IxModalContent>

            <IxModalFooter>
                <IxButton outline onClick={close}>
                    Cancel
                </IxButton>
                <IxButton onClick={handleOkClick}>OK</IxButton>
            </IxModalFooter>
        </Modal>
    );
2

I fixed this by moving the Provider in the top of the root.render like this:

root.render(
  <Provider store={store}>
    <IxApplicationContext>
      <BrowserRouter>
        <React.StrictMode>

          <App />

        </React.StrictMode>
      </BrowserRouter >
    </IxApplicationContext>
  </Provider>
)