Skip to content

Commit 2dc6b9d

Browse files
authored
fix(b-form-tags): required handling (closes #6094) (#6103)
* fix(b-form-tags): required handling * Update form-tags.js * Update form-tags.js * Update form-tags.js * Update form-tags.spec.js
1 parent fd08f9b commit 2dc6b9d

File tree

2 files changed

+25
-10
lines changed

2 files changed

+25
-10
lines changed

src/components/form-tags/form-tags.js

+15-7
Original file line numberDiff line numberDiff line change
@@ -211,14 +211,16 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
211211
return arrayIncludes(TYPES, this.inputType) ? this.inputType : 'text'
212212
},
213213
computedInputAttrs() {
214+
const { disabled, form } = this
215+
214216
return {
215217
// Merge in user supplied attributes
216218
...this.inputAttrs,
217219
// Must have attributes
218220
id: this.computedInputId,
219221
value: this.newTag,
220-
disabled: this.disabled || null,
221-
form: this.form || null
222+
disabled,
223+
form
222224
}
223225
},
224226
computedInputHandlers() {
@@ -729,7 +731,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
729731
}
730732
},
731733
render(h) {
732-
const { name, disabled, tags, computedInputId, hasFocus, noOuterFocus } = this
734+
const { name, disabled, required, form, tags, computedInputId, hasFocus, noOuterFocus } = this
733735

734736
// Scoped slot properties
735737
const scope = {
@@ -757,6 +759,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
757759
// Pass-through props
758760
...pick(this.$props, [
759761
'disabled',
762+
'required',
763+
'form',
760764
'state',
761765
'size',
762766
'limit',
@@ -814,14 +818,18 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
814818
let $hidden = h()
815819
if (name && !disabled) {
816820
// We add hidden inputs for each tag if a name is provided
817-
// for native submission of forms
818-
$hidden = tags.map(tag => {
821+
// When there are currently no tags, a visually hidden input
822+
// with empty value is rendered for proper required handling
823+
const hasTags = tags.length > 0
824+
$hidden = (hasTags ? tags : ['']).map(tag => {
819825
return h('input', {
826+
class: { 'sr-only': !hasTags },
820827
attrs: {
821-
type: 'hidden',
828+
type: hasTags ? 'hidden' : 'text',
822829
value: tag,
830+
required,
823831
name,
824-
form: this.form || null
832+
form
825833
},
826834
key: `tag_input_${tag}`
827835
})

src/components/form-tags/form-tags.spec.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -100,14 +100,21 @@ describe('form-tags', () => {
100100
it('has hidden inputs when name is set', async () => {
101101
const wrapper = mount(BFormTags, {
102102
propsData: {
103-
value: ['apple', 'orange'],
104-
name: 'foo'
103+
value: [],
104+
name: 'foo',
105+
required: true
105106
}
106107
})
107108

108109
expect(wrapper.element.tagName).toBe('DIV')
109110

110-
const $hidden = wrapper.findAll('input[type=hidden]')
111+
let $hidden = wrapper.find('input.sr-only')
112+
expect($hidden.attributes('value')).toEqual('')
113+
expect($hidden.attributes('name')).toEqual('foo')
114+
expect($hidden.attributes('required')).toBeDefined()
115+
116+
await wrapper.setProps({ value: ['apple', 'orange'] })
117+
$hidden = wrapper.findAll('input[type=hidden]')
111118
expect($hidden.length).toBe(2)
112119
expect($hidden.at(0).attributes('value')).toEqual('apple')
113120
expect($hidden.at(0).attributes('name')).toEqual('foo')

0 commit comments

Comments
 (0)