feat(TimePicker): add inputOnChangeDelay option for manual time input

- Add 750ms default delay before processing manual time input changes
- Implement debounced input handling to prevent excessive updates while typing
- Add timeout cleanup in dispose method to prevent memory leaks
- Update configuration options and type definitions
- Update time-picker.md documentation with new option

Author: mrholek

docs/content/forms/time-picker.md

@@ -223,6 +223,7 @@ const timePickerList = timePickerElementList.map(timePickerEl => {
 | `footer` | boolean | `true` | Toggle visibility of footer element. |
 | `hours` | array, function, null | `null` | Specify a list of available hours using an array, or customize the filtering of hours through a function. |
 | `indicator` | boolean | `true` | Toggle visibility or set the content of the input indicator. |
+| `inputOnChangeDelay` | number | `750` | Delay in milliseconds before processing manual time input changes. |
 | `inputReadOnly` | boolean | `false` | Toggle the readonly state for the component. |
 | `invalid` | boolean | `false` | Toggle the invalid state for the component. |
 | `locale` | string | `'default'` | Sets the default locale for components. If not set, it is inherited from the navigator.language. |

js/src/time-picker.js

@@ -84,6 +84,7 @@ const Default = {
   footer: true,
   hours: null,
   indicator: true,
+  inputOnChangeDelay: 750,
   inputReadOnly: false,
   invalid: false,
   locale: 'default',
@@ -110,6 +111,7 @@ const DefaultType = {
   footer: 'boolean',
   hours: '(array|function|null)',
   indicator: 'boolean',
+  inputOnChangeDelay: 'number',
   inputReadOnly: 'boolean',
   invalid: 'boolean',
   locale: 'string',
@@ -145,6 +147,7 @@ class TimePicker extends BaseComponent {
     this._input = null
     this._menu = null
     this._timePickerBody = null
+    this._inputTimeout = null
 
     this._localizedTimePartials = getLocalizedTimePartials(
       this._config.locale,
@@ -220,6 +223,10 @@ class TimePicker extends BaseComponent {
       this._popper.destroy()
     }
 
+    if (this._inputTimeout) {
+      clearTimeout(this._inputTimeout)
+    }
+
     super.dispose()
   }
 
@@ -308,15 +315,21 @@ class TimePicker extends BaseComponent {
     })
 
     EventHandler.on(this._input, EVENT_INPUT, event => {
-      if (isValidTime(event.target.value)) {
-        this._date = this._convertStringToDate(event.target.value)
-
-        EventHandler.trigger(this._element, EVENT_TIME_CHANGE, {
-          timeString: this._date ? this._date.toTimeString() : null,
-          localeTimeString: this._date ? this._date.toLocaleTimeString() : null,
-          date: this._date
-        })
+      if (this._inputTimeout) {
+        clearTimeout(this._inputTimeout)
       }
+
+      this._inputTimeout = setTimeout(() => {
+        if (isValidTime(event.target.value)) {
+          this._date = this._convertStringToDate(event.target.value)
+
+          EventHandler.trigger(this._element, EVENT_TIME_CHANGE, {
+            timeString: this._date ? this._date.toTimeString() : null,
+            localeTimeString: this._date ? this._date.toLocaleTimeString() : null,
+            date: this._date
+          })
+        }
+      }, this._config.inputOnChangeDelay)
     })
 
     if (this._config.type === 'dropdown') {