+25
-10
lines changedFilter options
+25
-10
lines changed Original file line number Diff line number Diff line change
@@ -211,14 +211,16 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
211 211
return arrayIncludes(TYPES, this.inputType) ? this.inputType : 'text'
212 212
},
213 213
computedInputAttrs() {
214 +
const { disabled, form } = this
215 + 214 216
return {
215 217
// Merge in user supplied attributes
216 218
...this.inputAttrs,
217 219
// Must have attributes
218 220
id: this.computedInputId,
219 221
value: this.newTag,
220 -
disabled: this.disabled || null,
221 -
form: this.form || null
222 +
disabled,
223 +
form
222 224
}
223 225
},
224 226
computedInputHandlers() {
@@ -729,7 +731,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
729 731
}
730 732
},
731 733
render(h) {
732 -
const { name, disabled, tags, computedInputId, hasFocus, noOuterFocus } = this
734 +
const { name, disabled, required, form, tags, computedInputId, hasFocus, noOuterFocus } = this
733 735 734 736
// Scoped slot properties
735 737
const scope = {
@@ -757,6 +759,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
757 759
// Pass-through props
758 760
...pick(this.$props, [
759 761
'disabled',
762 +
'required',
763 +
'form',
760 764
'state',
761 765
'size',
762 766
'limit',
@@ -814,14 +818,18 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
814 818
let $hidden = h()
815 819
if (name && !disabled) {
816 820
// 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 => {
819 825
return h('input', {
826 +
class: { 'sr-only': !hasTags },
820 827
attrs: {
821 -
type: 'hidden',
828 +
type: hasTags ? 'hidden' : 'text',
822 829
value: tag,
830 +
required,
823 831
name,
824 -
form: this.form || null
832 +
form
825 833
},
826 834
key: `tag_input_${tag}`
827 835
})
@@ -100,14 +100,21 @@ describe('form-tags', () => {
100 100
it('has hidden inputs when name is set', async () => {
101 101
const wrapper = mount(BFormTags, {
102 102
propsData: {
103 -
value: ['apple', 'orange'],
104 -
name: 'foo'
103 +
value: [],
104 +
name: 'foo',
105 +
required: true
105 106
}
106 107
})
107 108 108 109
expect(wrapper.element.tagName).toBe('DIV')
109 110 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]')
111 118
expect($hidden.length).toBe(2)
112 119
expect($hidden.at(0).attributes('value')).toEqual('apple')
113 120
expect($hidden.at(0).attributes('name')).toEqual('foo')
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4