DevExtreme React - Fluent UI

If you use controls like Fluent UI Panel, Modal, or Dialog with DevExtreme components, you may experience several of the following issues.

Issue

An overlay component (Popup, Popover, Tooltip) is displayed behind Fluent UI Panel, Modal, or Dialog.

Solution

In Fluent UI components, the z-index is set to 1000000. Call the baseZIndex(zIndex) method to increase overlay component z-indexes in the application:

import { baseZIndex } from 'devextreme/ui/overlay';
baseZIndex(1000001);

Issue

DevExtreme components that use drop-down windows or overlays are not responsive when added to the Fluent UI Panel, Modal, or Dialog.

Solution

To resolve the issue, disable FocusTrapZone focus trapping behavior:

// ...

const focusTrapZoneProps = {
    disabled: true
};

function App() {
    return (
        <Panel ...
            focusTrapZoneProps={focusTrapZoneProps}
        />
    );
}

export default App;

If you use the Fluent UI Dialog, specify the modalProps property, since the Dialog does not include focusTrapZoneProps:

const focusTrapZoneProps = {
    disabled: true
};

const modalProps = { focusTrapZoneProps };

function App() {
    return (
        <Dialog ...
            modalProps={modalProps}
        />
    );
}

export default App;