fix(b-form-tags): required handling (closes #6094) (#6103)

jacobmllr95 · web-flow · commit 2dc6b9d5bc5f · 2020-11-29T23:44:01.000+01:00
* fix(b-form-tags): required handling

* Update form-tags.js

* Update form-tags.js

* Update form-tags.js

* Update form-tags.spec.js
diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js
@@ -211,14 +211,16 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
       return arrayIncludes(TYPES, this.inputType) ? this.inputType : 'text'
     },
     computedInputAttrs() {
+      const { disabled, form } = this
+
       return {
         // Merge in user supplied attributes
         ...this.inputAttrs,
         // Must have attributes
         id: this.computedInputId,
         value: this.newTag,
-        disabled: this.disabled || null,
-        form: this.form || null
+        disabled,
+        form
       }
     },
     computedInputHandlers() {
@@ -729,7 +731,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
-    const { name, disabled, tags, computedInputId, hasFocus, noOuterFocus } = this
+    const { name, disabled, required, form, tags, computedInputId, hasFocus, noOuterFocus } = this
 
     // Scoped slot properties
     const scope = {
@@ -757,6 +759,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
       // Pass-through props
       ...pick(this.$props, [
         'disabled',
+        'required',
+        'form',
         'state',
         'size',
         'limit',
@@ -814,14 +818,18 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     let $hidden = h()
     if (name && !disabled) {
       // We add hidden inputs for each tag if a name is provided
-      // for native submission of forms
-      $hidden = tags.map(tag => {
+      // When there are currently no tags, a visually hidden input
+      // with empty value is rendered for proper required handling
+      const hasTags = tags.length > 0
+      $hidden = (hasTags ? tags : ['']).map(tag => {
         return h('input', {
+          class: { 'sr-only': !hasTags },
           attrs: {
-            type: 'hidden',
+            type: hasTags ? 'hidden' : 'text',
             value: tag,
+            required,
             name,
-            form: this.form || null
+            form
           },
           key: `tag_input_${tag}`
         })
diff --git a/src/components/form-tags/form-tags.spec.js b/src/components/form-tags/form-tags.spec.js
@@ -100,14 +100,21 @@ describe('form-tags', () => {
   it('has hidden inputs when name is set', async () => {
     const wrapper = mount(BFormTags, {
       propsData: {
-        value: ['apple', 'orange'],
-        name: 'foo'
+        value: [],
+        name: 'foo',
+        required: true
       }
     })
 
     expect(wrapper.element.tagName).toBe('DIV')
 
-    const $hidden = wrapper.findAll('input[type=hidden]')
+    let $hidden = wrapper.find('input.sr-only')
+    expect($hidden.attributes('value')).toEqual('')
+    expect($hidden.attributes('name')).toEqual('foo')
+    expect($hidden.attributes('required')).toBeDefined()
+
+    await wrapper.setProps({ value: ['apple', 'orange'] })
+    $hidden = wrapper.findAll('input[type=hidden]')
     expect($hidden.length).toBe(2)
     expect($hidden.at(0).attributes('value')).toEqual('apple')
     expect($hidden.at(0).attributes('name')).toEqual('foo')
