DevExtreme jQuery/JS - 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.

Bootstrap

Modals

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

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.

Set the data-bs-focus property to false (Bootstrap 5). For Bootstrap 4 or earlier, disable the data-focus property.

Bootstrap 5
Bootstrap 4 or earlier
  • <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>