@ui5/webcomponents 1.4.0 → 1.5.0

package/src/Dialog.js

@@ -1,6 +1,5 @@
 import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
-import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
 	isUp, isDown, isLeft, isRight,
 	isUpShift, isDownShift, isLeftShift, isRightShift,
@@ -26,7 +25,7 @@ const STEP_SIZE = 16;
  */
 const metadata = {
 	tag: "ui5-dialog",
-	slots: /** @lends  sap.ui.webcomponents.main.Dialog.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.Dialog.prototype */ {
 		/**
 		 * Defines the header HTML Element.
 		 * <br><br>
@@ -52,7 +51,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Dialog.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.Dialog.prototype */ {
 		/**
 		 * Defines the header text.
 		 * <br><br>
@@ -253,7 +252,7 @@ class Dialog extends Popup {
 	}
 
 	/**
-	 * Determines if the header of the dialog should be shown.
+	 * Determines if the header should be shown.
 	 */
 	get _displayHeader() {
 		return this.header.length || this.headerText || this.draggable || this.resizable;
@@ -271,6 +270,22 @@ class Dialog extends Popup {
 		return this.resizable && this.onDesktop;
 	}
 
+	get _minHeight() {
+		let minHeight = Number.parseInt(window.getComputedStyle(this.contentDOM).minHeight);
+
+		const header = this._root.querySelector(".ui5-popup-header-root");
+		if (header) {
+			minHeight += header.offsetHeight;
+		}
+
+		const footer = this._root.querySelector(".ui5-popup-footer-root");
+		if (footer) {
+			minHeight += footer.offsetHeight;
+		}
+
+		return minHeight;
+	}
+
 	_show() {
 		super._show();
 		this._center();
@@ -292,12 +307,12 @@ class Dialog extends Popup {
 
 	onEnterDOM() {
 		super.onEnterDOM();
-		this._attachResizeHandlers();
+		this._attachScreenResizeHandler();
 	}
 
 	onExitDOM() {
 		super.onExitDOM();
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 	}
 
 	/**
@@ -306,22 +321,22 @@ class Dialog extends Popup {
 	_resize() {
 		super._resize();
 
-		if (this._resizeHandlersAttached) {
+		if (this._screenResizeHandlerAttached) {
 			this._center();
 		}
 	}
 
-	_attachResizeHandlers() {
-		if (!this._resizeHandlersAttached) {
-			ResizeHandler.register(document.body, this._screenResizeHandler);
-			this._resizeHandlersAttached = true;
+	_attachScreenResizeHandler() {
+		if (!this._screenResizeHandlerAttached) {
+			window.addEventListener("resize", this._screenResizeHandler);
+			this._screenResizeHandlerAttached = true;
 		}
 	}
 
-	_detachResizeHandlers() {
-		if (this._resizeHandlersAttached) {
-			ResizeHandler.deregister(document.body, this._screenResizeHandler);
-			this._resizeHandlersAttached = false;
+	_detachScreenResizeHandler() {
+		if (this._screenResizeHandlerAttached) {
+			window.removeEventListener("resize", this._screenResizeHandler);
+			this._screenResizeHandlerAttached = false; // prevent dialog from repositioning during resizing
 		}
 	}
 
@@ -459,13 +474,12 @@ class Dialog extends Popup {
 	}
 
 	_resizeWithEvent(event) {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 		this.addEventListener("ui5-before-close", this._revertSize);
 
 		const { top, left } = this.getBoundingClientRect(),
 			style = window.getComputedStyle(this),
 			minWidth = Number.parseFloat(style.minWidth),
-			minHeight = Number.parseFloat(style.minHeight),
 			maxWidth = window.innerWidth - left,
 			maxHeight = window.innerHeight - top;
 
@@ -488,7 +502,7 @@ class Dialog extends Popup {
 		}
 
 		width = clamp(width, minWidth, maxWidth);
-		height = clamp(height, minHeight, maxHeight);
+		height = clamp(height, this._minHeight, maxHeight);
 
 		Object.assign(this.style, {
 			width: `${width}px`,
@@ -497,7 +511,7 @@ class Dialog extends Popup {
 	}
 
 	_attachMouseDragHandlers() {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 
 		window.addEventListener("mousemove", this._dragMouseMoveHandler);
 		window.addEventListener("mouseup", this._dragMouseUpHandler);
@@ -523,7 +537,6 @@ class Dialog extends Popup {
 			width,
 			height,
 			minWidth,
-			minHeight,
 		} = window.getComputedStyle(this);
 
 		this._initialX = event.clientX;
@@ -533,7 +546,7 @@ class Dialog extends Popup {
 		this._initialTop = top;
 		this._initialLeft = left;
 		this._minWidth = Number.parseFloat(minWidth);
-		this._minHeight = Number.parseFloat(minHeight);
+		this._cachedMinHeight = this._minHeight;
 
 		Object.assign(this.style, {
 			top: `${top}px`,
@@ -571,7 +584,7 @@ class Dialog extends Popup {
 
 		const newHeight = clamp(
 			this._initialHeight + (clientY - this._initialY),
-			this._minHeight,
+			this._cachedMinHeight,
 			window.innerHeight - this._initialTop,
 		);
 
@@ -583,20 +596,20 @@ class Dialog extends Popup {
 	}
 
 	_onResizeMouseUp() {
-		this._initialX = null;
-		this._initialY = null;
-		this._initialWidth = null;
-		this._initialHeight = null;
-		this._initialTop = null;
-		this._initialLeft = null;
-		this._minWidth = null;
-		this._minHeight = null;
+		delete this._initialX;
+		delete this._initialY;
+		delete this._initialWidth;
+		delete this._initialHeight;
+		delete this._initialTop;
+		delete this._initialLeft;
+		delete this._minWidth;
+		delete this._cachedMinHeight;
 
 		this._detachMouseResizeHandlers();
 	}
 
 	_attachMouseResizeHandlers() {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 
 		window.addEventListener("mousemove", this._resizeMouseMoveHandler);
 		window.addEventListener("mouseup", this._resizeMouseUpHandler);

package/src/GroupHeaderListItem.js

@@ -15,7 +15,7 @@ import groupheaderListItemCss from "./generated/themes/GroupHeaderListItem.css.j
 const metadata = {
 	tag: "ui5-li-groupheader",
 	languageAware: true,
-	properties: /** @lends  sap.ui.webcomponents.main.GroupHeaderListItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.GroupHeaderListItem.prototype */ {
 		/**
 		 * Defines the text alternative of the component.
 		 * Note: If not provided a default text alternative will be set, if present.
@@ -43,7 +43,7 @@ const metadata = {
 			type: Node,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.GroupHeaderListItem.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.GroupHeaderListItem.prototype */ {
 	},
 };
 

package/src/Icon.js

@@ -1,10 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
-import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
 import IconTemplate from "./generated/templates/IconTemplate.lit.js";
 
 // Styles
@@ -275,10 +273,6 @@ class Icon extends UI5Element {
 		return iconCss;
 	}
 
-	static async onDefine() {
-		this.createGlobalStyle(); // hide all icons until the first icon has rendered (and added the Icon.css)
-	}
-
 	_onFocusInHandler(event) {
 		if (this.interactive) {
 			this.focused = true;
@@ -354,24 +348,6 @@ class Icon extends UI5Element {
 		return this.effectiveAccessibleName ? "img" : PRESENTATION_ROLE;
 	}
 
-	static createGlobalStyle() {
-		if (isLegacyBrowser()) {
-			const styleElement = document.head.querySelector(`style[data-ui5-icon-global]`);
-			if (!styleElement) {
-				createStyleInHead(`ui5-icon { display: none !important; }`, { "data-ui5-icon-global": "" });
-			}
-		}
-	}
-
-	static removeGlobalStyle() {
-		if (isLegacyBrowser()) {
-			const styleElement = document.head.querySelector(`style[data-ui5-icon-global]`);
-			if (styleElement) {
-				document.head.removeChild(styleElement);
-			}
-		}
-	}
-
 	async onBeforeRendering() {
 		const name = this.name;
 		if (!name) {
@@ -417,12 +393,6 @@ class Icon extends UI5Element {
 	get hasIconTooltip() {
 		return this.showTooltip && this.effectiveAccessibleName;
 	}
-
-	async onEnterDOM() {
-		setTimeout(() => {
-			this.constructor.removeGlobalStyle(); // remove the global style as Icon.css is already in place
-		}, 0);
-	}
 }
 
 Icon.define();

package/src/Input.hbs

@@ -28,7 +28,7 @@
 			aria-label="{{accInfo.input.ariaLabel}}"
 			aria-required="{{required}}"
 			@input="{{_handleInput}}"
-			@change="{{_handleNativeInputChange}}"
+			@change="{{_handleChange}}"
 			@keydown="{{_onkeydown}}"
 			@keyup="{{_onkeyup}}"
 			@click={{_click}}
@@ -40,7 +40,7 @@
 		/>
 
 		{{#if effectiveShowClearIcon}}
-			<ui5-icon @click={{_clear}} tabindex="-1" input-icon class="ui5-input-clear-icon" name="decline"></ui5-icon>
+			<ui5-icon @click={{_clear}} @mousedown={{_iconMouseDown}} tabindex="-1" input-icon class="ui5-input-clear-icon" name="decline"></ui5-icon>
 		{{/if}}
 
 		{{#if icon.length}}

package/src/Input.js

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
-	isIE,
 	isPhone,
 	isSafari,
 	isAndroid,
@@ -151,7 +150,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Input.prototype */  {
+	properties: /** @lends sap.ui.webcomponents.main.Input.prototype */  {
 
 		/**
 		 * Defines whether the component is in disabled state.
@@ -440,7 +439,7 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.Input.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.Input.prototype */ {
 		/**
 		 * Fired when the input operation has finished by pressing Enter or on focusout.
 		 *
@@ -768,11 +767,6 @@ class Input extends UI5Element {
 	}
 
 	_onkeyup(event) {
-		// The native Delete event does not update the value property "on time". So, the (native) change event is always fired with the old value
-		if (isDelete(event)) {
-			this.value = event.target.value;
-		}
-
 		this._keyDown = false;
 		this._backspaceKeyDown = false;
 	}
@@ -804,7 +798,7 @@ class Input extends UI5Element {
 
 	_handleEnter(event) {
 		const itemPressed = !!(this.Suggestions && this.Suggestions.onEnter(event));
-
+		const innerInput = this.getInputDOMRefSync();
 		// Check for autocompleted item
 		const matchingItem = this.suggestionItems.find(item => {
 			return (item.text && item.text === this.value) || (item.textContent === this.value);
@@ -820,8 +814,12 @@ class Input extends UI5Element {
 			}
 		}
 
+		if (this._isPhone && !this.suggestionItems.length) {
+			innerInput.setSelectionRange(this.value.length, this.value.length);
+		}
+
 		if (!itemPressed) {
-			this.fireEventByAction(this.ACTION_ENTER);
+			this.fireEventByAction(this.ACTION_ENTER, event);
 			this.lastConfirmedValue = this.value;
 
 			if (this.FormSupport) {
@@ -902,7 +900,6 @@ class Input extends UI5Element {
 		this.focused = true; // invalidating property
 		this.previousValue = this.value;
 		this.valueBeforeItemPreview = this.value;
-		this._shouldAutocomplete = false;
 
 		this._inputIconFocused = event.target && event.target === this.querySelector("[ui5-icon]");
 	}
@@ -911,7 +908,10 @@ class Input extends UI5Element {
 		const focusedOutToSuggestions = this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.contains(this.Suggestions.responsivePopover);
 		const focusedOutToValueStateMessage = event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root");
 
-		this._preventNextChange = this.effectiveShowClearIcon && this.shadowRoot.contains(event.relatedTarget);
+		if (this.showClearIcon && !this.effectiveShowClearIcon) {
+			this._clearIconClicked = false;
+			this._handleChange();
+		}
 
 		// if focusout is triggered by pressing on suggestion item or value state message popover, skip invalidation, because re-rendering
 		// will happen before "itemPress" event, which will make item "active" state not visualized
@@ -955,21 +955,14 @@ class Input extends UI5Element {
 		}
 	}
 
-	_handleNativeInputChange() {
-		// The native change sometimes fires too early and getting input's value in the listener would return
-		// the previous value instead of the most recent one. This would make things consistent.
-		clearTimeout(this._nativeChangeDebounce);
-		this._nativeChangeDebounce = setTimeout(() => this._handleChange(), 100);
-	}
-
 	_handleChange() {
-		if (this._preventNextChange) {
-			this._preventNextChange = false;
+		if (this._clearIconClicked) {
+			this._clearIconClicked = false;
 			return;
 		}
 
-		if (this._changeFiredValue !== this.value) {
-			this._changeFiredValue = this.value;
+		if (this._changeFiredValue !== this.getInputDOMRefSync().value) {
+			this._changeFiredValue = this.getInputDOMRefSync().value;
 			this.fireEvent(this.EVENT_CHANGE);
 		}
 	}
@@ -977,13 +970,15 @@ class Input extends UI5Element {
 	_clear() {
 		this.value = "";
 		this.fireEvent(this.EVENT_INPUT);
-		this._handleChange();
-
 		if (!this._isPhone) {
 			this.focus();
 		}
 	}
 
+	_iconMouseDown() {
+		this._clearIconClicked = true;
+	}
+
 	_scroll(event) {
 		const detail = event.detail;
 		this.fireEvent("suggestion-scroll", {
@@ -995,7 +990,9 @@ class Input extends UI5Element {
 	_handleInput(event) {
 		const inputDomRef = this.getInputDOMRefSync();
 		const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef.value;
+		const eventType = event.inputType || event.detail.inputType;
 
+		this._shouldAutocomplete = eventType !== "deleteContentBackward" && !this.noTypeahead;
 		this.suggestionSelectionCanceled = false;
 
 		if (emptyValueFiredOnNumberInput && !this._backspaceKeyDown) {
@@ -1030,7 +1027,7 @@ class Input extends UI5Element {
 				this.valueBeforeItemPreview = newValue;
 
 				// fire events
-				this.fireEvent(this.EVENT_INPUT);
+				this.fireEvent(this.EVENT_INPUT, { inputType: event.inputType });
 				this.fireEvent("value-changed");
 				return;
 			}
@@ -1043,13 +1040,7 @@ class Input extends UI5Element {
 			event.stopImmediatePropagation();
 		}
 
-		/* skip calling change event when an input with a placeholder is focused on IE
-			- value of the host and the internal input should be differnt in case of actual input
-			- input is called when a key is pressed => keyup should not be called yet
-		*/
-		const skipFiring = (inputDomRef.value === this.value) && isIE() && !this._keyDown && !!this.placeholder;
-
-		!skipFiring && this.fireEventByAction(this.ACTION_USER_INPUT);
+		this.fireEventByAction(this.ACTION_USER_INPUT, event);
 
 		this.hasSuggestionItemSelected = false;
 		this._isValueStateFocused = false;
@@ -1090,7 +1081,11 @@ class Input extends UI5Element {
 		this.value = value;
 
 		innerInput.value = value;
-		innerInput.setSelectionRange(filterValue.length, value.length);
+		setTimeout(() => {
+			innerInput.setSelectionRange(filterValue.length, value.length);
+		}, 0);
+
+		this._shouldAutocomplete = false;
 	}
 
 	_handleResize() {
@@ -1185,7 +1180,7 @@ class Input extends UI5Element {
 
 		const itemText = item.text || item.textContent; // keep textContent for compatibility
 		const fireInput = keyboardUsed
-			? this.valueBeforeItemSelection !== itemText : this.value !== itemText;
+			? this.valueBeforeItemSelection !== itemText : this.valueBeforeAutoComplete !== itemText;
 
 		this.hasSuggestionItemSelected = true;
 
@@ -1193,6 +1188,7 @@ class Input extends UI5Element {
 			this.value = itemText;
 			this.valueBeforeItemSelection = itemText;
 			this.lastConfirmedValue = itemText;
+			this.getInputDOMRefSync().value = itemText;
 			this.fireEvent(this.EVENT_INPUT);
 			this._handleChange();
 		}
@@ -1242,7 +1238,7 @@ class Input extends UI5Element {
 		return this.getSuggestionByListItem(this._previewItem);
 	}
 
-	async fireEventByAction(action) {
+	async fireEventByAction(action, event) {
 		await this.getInputDOMRef();
 
 		if (this.disabled || this.readonly) {
@@ -1268,16 +1264,9 @@ class Input extends UI5Element {
 		}
 
 		if (isUserInput) { // input
-			this.fireEvent(this.EVENT_INPUT);
+			this.fireEvent(this.EVENT_INPUT, { inputType: event.inputType });
 			// Angular two way data binding
 			this.fireEvent("value-changed");
-			return;
-		}
-
-		// In IE, pressing the ENTER does not fire change
-		const valueChanged = (this.previousValue !== undefined) && (this.previousValue !== this.value);
-		if (isIE() && action === this.ACTION_ENTER && valueChanged) {
-			this._handleChange();
 		}
 	}
 
@@ -1300,8 +1289,8 @@ class Input extends UI5Element {
 	}
 
 	getInputDOMRefSync() {
-		if (isPhone() && this.Suggestions) {
-			return this.Suggestions && this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone");
+		if (isPhone() && this.Suggestions && this.Suggestions.responsivePopover) {
+			return this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone").shadowRoot.querySelector("input");
 		}
 
 		return this.nativeInput;

package/src/InputPopover.hbs

@@ -30,7 +30,7 @@
 						.value="{{value}}"
 						?show-clear-icon={{showClearIcon}}
 						placeholder="{{placeholder}}"
-						@input="{{_handleInput}}"
+						@ui5-input="{{_handleInput}}"
 						@change="{{_handleChange}}"
 					></ui5-input>
 				</div>

package/src/Link.js

@@ -20,7 +20,7 @@ import linkCss from "./generated/themes/Link.css.js";
 const metadata = {
 	tag: "ui5-link",
 	languageAware: true,
-	properties: /** @lends  sap.ui.webcomponents.main.Link.prototype */  {
+	properties: /** @lends sap.ui.webcomponents.main.Link.prototype */  {
 
 		/**
 		 * Defines whether the component is disabled.
@@ -206,9 +206,20 @@ const metadata = {
 		 *
 		 * @event
 		 * @public
-		 * @native
+		 * @allowPreventDefault
+		 * @param {Boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
+		 * @param {Boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
+		 * @param {Boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
+		 * @param {Boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
 		 */
-		click: {},
+		click: {
+			detail: {
+				altKey: { type: Boolean	},
+				ctrlKey: { type: Boolean },
+				metaKey: { type: Boolean },
+				shiftKey: { type: Boolean },
+			},
+		},
 	},
 };
 
@@ -331,7 +342,25 @@ class Link extends UI5Element {
 	}
 
 	_onclick(event) {
+		const {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		} = event;
+
 		event.isMarked = "link";
+
+		const executeEvent = this.fireEvent("click", {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		}, true);
+
+		if (!executeEvent) {
+			event.preventDefault();
+		}
 	}
 
 	_onfocusin(event) {
@@ -345,12 +374,7 @@ class Link extends UI5Element {
 
 	_onkeydown(event) {
 		if (isEnter(event)) {
-			event.preventDefault();
-			const executeEvent = this.fireEvent("click", null, true);
-
-			if (executeEvent) {
-				this.href && window.open(this.href, this.target);
-			}
+			this._onclick(event);
 		} else if (isSpace(event)) {
 			event.preventDefault();
 		}
@@ -364,11 +388,12 @@ class Link extends UI5Element {
 			return;
 		}
 
-		event.preventDefault();
+		this._onclick(event);
+
+		if (this.href && !event.defaultPrevented) {
+			const customEvent = new MouseEvent("click");
 
-		const executeEvent = this.fireEvent("click", null, true);
-		if (executeEvent) {
-			this.href && window.open(this.href, this.target);
+			this.getDomRef().dispatchEvent(customEvent);
 		}
 	}
 }

package/src/List.js

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import {
@@ -77,7 +76,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.List.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.List.prototype */ {
 
 		/**
 		 * Defines the component header text.
@@ -265,7 +264,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.List.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.List.prototype */ {
 
 		/**
 		 * Fired when an item is activated, unless the item's <code>type</code> property
@@ -598,15 +597,10 @@ class List extends UI5Element {
 	}
 
 	get growsOnScroll() {
-		return this.growing === ListGrowingMode.Scroll && !isIE();
+		return this.growing === ListGrowingMode.Scroll;
 	}
 
 	get growsWithButton() {
-		if (isIE()) {
-			// On IE fallback to "More" button, even if growing of type "Scroll" is set.
-			return this.grows;
-		}
-
 		return this.growing === ListGrowingMode.Button;
 	}
 
@@ -615,7 +609,7 @@ class List extends UI5Element {
 	}
 
 	get busyIndPosition() {
-		if (isIE() || !this.grows) {
+		if (!this.grows) {
 			return "absolute";
 		}
 

package/src/ListItem.hbs

@@ -19,7 +19,7 @@
 	aria-posinset="{{_accInfo.posinset}}"
 	aria-setsize="{{_accInfo.setsize}}"
 	aria-describedby="{{_id}}-invisibleText-describedby"
-	aria-labelledby="{{_id}}-invisibleText {{_id}}-content"
+	aria-labelledby="{{_accessibleNameRef}}"
 	aria-disabled="{{ariaDisabled}}"
 >
 		{{> listItemPreContent}}

package/src/ListItem.js

@@ -24,7 +24,7 @@ import styles from "./generated/themes/ListItem.css.js";
  */
 const metadata = {
 	languageAware: true,
-	properties: /** @lends  sap.ui.webcomponents.main.ListItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {
 
 		/**
 		 * Defines the visual indication and behavior of the list items.
@@ -376,6 +376,16 @@ class ListItem extends ListItemBase {
 		return ListItem.i18nBundle.getText(DELETE);
 	}
 
+	get _accessibleNameRef() {
+		if (this.accessibleName) {
+			// accessibleName is set - return labels excluding content
+			return `${this._id}-invisibleText`;
+		}
+
+		// accessibleName is not set - return _accInfo.listItemAriaLabel including content
+		return `${this._id}-content ${this._id}-invisibleText`;
+	}
+
 	get _accInfo() {
 		return {
 			role: this.accessibleRole || this.role,