React admin dialog allow to perform actions on the underlying elements while being open

[Nikitzu]

What you were expecting: I expect to be able to open react admin dialog like with DeleteButton component and once it is open - it should handle all the click until it will be closed.

What happened instead: If you make a page with the list of items and the ability to double click any row in the list, this double click will bypass opened modals. It means that whenever you create a standard dialog like with DeleteButton component or any other default one above such list, you can double click in any place on the dialog and, if under it there will be a row, row's double click action will be invoked. Dialog will be closed.

Steps to reproduce:

• Create a DatagridConfigurable list with body, rows and fields
• Add double click action on the rows.
• Add ability to delete row with DeleteButton component that opens a confirmation modal.
• Once modal is open double click in the place of the opened dialog under which there is a row of the list.

Related code: Below you can se the iumage of how I create Delete Confirmation dialog using DeleteButton. The button exists on every row of my list.

Environment

• React-admin version: 5.1.5
• Last version that did not exhibit the issue (if applicable): -
• React version: 18.3.1
• Browser: Chrome
• Stack trace (in case of a JS error): -

[fzaninotto]

I can't reproduce your error. I built the following Story:

import * as React from 'react';
import { Confirm } from 'react-admin';

export default {
    title: 'ra-ui-materialui/layout/Confirm',
};

export const BackClick = () => {
    const [isOpen, setIsOpen] = React.useState(false);
    const [isClicked, setIsClicked] = React.useState(false);

    return (
        <>
            <button
                onClick={e => {
                    setIsOpen(true);
                    e.stopPropagation();
                }}
            >
                Open Dialog
            </button>
            <div
                onClick={() => setIsClicked(true)}
                style={{
                    height: '100vh',
                    width: '100%',
                    backgroundColor: 'red',
                    padding: 10,
                }}
            >
                <div>Back layer {isClicked ? 'clicked' : 'not Clicked'}</div>
                <Confirm
                    isOpen={isOpen}
                    title="Delete Item"
                    content="Are you sure you want to delete this item?"
                    confirm="Yes"
                    confirmColor="primary"
                    onConfirm={() => setIsOpen(false)}
                    onClose={() => setIsOpen(false)}
                />
            </div>
        </>
    );
};

If you want us to investigate, please join a repro that shows your bug.

[Nikitzu]

I mentoned that the issue is happening when you open dialog made by DeleteButton over the DatagridConfigurable with body and rows. Also I mentioned that it is reproduced on double click behaviour and not single click.

[fzaninotto]

Right, and I the problem may lie in your implementation, so we need you to build a repro.