feat: make input-based components open dialog on mobile device (#1144)

- All input-based components, such as "Input",  "Select", "DatePicker", "Combobox" and "MultiCombobox" now open Dialog on mobile devices and Popover on desktop (as before)
- Introduce new component ResponsivePopover, that manages that behavior.

Author: dimovpetar

packages/main/bundle.esm.js

@@ -30,6 +30,7 @@ import Link from "./dist/Link.js";
 import Popover from "./dist/Popover.js";
 import Panel from "./dist/Panel.js";
 import RadioButton from "./dist/RadioButton.js";
+import ResponsivePopover from "./dist/ResponsivePopover.js";
 import Select from "./dist/Select.js";
 import Option from "./dist/Option.js";
 import Switch from "./dist/Switch.js";

packages/main/src/ComboBox.hbs

@@ -3,7 +3,6 @@
 	aria-haspopup="listbox"
 	aria-expanded="{{open}}"
 >
-
 	<input id="ui5-combobox-input"
 		.value="{{_tempValue}}"
 		inner-input
@@ -14,6 +13,7 @@
 		value-state="{{valueState}}"
 		@input="{{_input}}"
 		@change="{{_inputChange}}"
+		@click={{_click}}
 		@keydown="{{_keydown}}"
 		@focusin="{{_focusin}}"
 		@focusout="{{_focusout}}"

packages/main/src/ComboBox.js

@@ -1,18 +1,28 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/icons/slim-arrow-down.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isBackSpace, isDelete, isShow } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
 import * as Filters from "./ComboBoxFilters.js";
 
-// Styles
+import {
+	INPUT_SUGGESTIONS_TITLE,
+} from "./generated/i18n/i18n-defaults.js";
+
+// Templates
 import ComboBoxTemplate from "./generated/templates/ComboBoxTemplate.lit.js";
 import ComboBoxPopoverTemplate from "./generated/templates/ComboBoxPopoverTemplate.lit.js";
+
+// Styles
 import ComboBoxCss from "./generated/themes/ComboBox.css.js";
 import ComboBoxPopoverCss from "./generated/themes/ComboBoxPopover.css.js";
+import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
+
 import ComboBoxItem from "./ComboBoxItem.js";
 import Icon from "./Icon.js";
-import Popover from "./Popover.js";
+import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
 import BusyIndicator from "./BusyIndicator.js";
 import StandardListItem from "./StandardListItem.js";
@@ -249,6 +259,10 @@ class ComboBox extends UI5Element {
 		return ComboBoxCss;
 	}
 
+	static get staticAreaStyles() {
+		return [ComboBoxPopoverCss, ResponsivePopoverCommonCss];
+	}
+
 	static get template() {
 		return ComboBoxTemplate;
 	}
@@ -257,15 +271,12 @@ class ComboBox extends UI5Element {
 		return ComboBoxPopoverTemplate;
 	}
 
