🌐 AI搜索 & 代理 主页
Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jacobmllr95 merged 8 commits into from
Nov 29, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d65421b
fix(b-form-tags): required handling
jacobmllr95 Nov 29, 2020
29cad69
Merge branch 'dev' into fix-b-form-tags-required-handling
jacobmllr95 Nov 29, 2020
1e19a07
Merge branch 'dev' into fix-b-form-tags-required-handling
jacobmllr95 Nov 29, 2020
afee9fe
Update form-tags.js
jacobmllr95 Nov 29, 2020
87e0ba6
Merge branch 'dev' into fix-b-form-tags-required-handling
jacobmllr95 Nov 29, 2020
3446d36
Update form-tags.js
jacobmllr95 Nov 29, 2020
09b7280
Update form-tags.js
jacobmllr95 Nov 29, 2020
7261135
Update form-tags.spec.js
jacobmllr95 Nov 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 15 additions & 7 deletions src/components/form-tags/form-tags.js
View file
Open in desktop
Original file line number Diff line number Diff line change
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
View file
Open in desktop
Original file line number Diff line number Diff line change
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