DevExtreme React - 3rd-Party Framework Issues

This section describes issues related to 3rd-party frameworks and steps you can follow to diagnose and resolve these issues. If the solutions listed here do not help, create a ticket in our Support Center.

If you place DevExtreme components in a Bootstrap modal, the following issues may occur:

• Users cannot insert, update, or delete a DataGrid row.
• Users cannot enter values in the FilterBuilder.
• Editors in the DropDownBox lose focus.
• TextArea loses focus.
• DataGrid ColumnChooser loses focus.

On page load, Bootstrap locates all modals and places their child elements into special collections. A modal only allows items from its child element collection to receive focus. At the same time, DevExtreme components can generate elements on the fly. Such dynamically-generated elements do not get attached to the focusable collection.

To allow any element to obtain input focus, specify a specially-designed option as shown in the code below.

<div class="modal fade" role="dialog" data-bs-focus="false">
    <div class="modal-dialog">
        <div class="modal-content">     
            <!-- DevExtreme components -->
        </div>
    </div>
</div>

<div class="modal fade" role="dialog" data-focus="false">
    <div class="modal-dialog">
        <div class="modal-content">     
            <!-- DevExtreme components -->
        </div>
    </div>
</div>

<template>
    <b-modal :no-enforce-focus="true">
        <!-- DevExtreme components -->
    </b-modal>
</template>

<script>
    // ...
</script>

// ...
function App() {
    return (
        <Modal ...
            enforceFocus={false}
        >
            {/* DevExtreme components */}
        </Modal>
    );
}

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;