Add latest changes from gitlab-org/gitlab@15-8-stable-eev15.8.0-rc42

1 files changed, 30 insertions, 29 deletions

diff --git a/app/assets/javascripts/autosave.js b/app/assets/javascripts/autosave.js
index 5ab66acaf80..2e187eae17c 100644
--- a/app/assets/javascripts/autosave.js
+++ b/app/assets/javascripts/autosave.js
@@ -1,56 +1,57 @@
-/* eslint-disable no-param-reassign, consistent-return */
-
+import { parseBoolean } from '~/lib/utils/common_utils';
 import AccessorUtilities from './lib/utils/accessor';
 
 export default class Autosave {
   constructor(field, key, fallbackKey, lockVersion) {
     this.field = field;
-    this.type = this.field.prop('type');
+    this.type = this.field.getAttribute('type');
     this.isLocalStorageAvailable = AccessorUtilities.canUseLocalStorage();
-    if (key.join != null) {
-      key = key.join('/');
-    }
-    this.key = `autosave/${key}`;
+    this.key = Array.isArray(key) ? `autosave/${key.join('/')}` : `autosave/${key}`;
     this.fallbackKey = fallbackKey;
     this.lockVersionKey = `${this.key}/lockVersion`;
     this.lockVersion = lockVersion;
-    this.field.data('autosave', this);
     this.restore();
-    this.field.on('input', () => this.save());
+    this.saveAction = this.save.bind(this);
+    // used by app/assets/javascripts/deprecated_notes.js
+    this.field.$autosave = this;
+    this.field.addEventListener('input', this.saveAction);
   }
 
   restore() {
     if (!this.isLocalStorageAvailable) return;
-    if (!this.field.length) return;
     const text = window.localStorage.getItem(this.key);
     const fallbackText = window.localStorage.getItem(this.fallbackKey);
+    const newValue = text || fallbackText;
 
+    if (newValue == null) return;
+
+    let originalValue = this.field.value;
     if (this.type === 'checkbox') {
-      this.field.prop('checked', text || fallbackText);
-    } else if (text) {
-      this.field.val(text);
-    } else if (fallbackText) {
-      this.field.val(fallbackText);
+      originalValue = this.field.checked;
+      this.field.checked = parseBoolean(newValue);
+    } else {
+      this.field.value = newValue;
     }
 
-    this.field.trigger('input');
-    // v-model does not update with jQuery trigger
-    // https://github.com/vuejs/vue/issues/2804#issuecomment-216968137
-    const event = new Event('change', { bubbles: true, cancelable: false });
-    const field = this.field.get(0);
-    if (field) {
-      field.dispatchEvent(event);
-    }
+    if (originalValue === newValue) return;
+    this.triggerInputEvents();
+  }
+
+  triggerInputEvents() {
+    // trigger events so @input, @change and v-model trigger in Vue components
+    const inputEvent = new Event('input', { bubbles: true, cancelable: false });
+    const changeEvent = new Event('change', { bubbles: true, cancelable: false });
+    this.field.dispatchEvent(inputEvent);
+    this.field.dispatchEvent(changeEvent);
   }
 
   getSavedLockVersion() {
-    if (!this.isLocalStorageAvailable) return;
+    if (!this.isLocalStorageAvailable) return undefined;
     return window.localStorage.getItem(this.lockVersionKey);
   }
 
   save() {
-    if (!this.field.length) return;
-    const value = this.type === 'checkbox' ? this.field.is(':checked') : this.field.val();
+    const value = this.type === 'checkbox' ? this.field.checked : this.field.value;
 
     if (this.isLocalStorageAvailable && value) {
       if (this.fallbackKey) {
@@ -66,7 +67,7 @@ export default class Autosave {
   }
 
   reset() {
-    if (!this.isLocalStorageAvailable) return;
+    if (!this.isLocalStorageAvailable) return undefined;
 
     window.localStorage.removeItem(this.lockVersionKey);
     window.localStorage.removeItem(this.fallbackKey);
@@ -74,7 +75,7 @@ export default class Autosave {
   }
 
   dispose() {
-    // eslint-disable-next-line @gitlab/no-global-event-off
-    this.field.off('input');
+    delete this.field.$autosave;
+    this.field.removeEventListener('input', this.saveAction);
   }
 }