Select close event handled in popover

[brandon-sap]

Bug Description

This one is a bit...intense. My apologies upfront.

Short description:

A select component inside of a popover will call that popover's close listener when it closes.

Longer description:

A select component has its own popover. So when a select is inside of a popover (or a dialog) and that select's popover closes, which fires a close event. The select's close event listener handles that event, along with the close event listener on the popover that was outside of the select. So there are 2 popovers. If both have event listeners on the close event, both of those listeners get called, even though the outer popover hasn't closed.

Sorry, I'm not sure there's a way to be concise with this one. It's pretty specific.

Affected Component

Select

Expected Behaviour

When a select component closes (say a user chooses one of the options, or presses esc and doesn't choose an option) the select's popover disappears and the close listener is called with the close event. A popover that contains that select shouldn't have its close handler called (it wasn't closed).

Isolated Example

Playground Example

Steps to Reproduce

1. Go to playground example above.
2. Open dev console.
3. The example has a button, btn1. Click it.
4. A popover appears (pop1) that contains a select and another button, btn2. Click btn2.
5. Another popover appears (pop2). Click back inside pop1. This will close pop2.
6. Observe an entry in the dev console: "close event on pop2 true" This is the counter example. The popover closes, calls its own close listener. This is the expected behavior for the select.
7. Click on the select. Its popover appears. Press the Esc key. This will close the select popover.
8. Observe 2 entries in the dev console: "close event on select " and "close event on pop1 false"
9. Click outside of pop1 to make it close.
10. Observe an entry in the dev console: "close event on pop1 true"

Step 8 is where the problem is portrayed. The close handler for the select is the only one that should have fired. Instead, the close handler for pop1 was also fired, even though it didn't close.

Note: the true/false on the pop1 and pop2 close handlers is the way I've seen to be able to tell if the popover is actually the one being closed. Luckily, it seems to work. Otherwise, I'd still be looking for a workaround...

Log Output, Stack Trace or Screenshots

From the Playground Example:

Priority

Low

UI5 Web Components Version

2.2.0

Browser

Chrome

Operating System

Windows 11

Additional Context

No response

Organization

SAP

Declaration

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

[IlianaB]

Hello @ui5-webcomponents-topic-rd , please have a look at this issue. It seems Popup fires close event , although the Popup is actually not closed.

Regards,
Iliana

[brandon-sap]

I realized that I didn't specify it very well, that dialogs and popups both do this. In my application where I first saw this, it was actually a dialog with a select in it. I reproduced it with a popover, but both dialogs and popovers do this.

[kskondov]

Hello @SAP/ui5-webcomponents-topic-p, seems like the select fires a close event that should not bubble can you please take a look