@ni/nimble-components 11.8.4 → 11.8.5

package/dist/all-components-bundle.js

@@ -16739,9 +16739,7 @@
     class Combobox extends Combobox$1 {
         constructor() {
             super(...arguments);
-            this.focusOutHandler = () => {
-                this.open = false;
-            };
+            this.valueUpdatedByInput = false;
         }
         // Workaround for https://github.com/microsoft/fast/issues/5123
         setPositioning() {
@@ -16765,10 +16763,6 @@
             // Call setPositioning() after this.forcedPosition is initialized.
             this.setPositioning();
             this.updateInputAriaLabel();
-            this.addEventListener('focusout', this.focusOutHandler);
-        }
-        disconnectedCallback() {
-            this.removeEventListener('focusout', this.focusOutHandler);
         }
         toggleButtonClickHandler(e) {
             e.stopImmediatePropagation();
@@ -16795,6 +16789,50 @@
             const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
             this.filteredOptions = enabledOptions;
         }
+        /**
+         * This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267
+         * For now, we will update the value ourselves while a user types in text. Note that there is other
+         * implementation related to this (like the 'keydownEventHandler') needed to create the complete set
+         * of desired behavior described in the issue noted above.
+         */
+        // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+        inputHandler(e) {
+            const returnValue = super.inputHandler(e);
+            if (!this.valueUpdatedByInput) {
+                this.valueBeforeTextUpdate = this.value;
+            }
+            this.value = this.control.value;
+            this.valueUpdatedByInput = true;
+            return returnValue;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+        keydownHandler(e) {
+            const returnValue = super.keydownHandler(e);
+            if (e.ctrlKey || e.altKey) {
+                return returnValue;
+            }
+            switch (e.key) {
+                case keyEnter:
+                    this.emitChangeIfValueUpdated();
+                    break;
+                case keyArrowDown:
+                case keyArrowUp:
+                    if (this.open && this.valueUpdatedByInput) {
+                        this.valueUpdatedByInput = false;
+                    }
+                    break;
+                default:
+                    return returnValue;
+            }
+            return returnValue;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+        focusoutHandler(e) {
+            const returnValue = super.focusoutHandler(e);
+            this.open = false;
+            this.emitChangeIfValueUpdated();
+            return returnValue;
+        }
         openChanged() {
             super.openChanged();
             if (this.dropdownButton) {
@@ -16814,6 +16852,24 @@
                 inputElement?.removeAttribute('aria-label');
             }
         }
+        /**
+         * This will only emit a `change` event after text entry where the text in the input prior to
+         * typing is different than the text present upon an attempt to commit (e.g. pressing <Enter>).
+         * So, for a concrete example:
+         * 1) User types 'Sue' (when Combobox input was blank).
+         * 2) User presses <Enter> -> 'change' event fires
+         * 3) User deletes 'Sue'
+         * 4) User re-types 'Sue'
+         * 5) User presses <Enter> -> NO 'change' event is fired
+         */
+        emitChangeIfValueUpdated() {
+            if (this.valueUpdatedByInput) {
+                if (this.value !== this.valueBeforeTextUpdate) {
+                    this.$emit('change');
+                }
+                this.valueUpdatedByInput = false;
+            }
+        }
     }
     __decorate([
         observable