refactor: rewrite time-picker value formatting logic to use updated (#12468) (#12476)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: vaadin-bot

packages/time-picker/src/vaadin-time-picker-mixin.js

@@ -110,7 +110,6 @@ export const TimePickerMixin = (superClass) =>
         '_openedOrItemsChanged(opened, _dropdownItems)',
         '_updateScroller(opened, _dropdownItems, _focusedIndex, _theme, _comboBoxValue)',
         '__updateAriaAttributes(_dropdownItems, opened, inputElement)',
-        '__updateDropdownItems(__effectiveI18n, min, max, step)',
       ];
     }
 
@@ -230,6 +229,23 @@ export const TimePickerMixin = (superClass) =>
       this.addController(this._tooltipController);
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (['__effectiveI18n', 'min', 'max', 'step'].some((prop) => props.has(prop))) {
+        this.__updateDropdownItems();
+      }
+
+      if (props.has('step')) {
+        this.__updateValue(this.__getTimeObject(this.value));
+      }
+
+      if (props.has('__effectiveI18n') && this.value) {
+        this.__updateInputValue(this.__getTimeObject(this.value));
+      }
+    }
+
     /**
      * Returns true if the current input value satisfies all constraints (if any).
      * You can override this method for custom validations.
@@ -457,6 +473,15 @@ export const TimePickerMixin = (superClass) =>
       return result;
     }
 
+    /**
+     * Returning Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
+     * from an ISO 8601 time, stripped to the resolution defined by the step.
+     * @private
+     */
+    __getTimeObject(timeString) {
+      return validateTime(parseISOTime(timeString), this.step);
+    }
+
     /**
      * Returning seconds from Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
      * @private
@@ -503,25 +528,11 @@ export const TimePickerMixin = (superClass) =>
     }
 
     /** @private */
-    __updateDropdownItems(effectiveI18n, min, max, step) {
-      const minTimeObj = validateTime(parseISOTime(min || MIN_ALLOWED_TIME), step);
-      const minSec = this.__getSec(minTimeObj);
-
-      const maxTimeObj = validateTime(parseISOTime(max || MAX_ALLOWED_TIME), step);
-      const maxSec = this.__getSec(maxTimeObj);
+    __updateDropdownItems() {
+      const minSec = this.__getSec(this.__getTimeObject(this.min || MIN_ALLOWED_TIME));
+      const maxSec = this.__getSec(this.__getTimeObject(this.max || MAX_ALLOWED_TIME));
 
-      this._dropdownItems = this.__generateDropdownList(minSec, maxSec, step);
-
-      const parsedValue = validateTime(parseISOTime(this.value), step);
-
-      if (step !== this.__oldStep) {
-        this.__oldStep = step;
-        this.__updateValue(parsedValue);
-      }
-
-      if (this.value) {
-        this._comboBoxValue = effectiveI18n.formatTime(parsedValue);
-      }
+      this._dropdownItems = this.__generateDropdownList(minSec, maxSec, this.step);
     }
 
     /** @private */