[calendar] Multiple calendar popups can be opened simultaneously.

[allen138]

Bug Description

Hi team, When there are multiple date pickers on a page its possible for each one to have the calendar popups opened at the same time. If the date pickers are stacked in a row, this could cause an overlapping issue. Please see the following screen shot:

The calendar popups only seem to close on 'mousedown' events, PopoverRegistry.js#L40.

Note: This is not reproducible with the sap.m.DatePicker. Please see, sap.m.sample.DatePicker and try the same replication steps below (steps 2-4)

Thanks, Allen

Expected Behavior

Only one calendar popup should be opened at a time. Possible solution, close the popup on blur as long as the focus is not on the input

Steps to Reproduce

1. Go to ui5-webcomponents playground - DatePicker
2. Click on one date picker icon to open the calendar popup
3. Click on the date pickers input
4. Press tab to focus on the next input
5. (first date picker's calendar popup is still open. Shouldn't it be closed at this point since the focus is not on the input or the calendar popup?)
6. Press f4 to open the second calendar popup. Notice two popups are open at the same time. Depending on screen size and placement of the two datepickers, the calendars can easily overlap.

Isolated Example

If possible, please provide an isolated example by forking CodeSandbox.

Context

• UI5 Web Components version: all
• OS/Platform: all
• Browser: all
• Affected component: date picker components

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High

Stakeholder Info (if applicable)

• Organization: SF
• Business impact: Medium