Dash table dropdown can't be clicked in background while modal is opened

[timbrnbrr]

• dash version: 2.3.1
• dash-bootstrap-components version: 1.0.3

What is happening?

If a bootstrap modal is opened, dash table cell dropdown cannot be opened in background to select a value. The dropdown list blinks up briefly but closes immediately.

What should be happening?

This should be possible:

Code

To make the background clickable when a modal is opened, i have added the following css class to the outest div of the modal:

My css class to enable clicking in the background outside the modal while it is opened:

.active-background {
    pointer-events: None;
}

The outest div element of the modal:

<div role="dialog" aria-modal="true" class="fade active-background modal show" tabindex="-1" style="display: block; padding-right: 21px;">

I have found out that this behaviour is due to the html attribute tabindex=-1 of the modal. If we remove this attribute, the clicking of the dash table cell dropdown works while a modal is opened. Since I have no control over the html definition of the modal when using dash-bootstrap-components, I currently remove this attribute via JavaScript when a modal is opened.

It would be nice to make this possible without the need of manually removing the tabindex attribute, since opening a modal and meanwhile using a dash table in the background is a common use case for our project.

[tcbegley]

Hi @timbrnbrr

Thanks for opening the issue, and sorry for a slow response.

I think unfortunately the Bootstrap modal is intended to be used as an overlay to all your content and hence wouldn't really support this kind of behaviour. Changing it for dash-bootstrap-components would mean deviating from Bootstrap which we generally try to avoid. Have you considered perhaps using a component like Popover instead?

[timbrnbrr]

Hi @tcbegley

Thanks for your response.

A popover seems to be more similar to a tooltip for me. But what we need is a sub-window inside our dash app which can contain complex elements e.g. like graphs and which we are able to drag around on the website and still interact with the background while it is opened.

My described hacky approach using bootstrap modal works to achieve this, but if bootstrap modal is not meant to be used for such a use case - doesn't bootstrap provide anything similar which is meant to be?

[tcbegley]

doesn't bootstrap provide anything similar which is meant to be?

Unfortunately I'm not aware or anything like this.

Perhaps you could look into dash-draggable or similar? There's a few projects like this I've seen over the years that might be able to do what you want.