feat(ui5-time-picker): introduce open property (#9001)

Add open property to replace the openPicker method in the ui5-time-picker component.

packages/main/src/TimePicker.hbs

@@ -33,8 +33,8 @@
 			name="{{openIconName}}"
 			tabindex="-1"
 			show-tooltip
-			@click="{{togglePicker}}"
-			?pressed="{{_isPickerOpen}}"
+			@click="{{_togglePicker}}"
+			?pressed="{{open}}"
 			class="ui5-time-picker-input-icon-button inputIcon"
 		></ui5-icon>
 	{{/unless}}

packages/main/src/TimePicker.ts

@@ -258,8 +258,14 @@ class TimePicker extends UI5Element implements IFormInputElement {
 	@property()
 	formatPattern!: string;
 
-	@property({ type: Boolean, noAttribute: true })
-	_isPickerOpen!: boolean;
+	/**
+	 * Defines the open or closed state of the popover.
+	 * @public
+	 * @default false
+	 * @since 2.0
+	 */
+	@property({ type: Boolean })
+	open!: boolean;
 
 	@property({ type: Boolean, noAttribute: true })
 	_isInputsPopoverOpen!: boolean;
@@ -300,6 +306,8 @@ class TimePicker extends UI5Element implements IFormInputElement {
 		if (this.value) {
 			this.value = this.normalizeValue(this.value) || this.value;
 		}
+
+		this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(UI5Date.getInstance());
 	}
 
 	get dateAriaDescription() {
@@ -361,58 +369,17 @@ class TimePicker extends UI5Element implements IFormInputElement {
 		this.tempValue = e.detail.value; // every time the user changes the time selection -> update tempValue
 	}
 
-	/**
-	 * Opens the picker.
-	 * @public
-	 * @returns Resolves when the picker is open
-	 */
-	openPicker(): void {
-		this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(UI5Date.getInstance());
-		const responsivePopover = this._getPopover();
-		responsivePopover.opener = this;
-		responsivePopover.open = true;
-	}
-
-	/**
-	 * Closes the picker
-	 * @public
-	 * @returns Resolves when the picker is closed
-	 */
-	closePicker(): void {
-		const responsivePopover = this._getPopover();
-		responsivePopover.open = false;
-		this._isPickerOpen = false;
-	}
-
-	togglePicker() {
-		if (this.isOpen()) {
-			this.closePicker();
-		} else if (this._canOpenPicker()) {
-			this.openPicker();
-		}
-	}
-
-	/**
-	 * Checks if the picker is open
-	 * @public
-	 */
-	isOpen(): boolean {
-		return !!this._isPickerOpen;
+	_togglePicker() {
+		this.open = !this.open;
 	}
 
 	submitPickers() {
 		this._updateValueAndFireEvents(this.tempValue!, true, ["change", "value-changed"]);
-		this.closePicker();
+		this._togglePicker();
 	}
 
 	onResponsivePopoverAfterClose() {
-		this._isPickerOpen = false;
-	}
-
-	onResponsivePopoverAfterOpen() {
-		this._isPickerOpen = true;
-		const responsivePopover = this._getPopover();
-		responsivePopover.querySelector<TimeSelectionClocks>("[ui5-time-selection-clocks]")!._focusFirstButton();
+		this.open = false;
 	}
 
 	/**
@@ -468,9 +435,9 @@ class TimePicker extends UI5Element implements IFormInputElement {
 		this._isInputsPopoverOpen = false;
 	}
 
-	_handleInputClick(evt: MouseEvent) {
-		const target = evt.target as HTMLElement;
-		if (this._isPickerOpen) {
+	_handleInputClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (this.open) {
 			return;
 		}
 
@@ -556,15 +523,15 @@ class TimePicker extends UI5Element implements IFormInputElement {
 		}
 		if (isShow(e)) {
 			e.preventDefault();
-			this.togglePicker();
+			this._togglePicker();
 		}
 
-		const target = e.target as Node;
+		const target = e.target as HTMLElement;
 
-		if ((this._getInput().isEqualNode(target) && this.isOpen()) && (isTabNext(e) || isTabPrevious(e) || isF6Next(e) || isF6Previous(e))) {
-			this.closePicker();
+		if (target && this.open && this._getInput().id === target.id && (isTabNext(e) || isTabPrevious(e) || isF6Next(e) || isF6Previous(e))) {
+			this._togglePicker();
 		}
-		if (this.isOpen()) {
+		if (this.open) {
 			return;
 		}
 		if (isPageUpShiftCtrl(e)) {
@@ -675,20 +642,20 @@ class TimePicker extends UI5Element implements IFormInputElement {
 		setTimeout(() => { this._getInput().readonly = false; }, 0);
 	}
 
-	_onfocusin(evt: FocusEvent) {
+	_onfocusin(e: FocusEvent) {
 		if (this._isPhone) {
 			this._hideMobileKeyboard();
 			if (this._isInputsPopoverOpen) {
 				const popover = this._getInputsPopover();
 				popover.applyFocus();
 			}
-			evt.preventDefault();
+			e.preventDefault();
 		}
 	}
 
-	_oninput(evt: CustomEvent) {
+	_oninput(e: CustomEvent) {
 		if (this._isPhone) {
-			evt.preventDefault();
+			e.preventDefault();
 		}
 	}
 

packages/main/src/TimePickerPopover.hbs

@@ -3,10 +3,11 @@
 	class="ui5-time-picker-popover"
 	placement="Bottom"
 	horizontal-align="Start"
+	.opener={{this}}
+	?open="{{open}}"
 	allow-target-overlap
 	_hide-header
 	hide-arrow
-	@ui5-open="{{onResponsivePopoverAfterOpen}}"
 	@ui5-close="{{onResponsivePopoverAfterClose}}"
 	@wheel="{{_handleWheel}}"
 	@keydown="{{_onkeydown}}"
@@ -22,7 +23,7 @@
 
 	<div slot="footer" class="ui5-time-picker-footer">
 		<ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
-		<ui5-button id="close" design="Transparent" @click="{{closePicker}}">{{cancelButtonLabel}}</ui5-button>
+		<ui5-button id="close" design="Transparent" @click="{{_togglePicker}}">{{cancelButtonLabel}}</ui5-button>
 	</div>
 </ui5-responsive-popover>
 

packages/main/test/specs/TimePicker.spec.js

@@ -212,4 +212,25 @@ describe("TimePicker general interaction", () => {
 		// assert that the value in the input is different than the string 'now'
 		assert.notStrictEqual(await timepicker.shadow$("ui5-input").getProperty("value"), "now", "the value is not 'now'");
 	});
+
+	it("opening time picker's value-help, sets the 'open' property to true", async () => {
+		const timepicker = await browser.$("#timepicker");
+		const timepickerPopover = await timepicker.shadow$("ui5-responsive-popover");
+
+		// act
+		await timepicker.shadow$("ui5-input").$(".ui5-time-picker-input-icon-button").click();
+
+		assert.strictEqual(await timepicker.getProperty("open"), true, "The timepicker's open property is set to true");
+		assert.strictEqual(await timepickerPopover.getProperty("open"), true, "The popover is opened");
+	})
+
+	it("setting time picker's open property to true, opens the value-help", async () => {
+		const timepicker = await browser.$("#timepicker");
+		const timepickerPopover = await timepicker.shadow$("ui5-responsive-popover");
+
+		// act
+		await timepicker.setProperty("open", true);
+
+		assert.strictEqual(await timepickerPopover.getProperty("open"), true, "The popover is opened");
+	})
 });