Detect Popup focus loss to close it

3 posts, 0 answers
  1. Jean-Pierre
    Jean-Pierre avatar
    15 posts
    Member since:
    Dec 2018

    Posted 03 Jan 2019 Link to this post

    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 ?

     

     

  2. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 04 Jan 2019 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Jean-Pierre
    Jean-Pierre avatar
    15 posts
    Member since:
    Dec 2018

    Posted 04 Jan 2019 in reply to Stefan Link to this post

    works perfectly, thanks :)
Back to Top