-	static get staticAreaStyles() {
-		return ComboBoxPopoverCss;
-	}
-
 	constructor(props) {
 		super(props);
 
 		this._filteredItems = [];
 		this._initialRendering = true;
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -288,7 +299,10 @@ class ComboBox extends UI5Element {
 	}
 
 	onAfterRendering() {
-		this._width = this.getBoundingClientRect().width;
+		if (isPhone() && this._respPopover.opened) {
+			// Set initial focus to the native input
+			this.inner.focus();
+		}
 	}
 
 	_focusin(event) {
@@ -311,13 +325,18 @@ class ComboBox extends UI5Element {
 
 	_afterClosePopover() {
 		this._iconPressed = false;
+
+		// close device's keyboard and prevent further typing
+		if (isPhone()) {
+			this.blur();
+		}
 	}
 
-	_togglePopover() {
-		if (this.popover.opened) {
-			this.popover.close();
+	_toggleRespPopover() {
+		if (this._respPopover.opened) {
+			this._respPopover.close();
 		} else {
-			this.popover.openBy(this);
+			this._respPopover.open(this);
 		}
 	}
 
@@ -330,7 +349,7 @@ class ComboBox extends UI5Element {
 		this.inner.focus();
 		this._resetFilter();
 
-		this._togglePopover();
+		this._toggleRespPopover();
 	}
 
 	_input(event) {
@@ -344,7 +363,7 @@ class ComboBox extends UI5Element {
 		this.filterValue = value;
 		this.fireEvent("input");
 
-		this.popover.openBy(this);
+		this._respPopover.open(this);
 	}
 
 	_startsWithMatchingItems(str) {
@@ -357,10 +376,20 @@ class ComboBox extends UI5Element {
 		if (isShow(event) && !this.readonly && !this.disabled) {
 			event.preventDefault();
 			this._resetFilter();
-			this._togglePopover();
+			this._toggleRespPopover();
+		}
+	}
+
+	_click(event) {
+		if (isPhone() && !this.readonly) {
+			this._respPopover.open(this);
 		}
 	}
 
+	_closeRespPopover() {
+		this._respPopover.close();
+	}
+
 	_filterItems(str) {
 		return (Filters[this.filter] || Filters.StartsWithPerTerm)(str, this.items);
 	}
@@ -402,6 +431,7 @@ class ComboBox extends UI5Element {
 		const listItem = event.detail.item;
 
 		this._tempValue = listItem.mappedItem.text;
+		this.filterValue = this._tempValue;
 
 		this._filteredItems.map(item => {
 			item.selected = (item === listItem.mappedItem);
@@ -410,15 +440,7 @@ class ComboBox extends UI5Element {
 		});
 
 		this._inputChange();
-		this.popover.close();
-	}
-
-	get styles() {
-		return {
-			popover: {
-				"min-width": `${this._width}px`,
-			},
-		};
+		this._respPopover.close();
 	}
 
 	get _filteredItems() {
@@ -427,12 +449,16 @@ class ComboBox extends UI5Element {
 		});
 	}
 
+	get _headerTitleText() {
+		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+	}
+
 	get inner() {
-		return this.shadowRoot.querySelector("[inner-input]");
+		return isPhone() ? this._respPopover.querySelector(".ui5-input-inner-phone") : this.shadowRoot.querySelector("[inner-input]");
 	}
 
-	get popover() {
-		return this.getStaticAreaItemDomRef().querySelector("ui5-popover");
+	get _respPopover() {
+		return this.getStaticAreaItemDomRef().querySelector("ui5-responsive-popover");
 	}
 
 	get editable() {
@@ -443,7 +469,7 @@ class ComboBox extends UI5Element {
 		await Promise.all([
 			ComboBoxItem.define(),
 			Icon.define(),
-			Popover.define(),
+			ResponsivePopover.define(),
 			List.define(),
 			BusyIndicator.define(),
 			StandardListItem.define(),

packages/main/src/ComboBoxPopover.hbs

@@ -1,22 +1,48 @@
-<ui5-popover
-	style={{styles.popover}}
-	horizontal-align="Left"
-	?no-arrow={{editable}}
-	no-padding="true"
-	placement-type="Bottom"
-	_disable-initial-focus="true"
+<ui5-responsive-popover
+	no-arrow
+	_disable-initial-focus
 	@ui5-afterOpen={{_afterOpenPopover}}
 	@ui5-afterClose={{_afterClosePopover}}
 >
-
-	<ui5-busyindicator 
+	<ui5-busyindicator
 		?active={{loading}}
 		size="Medium"
 		class="ui5-combobox-busy"
 	>
 	</ui5-busyindicator>
 
-	<ui5-list 
+	<div slot="header" class="ui5-responsive-popover-header">
+		<div class="row">
+			<span>{{_headerTitleText}}</span>
+			<ui5-button
+				icon="decline"
+				design="Transparent"
+				@click="{{_closeRespPopover}}"
+			>
+			</ui5-button>
+		</div>
+		<div class="row">
+			<div
+				slot="header"
+				class="input-root-phone"
+				value-state="{{valueState}}"
+			>
+				<input
+					class="ui5-input-inner-phone"
+					.value="{{_tempValue}}"
+					inner-input
+					placeholder="{{placeholder}}"
+					value-state="{{valueState}}"
+					@input="{{_input}}"
+					@change="{{_inputChange}}"
+					@keydown="{{_keydown}}"
+					aria-autocomplete="both"
+				/>
+			</div>
+		</div>
+	</div>
+
+	<ui5-list
 		separators="None"
 		@ui5-itemClick={{_selectItem}}
 		mode="SingleSelect"
@@ -31,4 +57,11 @@
 			</ui5-li>
 		{{/each}}
 	</ui5-list>
-</ui5-popover>
+
+	<div slot="footer" class="ui5-responsive-popover-footer">
+		<ui5-button
+			design="Transparent"
+			@click="{{_closeRespPopover}}"
+		>OK</ui5-button>
+	</div>
+</ui5-responsive-popover>

packages/main/src/DatePicker.hbs

@@ -32,5 +32,6 @@
 			></ui5-icon>
 		{{/unless}}
 	</ui5-input>
+
 	<slot name="formSupport"></slot>
 </div>