Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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
  • Loading branch information
jacobmllr95 committed Nov 29, 2020
1 parent fd08f9b commit 2dc6b9d
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 10 deletions.
22 changes: 15 additions & 7 deletions src/components/form-tags/form-tags.js
Expand Up @@ -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() {
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -757,6 +759,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
// Pass-through props
...pick(this.$props, [
'disabled',
'required',
'form',
'state',
'size',
'limit',
Expand Down Expand Up @@ -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}`
})
Expand Down
13 changes: 10 additions & 3 deletions src/components/form-tags/form-tags.spec.js
Expand Up @@ -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')
Expand Down

0 comments on commit 2dc6b9d

Please sign in to comment.