Bug Description

We are trying to implement the value state popup like in all other inputs for the internal rich text editor component. The specification is that when the editing area is focused (which is an iframe) the value state popup should be shown.

We attach to an event on the root (the opener) which fires, when the tinymce editor fires a focuin, but because of the following code in PopoverRegistry:

const closePopoversIfLostFocus = () => {
	if (getActiveElement()!.tagName === "IFRAME") {
		getRegistry().reverse().forEach(popup => popup.instance.closePopup(false, false, true));
	}
};

the value state popup opens and after a second it closes.

Affected Component

sap-rich-text-editor

Expected Behaviour

Instead of closing the popup, when an IFRAME is opened,the registry should check if the getActiveElement is contained/or is the opener. If it is not, then we should close the popup.

A possible fix (with the help of chat gpt) seems to solve the issue:

const deepContains = (parent: HTMLElement, child: HTMLElement) => {
    if (parent.contains(child)) {
        return true;
    }
    const walker = document.createTreeWalker(parent, NodeFilter.SHOW_ELEMENT, null);
    let currentNode = walker.nextNode() as HTMLElement | null;
    while (currentNode) {
        if (currentNode.shadowRoot) {
            if (deepContains(currentNode.shadowRoot as unknown as HTMLElement, child)) {
                return true;
            }
        }
        currentNode = walker.nextNode() as HTMLElement | null;
    }
    return false;
}
const closePopoversIfLostFocus = () => {
    if (getActiveElement() && getActiveElement()!.tagName === "IFRAME") {
        const active = getActiveElement();
    
        // @ts-ignore
        const shouldClose = !deepContains((getOpenedPopups()[0].instance as Popover).opener, active);
        if (shouldClose) {
            getRegistry().reverse().forEach(popup => popup.instance.closePopup(false, false, true));
        }
    }
    };
    

Isolated Example

https://sap.github.io/ui5-webcomponents/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY[…]VtZW50LmdldEVsZW1lbnRCeUlkKCdteURpdicpO1xufSk7In19

Steps to Reproduce

1. click on the text content of the opener container - popover opens
2. click on the button, popover still opened
3. click on the iframe - popup closes
   ...

A better example for testing is the POC for the value state, which can be found in BGSOFUIRILA-3970 in the comment section.

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

2

Browser

Chrome

Operating System

all

Additional Context

No response

Organization

SAP

Declaration

• I’m not disclosing any internal or sensitive information.