Ticket T1285173
Visible to All Users

DataGrid context menu opens and immediately closes when the grid inside a Bootstrap modal

created 6 days ago

Hi

I have a grid that appears inside a bootstrap modal.
The grid behaves as expected except for the context menu, which appears and disappears immediately.

I have prepared a code sandbox for you to see this happening, and I have also provided a screen recording showing the grids context menu being opened both inside and outside the modal.

https://codesandbox.io/p/sandbox/cell-editing-and-editing-api-forked-dlpj2s

Regards
Carl Thomas

Answers approved by DevExpress Support

created 5 days ago

Hello Carl,

Thank you for the video and CodeSandBox sample.

The issue is related to Bootstrap's focus behavior (see DevExtreme React - Bootstrap). To resolve it, set the enforceFocus property to false.

Code
<Modal enforceFocus={false} ...

Please let me know if you need further assistance.

    Comments (1)
    C C
    Carl Thomas DSL 5 days ago

      Hi Mark

      That works perfectly thank you for the quick response.

      Regards

      Carl Thomas

      Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

      Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.