Skip to content

Commit 07102f9

Browse files
jacobmllr95jacobmllr95
authored
fix(b-form-tags): ensure same height with or without tags (#5752)
1 parent e67d341 commit 07102f9

File tree

2 files changed

+44
-28
lines changed

2 files changed

+44
-28
lines changed

‎src/components/form-tags/_form-tags.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
.b-form-tags-list {
33
margin-top: -0.25rem;
44

5+
.b-from-tags-field,
56
.b-form-tag {
67
margin-top: 0.25rem;
78
}

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

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -572,7 +572,6 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
572572
return h(
573573
BFormTag,
574574
{
575-
key: `li-tag__${tag}`,
576575
class: tagClass,
577576
props: {
578577
// `BFormTag` will auto generate an ID
@@ -584,7 +583,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
584583
pill: tagPills,
585584
removeLabel: tagRemoveLabel
586585
},
587-
on: { remove: () => removeTag(tag) }
586+
on: { remove: () => removeTag(tag) },
587+
key: `tags_${tag}`
588588
},
589589
tag
590590
)
@@ -640,40 +640,52 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
640640
invisible: disableAddButton
641641
},
642642
style: { fontSize: '90%' },
643-
props: { variant: addButtonVariant, disabled: disableAddButton || isLimitReached },
643+
props: {
644+
variant: addButtonVariant,
645+
disabled: disableAddButton || isLimitReached
646+
},
644647
on: { click: () => addTag() }
645648
},
646649
[this.normalizeSlot('add-button-text') || addButtonText]
647650
)
648651

649-
// ID of the tags+input `<ul>` list
650-
// Note we could concatenate inputAttrs.id with `__TAG__LIST__`
651-
// But note that the inputID may be null until after mount
652-
// `safeId` returns `null`, if no user provided ID, until after
653-
// mount when a unique ID is generated
654-
const tagListId = this.safeId('__TAG__LIST__')
652+
// ID of the tags + input `<ul>` list
653+
// Note we could concatenate `inputAttrs.id` with '__tag_list__'
654+
// but `inputId` may be `null` until after mount
655+
// `safeId()` returns `null`, if no user provided ID,
656+
// until after mount when a unique ID is generated
657+
const tagListId = this.safeId('__tag_list__')
655658

656659
const $field = h(
657660
'li',
658661
{
659-
key: '__li-input__',
660-
staticClass: 'flex-grow-1',
662+
staticClass: 'b-from-tags-field flex-grow-1',
661663
attrs: {
662664
role: 'none',
663665
'aria-live': 'off',
664666
'aria-controls': tagListId
665-
}
667+
},
668+
key: 'tags_field'
666669
},
667-
[h('div', { staticClass: 'd-flex', attrs: { role: 'group' } }, [$input, $button])]
670+
[
671+
h(
672+
'div',
673+
{
674+
staticClass: 'd-flex',
675+
attrs: { role: 'group' }
676+
},
677+
[$input, $button]
678+
)
679+
]
668680
)
669681

670682
// Wrap in an unordered list element (we use a list for accessibility)
671683
const $ul = h(
672684
'ul',
673685
{
674-
key: '_tags_list_',
675686
staticClass: 'b-form-tags-list list-unstyled mb-0 d-flex flex-wrap align-items-center',
676-
attrs: { id: tagListId }
687+
attrs: { id: tagListId },
688+
key: 'tags_list'
677689
},
678690
[$tags, $field]
679691
)
@@ -691,8 +703,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
691703
$invalid = h(
692704
BFormInvalidFeedback,
693705
{
694-
key: '_tags_invalid_feedback_',
695-
props: { id: invalidFeedbackId, forceShow: true }
706+
props: { id: invalidFeedbackId, forceShow: true },
707+
key: 'tags_invalid_feedback'
696708
},
697709
[this.invalidTagText, ': ', this.invalidTags.join(joiner)]
698710
)
@@ -704,8 +716,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
704716
$duplicate = h(
705717
BFormText,
706718
{
707-
key: '_tags_duplicate_feedback_',
708-
props: { id: duplicateFeedbackId }
719+
props: { id: duplicateFeedbackId },
720+
key: 'tags_duplicate_feedback'
709721
},
710722
[this.duplicateTagText, ': ', this.duplicateTags.join(joiner)]
711723
)
@@ -717,8 +729,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
717729
$limit = h(
718730
BFormText,
719731
{
720-
key: '_tags_limit_feedback_',
721-
props: { id: limitFeedbackId }
732+
props: { id: limitFeedbackId },
733+
key: 'tags_limit_feedback'
722734
},
723735
[limitTagsText]
724736
)
@@ -727,8 +739,11 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
727739
$feedback = h(
728740
'div',
729741
{
730-
key: '_tags_feedback_',
731-
attrs: { 'aria-live': 'polite', 'aria-atomic': 'true' }
742+
attrs: {
743+
'aria-live': 'polite',
744+
'aria-atomic': 'true'
745+
},
746+
key: 'tags_feedback'
732747
},
733748
[$invalid, $duplicate, $limit]
734749
)
@@ -789,7 +804,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
789804
{
790805
staticClass: 'sr-only',
791806
attrs: {
792-
id: this.safeId('_selected-tags_'),
807+
id: this.safeId('__selected_tags__'),
793808
role: 'status',
794809
for: this.computedInputId,
795810
'aria-live': this.hasFocus ? 'polite' : 'off',
@@ -806,7 +821,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
806821
{
807822
staticClass: 'sr-only',
808823
attrs: {
809-
id: this.safeId('_removed-tags_'),
824+
id: this.safeId('__removed_tags__'),
810825
role: 'status',
811826
'aria-live': this.hasFocus ? 'assertive' : 'off',
812827
'aria-atomic': 'true'
@@ -822,13 +837,13 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
822837
// for native submission of forms
823838
$hidden = this.tags.map(tag => {
824839
return h('input', {
825-
key: tag,
826840
attrs: {
827841
type: 'hidden',
828842
value: tag,
829843
name: this.name,
830844
form: this.form || null
831-
}
845+
},
846+
key: `tag_input_${tag}`
832847
})
833848
})
834849
}
@@ -849,7 +864,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
849864
id: this.safeId(),
850865
role: 'group',
851866
tabindex: this.disabled || this.noOuterFocus ? null : '-1',
852-
'aria-describedby': this.safeId('_selected_')
867+
'aria-describedby': this.safeId('__selected_tags__')
853868
},
854869
on: {
855870
click: this.onClick,

0 commit comments

Comments
 (0)