Detect Popup focus loss to close it

[Jean-Pierre]

I am working with a kendo react grid, and i need to implement to open a menu by right clicking on any cell.  By using onContextMenu on the cell render, I am able to open a popup:

cellRender(tdElement, cellProps) {
        const dataItem = cellProps.dataItem;
        const field = cellProps.field;
        const additionalProps = (cellProps.dataItem[this.editFieldName] && (cellProps.field === cellProps.dataItem[this.editFieldName])) ?
            {
                ref: (td) => {
                    const input = td && td.querySelector('input');
                    if (!input || (input === document.activeElement)) { return; }
                    if (input.type === 'checkbox') {
                        input.focus();
                    } else {
                        input.select();
                    }
                }
            } : {
                onClick: () => { this.enterEdit(dataItem, field); },
                onContextMenu: (e) => { e.preventDefault(); this.onContextMenu(e, dataItem, field); }
            };
        return React.cloneElement(tdElement, { ...tdElement.props, ...additionalProps }, tdElement.props.children);
    }

...

Is it possible for a Popup to detect that it has lost the focus, and then set show property to false ?

Best regards.

PS: Maybe there is a better solution to implement a context menu ?

 

 

[Stefan]

Hello, Jean-Pierre,

Thank you for the details.

Currently, a custom approach as to be used to detect when the Popup has lost focus as by defect the div elements are not focusable and do not fire the blur event.

One why will be to attach a global click handler and to check if the clicked element is the Popup(or anything inside of it). Then based on that to programmatically close the Popup:

https://stackblitz.com/edit/react-dyn1m1?file=app/main.js

We will also check if we can make the Popup focusable and provide an onBlur built-in event that will make this task easier.

Regards,
Stefan
Progress Telerik

[Jean-Pierre]

works perfectly, thanks :)