Revert breaking change in autocomplete prop of Taginput (#414)

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 */

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>

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>

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 */

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 */

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,

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

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>

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,

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"

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"

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"