fix(ui5-popover): set fallback placement when no place to popup (#1467)

**Issue**
When the opener element is taking full width and the placement is set to "Right" (same for "Left"), the popover tried to open on the opposite side, but both sides are not possible and the popover remains cut off with only its arrow visible.
**Solution**
Now, it checks "Bottom" and "Top" sides as well. 
**Note1:** The fallback is applied before the allow-target-overlap to be taken into account, which means that Popover with placement "Right" or "Left", will try to open on all sides, before overlapping its target.
**Note2:** The fallback is used currently for "Left" and "Right' only for two reasons: (1) it fixes the issue that was originally reported by the MDK colleagues and (2) all the components, that use popover internally (f.e DatePicker) have placement="Bottom" and the change would have bigger impact, that I would avoid before release. 
**Note3:**
The full solution is to have this fallback for all sides + placement type "Auto" that should be the default value and would try to open on "Right" first.

Fixes: #1395

Author: ilhan007

packages/main/src/Popover.js

@@ -628,6 +628,28 @@ class Popover extends UI5Element {
 		};
 	}
 
+	/**
+	 * Fallbacks to new placement, prioritizing <code>Left</code> and <code>Right</code> placements.
+	 * @private
+	 */
+	fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) {
+		if (targetRect.left > popoverSize.width) {
+			return PopoverPlacementType.Left;
+		}
+
+		if (clientWidth - targetRect.right > targetRect.left) {
+			return PopoverPlacementType.Right;
+		}
+
+		if (clientHeight - targetRect.bottom > popoverSize.height) {
+			return PopoverPlacementType.Bottom;
+		}
+
+		if (clientHeight - targetRect.bottom < targetRect.top) {
+			return PopoverPlacementType.Top;
+		}
+	}
+
 	getActualPlacementType(targetRect, popoverSize) {
 		const placementType = this.placementType;
 		let actualPlacementType = placementType;
@@ -649,15 +671,13 @@ class Popover extends UI5Element {
 			}
 			break;
 		case PopoverPlacementType.Left:
-			if (targetRect.left < popoverSize.width
-				&& targetRect.left < clientWidth - targetRect.right) {
-				actualPlacementType = PopoverPlacementType.Right;
+			if (targetRect.left < popoverSize.width) {
+				actualPlacementType = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placementType;
 			}
 			break;
 		case PopoverPlacementType.Right:
-			if (clientWidth - targetRect.right < popoverSize.width
-				&& clientWidth - targetRect.right < targetRect.left) {
-				actualPlacementType = PopoverPlacementType.Left;
+			if (clientWidth - targetRect.right < popoverSize.width) {
+				actualPlacementType = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placementType;
 			}
 			break;
 		}

packages/main/test/pages/Popover.html

@@ -185,8 +185,114 @@
 		</div>
 	</ui5-popover>
 
-	<script>
+	<br>
+	<br>
+	<ui5-title>placement-type="Right", but no space on the right</ui5-title>
+	<p>No space on the Right, try Left, Bottom, Top</p>
+	<ui5-button id="btnFullWidth" style="width: 100%">Click me !</ui5-button>
+	<br>
+	<br>
+	<ui5-title>placement-type="Right" (default) and allow-target-overlap=true </ui5-title>
+	<p>No space on the right, try Left, Bottom, Top and if nothing works, the target will be overlapped</p>
+	<ui5-button id="btnFullWidthTargetOverlap" style="width: 100%">Click me !</ui5-button>
 
+	<br>
+	<br>
+	<ui5-title>placement-type="Left", but no space on the left</ui5-title>
+	<p>No space on the Left, try Right, Bottom, Top</p>
+	<ui5-button id="btnFullWidthLeft" style="width: 100%">Click me !</ui5-button>
+
+	<br>
+	<br>
+	<ui5-title>placement-type="Left" and allow-target-overlap=true</ui5-title>
+	<p>No space on the right, try Roght, Bottom, Top and if nothing works, the target will be overlapped</p>
+	<ui5-button id="btnFullWidthLeftTargetOverlap" style="width: 100%">Click me !</ui5-button>
+
+	<br>
+	<br>
+	<ui5-title>placement-type="Top"</ui5-title>
+	<ui5-button id="btnFullWidthTop" style="width: 100%">Click me !</ui5-button>
+
+	<br>
+	<br>
+	<ui5-title>placement-type="Bottom"</ui5-title>
+	<ui5-button id="btnFullWidthBottom" style="width: 100%">Click me !</ui5-button>
+
+	<ui5-popover header-text="My Heading" id="popFullWidth" style="width: 300px" >
+		<div slot="header">
+			<ui5-button id="first-focusable">I am in the header</ui5-button>
+		</div>
+
+		<ui5-list>
+			<ui5-li>Hello</ui5-li>
+			<ui5-li>World</ui5-li>
+			<ui5-li>Again</ui5-li>
+		</ui5-list>
+	</ui5-popover>
+
+	<ui5-popover allow-target-overlap header-text="My Heading" id="popFullWidthTargetOverlap" style="width: 300px" >
+		<div slot="header">
+			<ui5-button id="first-focusable">I am in the header</ui5-button>
+		</div>
+
+		<ui5-list>
+			<ui5-li>Hello</ui5-li>
+			<ui5-li>World</ui5-li>
+			<ui5-li>Again</ui5-li>
+		</ui5-list>
+	</ui5-popover>
+
+
+	<ui5-popover header-text="My Heading" id="popFullWidthLeft" style="width: 300px" placement-type="Left">
+		<div slot="header">
+			<ui5-button id="first-focusable">I am in the header</ui5-button>
+		</div>
+
+		<ui5-list>
+			<ui5-li>Hello</ui5-li>
+			<ui5-li>World</ui5-li>
+			<ui5-li>Again</ui5-li>
+		</ui5-list>
+	</ui5-popover>
+
+	<ui5-popover header-text="My Heading" id="popFullWidthLeftTargetOverlap" style="width: 300px" placement-type="Left" allow-target-overlap>
+		<div slot="header">
+			<ui5-button id="first-focusable">I am in the header</ui5-button>
+		</div>
+
+		<ui5-list>
+			<ui5-li>Hello</ui5-li>
+			<ui5-li>World</ui5-li>
+			<ui5-li>Again</ui5-li>
+		</ui5-list>
+	</ui5-popover>
+
+
+	<ui5-popover header-text="My Heading" id="popFullWidthTop" style="width: 300px" placement-type="Top">
+		<div slot="header">
+			<ui5-button id="first-focusable">I am in the header</ui5-button>
+		</div>
+
+		<ui5-list>
+			<ui5-li>Hello</ui5-li>
+			<ui5-li>World</ui5-li>
+			<ui5-li>Again</ui5-li>
+		</ui5-list>
+	</ui5-popover>
+
+	<ui5-popover header-text="My Heading" id="popFullWidthBottom" style="width: 300px" placement-type="Bottom">
+		<div slot="header">
+			<ui5-button id="first-focusable">I am in the header</ui5-button>
+		</div>
+
+		<ui5-list>
+			<ui5-li>Hello</ui5-li>
+			<ui5-li>World</ui5-li>
+			<ui5-li>Again</ui5-li>
+		</ui5-list>
+	</ui5-popover>
+
+	<script>
 		btn.addEventListener('click', function (event) {
 			pop.openBy(btn);
 		});
@@ -223,6 +329,29 @@
 			document.getElementById("big-popover").openBy(event.target);
 		});
 
+		btnFullWidth.addEventListener('click', function (event) {
+			popFullWidth.openBy(btnFullWidth);
+		});
+
+		btnFullWidthTargetOverlap.addEventListener('click', function (event) {
+			popFullWidthTargetOverlap.openBy(btnFullWidthTargetOverlap);
+		});
+
+		btnFullWidthLeft.addEventListener('click', function (event) {
+			popFullWidthLeft.openBy(btnFullWidthLeft);
+		});
+
+		btnFullWidthLeftTargetOverlap.addEventListener('click', function (event) {
+			popFullWidthLeftTargetOverlap.openBy(btnFullWidthLeftTargetOverlap);
+		});
+
+		btnFullWidthTop.addEventListener('click', function (event) {
+			popFullWidthTop.openBy(btnFullWidthTop);
+		});
+
+		btnFullWidthBottom.addEventListener('click', function (event) {
+			popFullWidthBottom.openBy(btnFullWidthBottom);
+		});
 	</script>
 </body>