DevExtreme React - 3rd-Party Frameworks 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>
    );
}