From 13fd2c394e84ae4742e4dc022fae74f016b0e95a Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Sun, 19 Jan 2025 04:50:02 +0900
Subject: [PATCH] Revert breaking change in autocomplete prop of Taginput
 (#414)

---
 .../src/components/autocomplete/Autocomplete.vue           | 4 +++-
 .../clockpicker/__snapshots__/Clockpicker.spec.ts.snap     | 2 +-
 .../datepicker/__snapshots__/Datepicker.spec.ts.snap       | 2 +-
 packages/buefy-next/src/components/input/Input.vue         | 4 +++-
 .../buefy-next/src/components/numberinput/Numberinput.vue  | 4 +++-
 .../buefy-next/src/components/taginput/Taginput.spec.ts    | 2 +-
 packages/buefy-next/src/components/taginput/Taginput.vue   | 7 ++++---
 .../timepicker/__snapshots__/Timepicker.spec.ts.snap       | 2 +-
 packages/buefy-next/src/utils/FormElementMixin.ts          | 2 --
 .../pages/components/taginput/examples/ExAutocomplete.vue  | 2 +-
 .../src/pages/components/taginput/examples/ExSelected.vue  | 2 +-
 .../taginput/examples/ExTemplatedAutocomplete.vue          | 2 +-
 12 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/buefy-next/src/components/autocomplete/Autocomplete.vue b/packages/buefy-next/src/components/autocomplete/Autocomplete.vue
index 50bc5e457..0fa87983a 100644
--- a/packages/buefy-next/src/components/autocomplete/Autocomplete.vue
+++ b/packages/buefy-next/src/components/autocomplete/Autocomplete.vue
@@ -182,7 +182,9 @@ export default defineComponent({
             default: () => ['Tab', 'Enter']
         },
         selectableHeader: Boolean,
-        selectableFooter: Boolean
+        selectableFooter: Boolean,
+        // Native options to use in HTML5 validation
+        autocomplete: String
     },
     emits: {
         /* eslint-disable @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any */
diff --git a/packages/buefy-next/src/components/clockpicker/__snapshots__/Clockpicker.spec.ts.snap b/packages/buefy-next/src/components/clockpicker/__snapshots__/Clockpicker.spec.ts.snap
index 9552bd9ee..c4f656f65 100644
--- a/packages/buefy-next/src/components/clockpicker/__snapshots__/Clockpicker.spec.ts.snap
+++ b/packages/buefy-next/src/components/clockpicker/__snapshots__/Clockpicker.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`BClockpicker > render correctly 1`] = `
 "<div class=\\"b-clockpicker control is-primary\\">
   <div class=\\"dropdown dropdown-menu-animation is-mobile-modal\\">
     <div tabindex=\\"0\\" class=\\"dropdown-trigger\\" aria-haspopup=\\"true\\">
-      <b-input-stub type=\\"text\\" lazy=\\"false\\" passwordreveal=\\"false\\" iconclickable=\\"false\\" hascounter=\\"true\\" customclass=\\"\\" iconrightclickable=\\"false\\" autocomplete=\\"off\\" loading=\\"false\\" readonly=\\"\\" rounded=\\"false\\" use-html5-validation=\\"true\\"></b-input-stub>
+      <b-input-stub autocomplete=\\"off\\" type=\\"text\\" lazy=\\"false\\" passwordreveal=\\"false\\" iconclickable=\\"false\\" hascounter=\\"true\\" customclass=\\"\\" iconrightclickable=\\"false\\" loading=\\"false\\" readonly=\\"\\" rounded=\\"false\\" use-html5-validation=\\"true\\"></b-input-stub>
     </div>
     <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
       <div class=\\"background\\" aria-hidden=\\"true\\" style=\\"display: none;\\"></div>
diff --git a/packages/buefy-next/src/components/datepicker/__snapshots__/Datepicker.spec.ts.snap b/packages/buefy-next/src/components/datepicker/__snapshots__/Datepicker.spec.ts.snap
index c6914127b..3bb746299 100644
--- a/packages/buefy-next/src/components/datepicker/__snapshots__/Datepicker.spec.ts.snap
+++ b/packages/buefy-next/src/components/datepicker/__snapshots__/Datepicker.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`BDatepicker > render correctly 1`] = `
 "<div class=\\"datepicker control\\">
   <div class=\\"dropdown dropdown-menu-animation is-mobile-modal\\">
     <div tabindex=\\"-1\\" class=\\"dropdown-trigger\\" aria-haspopup=\\"true\\">
-      <b-input-stub type=\\"text\\" lazy=\\"false\\" passwordreveal=\\"false\\" iconclickable=\\"false\\" hascounter=\\"true\\" customclass=\\"\\" iconrightclickable=\\"false\\" autocomplete=\\"off\\" rounded=\\"false\\" loading=\\"false\\" readonly=\\"\\" use-html5-validation=\\"false\\"></b-input-stub>
+      <b-input-stub autocomplete=\\"off\\" type=\\"text\\" lazy=\\"false\\" passwordreveal=\\"false\\" iconclickable=\\"false\\" hascounter=\\"true\\" customclass=\\"\\" iconrightclickable=\\"false\\" rounded=\\"false\\" loading=\\"false\\" readonly=\\"\\" use-html5-validation=\\"false\\"></b-input-stub>
     </div>
     <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
       <div class=\\"background\\" aria-hidden=\\"true\\" style=\\"display: none;\\"></div>
diff --git a/packages/buefy-next/src/components/input/Input.vue b/packages/buefy-next/src/components/input/Input.vue
index 40ab1fcea..ce0542923 100644
--- a/packages/buefy-next/src/components/input/Input.vue
+++ b/packages/buefy-next/src/components/input/Input.vue
@@ -103,7 +103,9 @@ export default defineComponent({
         },
         iconRight: String,
         iconRightClickable: Boolean,
-        iconRightType: String
+        iconRightType: String,
+        // Native options to use in HTML5 validation
+        autocomplete: String
     },
     emits: {
         /* eslint-disable @typescript-eslint/no-unused-vars */
diff --git a/packages/buefy-next/src/components/numberinput/Numberinput.vue b/packages/buefy-next/src/components/numberinput/Numberinput.vue
index 9ce343409..4696069f1 100644
--- a/packages/buefy-next/src/components/numberinput/Numberinput.vue
+++ b/packages/buefy-next/src/components/numberinput/Numberinput.vue
@@ -168,7 +168,9 @@ export default defineComponent({
         longPress: {
             type: Boolean,
             default: true
-        }
+        },
+        // Native options to use in HTML5 validation
+        autocomplete: String
     },
     emits: {
         /* eslint-disable @typescript-eslint/no-unused-vars */
diff --git a/packages/buefy-next/src/components/taginput/Taginput.spec.ts b/packages/buefy-next/src/components/taginput/Taginput.spec.ts
index 20cb47ba9..7712db03b 100644
--- a/packages/buefy-next/src/components/taginput/Taginput.spec.ts
+++ b/packages/buefy-next/src/components/taginput/Taginput.spec.ts
@@ -40,7 +40,7 @@ describe('BTaginput', () => {
         let firedFooter = false
         const wrapper = mount(BTaginput, {
             props: {
-                autocomplete: '', // equivalent to attribute without value
+                autocomplete: true,
                 iconRight: 'close-circle',
                 iconRightClickable: true,
                 selectableHeader: true,
diff --git a/packages/buefy-next/src/components/taginput/Taginput.vue b/packages/buefy-next/src/components/taginput/Taginput.vue
index ae2f93486..6f5200f6a 100644
--- a/packages/buefy-next/src/components/taginput/Taginput.vue
+++ b/packages/buefy-next/src/components/taginput/Taginput.vue
@@ -160,6 +160,7 @@ export default defineComponent({
             type: String,
             default: 'value'
         },
+        autocomplete: Boolean,
         groupField: String,
         groupOptions: String,
         nativeAutocomplete: String,
@@ -310,7 +311,7 @@ export default defineComponent({
             const tagToAdd: U = tag || this.newTag.trim()
 
             if (tagToAdd) {
-                if (!(this.autocomplete || this.autocomplete === '')) {
+                if (!this.autocomplete) {
                     const reg = this.separatorsAsRegExp
                     // TODO: won't work if `tagToAdd` is not a string
                     if (reg && tagToAdd.match(reg)) {
@@ -351,7 +352,7 @@ export default defineComponent({
 
         customOnBlur(event: Event) {
             // Add tag on-blur if not select only
-            if (!(this.autocomplete || this.autocomplete === '')) this.addTag()
+            if (!this.autocomplete) this.addTag()
 
             this.onBlur(event)
         },
@@ -388,7 +389,7 @@ export default defineComponent({
                 this.removeLastTag()
             }
             // Stop if is to accept select only
-            if ((this.autocomplete || this.autocomplete === '') && !this.allowNew) return
+            if (this.autocomplete && !this.allowNew) return
 
             if (this.confirmKeys.indexOf(key) >= 0) {
                 // Allow Tab to advance to next field regardless
diff --git a/packages/buefy-next/src/components/timepicker/__snapshots__/Timepicker.spec.ts.snap b/packages/buefy-next/src/components/timepicker/__snapshots__/Timepicker.spec.ts.snap
index b027eb676..e2d070c4d 100644
--- a/packages/buefy-next/src/components/timepicker/__snapshots__/Timepicker.spec.ts.snap
+++ b/packages/buefy-next/src/components/timepicker/__snapshots__/Timepicker.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`BTimepicker > render correctly 1`] = `
 "<div class=\\"timepicker control\\">
   <div class=\\"dropdown dropdown-menu-animation is-mobile-modal\\">
     <div tabindex=\\"0\\" class=\\"dropdown-trigger\\" aria-haspopup=\\"true\\">
-      <b-input-stub type=\\"text\\" lazy=\\"false\\" passwordreveal=\\"false\\" iconclickable=\\"false\\" hascounter=\\"true\\" customclass=\\"\\" iconrightclickable=\\"false\\" autocomplete=\\"off\\" loading=\\"false\\" readonly=\\"\\" rounded=\\"false\\" use-html5-validation=\\"true\\"></b-input-stub>
+      <b-input-stub autocomplete=\\"off\\" type=\\"text\\" lazy=\\"false\\" passwordreveal=\\"false\\" iconclickable=\\"false\\" hascounter=\\"true\\" customclass=\\"\\" iconrightclickable=\\"false\\" loading=\\"false\\" readonly=\\"\\" rounded=\\"false\\" use-html5-validation=\\"true\\"></b-input-stub>
     </div>
     <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
       <div class=\\"background\\" aria-hidden=\\"true\\" style=\\"display: none;\\"></div>
diff --git a/packages/buefy-next/src/utils/FormElementMixin.ts b/packages/buefy-next/src/utils/FormElementMixin.ts
index 28a299c0b..37c23b98f 100644
--- a/packages/buefy-next/src/utils/FormElementMixin.ts
+++ b/packages/buefy-next/src/utils/FormElementMixin.ts
@@ -28,8 +28,6 @@ const FormElementMixin = defineComponent({
         rounded: Boolean,
         icon: String,
         iconPack: String,
-        // Native options to use in HTML5 validation
-        autocomplete: String,
         maxlength: [Number, String],
         useHtml5Validation: {
             type: Boolean,
diff --git a/packages/docs/src/pages/components/taginput/examples/ExAutocomplete.vue b/packages/docs/src/pages/components/taginput/examples/ExAutocomplete.vue
index e8885e2e4..3f67ab715 100644
--- a/packages/docs/src/pages/components/taginput/examples/ExAutocomplete.vue
+++ b/packages/docs/src/pages/components/taginput/examples/ExAutocomplete.vue
@@ -12,7 +12,7 @@
             <b-taginput
                 v-model="tags"
                 :data="filteredTags"
-                autocomplete="on"
+                autocomplete
                 :allow-new="allowNew"
                 :open-on-focus="openOnFocus"
                 field="user.first_name"
diff --git a/packages/docs/src/pages/components/taginput/examples/ExSelected.vue b/packages/docs/src/pages/components/taginput/examples/ExSelected.vue
index dc315e473..5cc5c2c8c 100644
--- a/packages/docs/src/pages/components/taginput/examples/ExSelected.vue
+++ b/packages/docs/src/pages/components/taginput/examples/ExSelected.vue
@@ -4,7 +4,7 @@
             <b-taginput
                 v-model="tags"
                 :data="filteredTags"
-                autocomplete="on"
+                autocomplete
                 ref="taginput"
                 icon="label"
                 placeholder="Add a tag"
diff --git a/packages/docs/src/pages/components/taginput/examples/ExTemplatedAutocomplete.vue b/packages/docs/src/pages/components/taginput/examples/ExTemplatedAutocomplete.vue
index 028cf0262..eb9e4e8c3 100644
--- a/packages/docs/src/pages/components/taginput/examples/ExTemplatedAutocomplete.vue
+++ b/packages/docs/src/pages/components/taginput/examples/ExTemplatedAutocomplete.vue
@@ -4,7 +4,7 @@
             <b-taginput
                 v-model="tags"
                 :data="filteredTags"
-                autocomplete="on"
+                autocomplete
                 field="user.first_name"
                 icon="label"
                 placeholder="Add a tag"