@gitlab/ui 126.0.0 → 126.0.1

package/dist/components/base/form/form_fields/form_fields.js

@@ -144,6 +144,10 @@ var script = {
     this.$emit('input', this.fieldValues);
     (_this$formElement = this.formElement) === null || _this$formElement === void 0 ? void 0 : _this$formElement.addEventListener('submit', this.onFormSubmission);
   },
+  created() {
+    this.batchedInputEvent = {};
+    this.isBatchedInputEventScheduled = false;
+  },
   destroyed() {
     var _this$formElement2;
     (_this$formElement2 = this.formElement) === null || _this$formElement2 === void 0 ? void 0 : _this$formElement2.removeEventListener('submit', this.onFormSubmission);
@@ -192,17 +196,9 @@ var script = {
         this.setFieldDirty(fieldName);
       }
     },
-    onFieldInput(fieldName, inputValue) {
+    async onFieldInput(fieldName, inputValue) {
       const val = this.getMappedValue(fieldName, inputValue);
 
-      /**
-       * Emitted when any of the form values change. Used by `v-model`.
-       */
-      this.$emit('input', {
-        ...this.values,
-        [fieldName]: val
-      });
-
       /**
        * Emitted when a form input emits the `input` event.
        */
@@ -210,6 +206,27 @@ var script = {
         name: fieldName,
         value: val
       });
+      this.batchedInputEvent = {
+        ...this.batchedInputEvent,
+        [fieldName]: val
+      };
+
+      // Return if a batched input event has already been scheduled
+      if (this.isBatchedInputEventScheduled) {
+        return;
+      }
+      this.isBatchedInputEventScheduled = true;
+      await this.$nextTick();
+
+      /**
+       * Emitted when any of the form values change. Used by `v-model`.
+       */
+      this.$emit('input', {
+        ...this.values,
+        ...this.batchedInputEvent
+      });
+      this.batchedInputEvent = {};
+      this.isBatchedInputEventScheduled = false;
     },
     async onFormSubmission(e) {
       e.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "126.0.0",
+  "version": "126.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/form/form_fields/form_fields.vue

@@ -154,6 +154,10 @@ export default {
 
     this.formElement?.addEventListener('submit', this.onFormSubmission);
   },
+  created() {
+    this.batchedInputEvent = {};
+    this.isBatchedInputEventScheduled = false;
+  },
   destroyed() {
     this.formElement?.removeEventListener('submit', this.onFormSubmission);
   },
@@ -209,17 +213,9 @@ export default {
         this.setFieldDirty(fieldName);
       }
     },
-    onFieldInput(fieldName, inputValue) {
+    async onFieldInput(fieldName, inputValue) {
       const val = this.getMappedValue(fieldName, inputValue);
 
-      /**
-       * Emitted when any of the form values change. Used by `v-model`.
-       */
-      this.$emit('input', {
-        ...this.values,
-        [fieldName]: val,
-      });
-
       /**
        * Emitted when a form input emits the `input` event.
        */
@@ -227,6 +223,30 @@ export default {
         name: fieldName,
         value: val,
       });
+
+      this.batchedInputEvent = {
+        ...this.batchedInputEvent,
+        [fieldName]: val,
+      };
+
+      // Return if a batched input event has already been scheduled
+      if (this.isBatchedInputEventScheduled) {
+        return;
+      }
+
+      this.isBatchedInputEventScheduled = true;
+      await this.$nextTick();
+
+      /**
+       * Emitted when any of the form values change. Used by `v-model`.
+       */
+      this.$emit('input', {
+        ...this.values,
+        ...this.batchedInputEvent,
+      });
+
+      this.batchedInputEvent = {};
+      this.isBatchedInputEventScheduled = false;
     },
     async onFormSubmission(e) {
       e.preventDefault();