From 2da56f7ed9152d16eae2c7f5d92e71c564e25353 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Thu, 19 Jan 2023 04:01:03 +0000 Subject: [PATCH] Fixed #3558 - Unique values created in components are set incorrectly. --- components/accordion/Accordion.vue | 10 +++++++--- components/autocomplete/AutoComplete.vue | 9 ++++++--- components/cascadeselect/CascadeSelect.vue | 9 ++++++--- components/contextmenu/ContextMenu.vue | 9 ++++++--- components/dock/DockSub.vue | 12 +++++++++--- components/dropdown/Dropdown.vue | 9 ++++++--- components/listbox/Listbox.vue | 9 ++++++--- components/megamenu/MegaMenu.vue | 10 +++++++--- components/menu/Menu.vue | 11 ++++++++--- components/menubar/Menubar.vue | 10 +++++++--- components/multiselect/MultiSelect.vue | 9 ++++++--- components/orderlist/OrderList.vue | 11 ++++++++--- components/panelmenu/PanelMenu.vue | 4 ++-- components/picklist/PickList.vue | 10 ++++++++-- components/rating/Rating.vue | 12 +++++++++--- components/speeddial/SpeedDial.vue | 9 ++++++--- components/tabview/TabView.vue | 9 ++++++--- components/tieredmenu/TieredMenu.vue | 10 +++++++--- 18 files changed, 120 insertions(+), 52 deletions(-) diff --git a/components/accordion/Accordion.vue b/components/accordion/Accordion.vue index f0427c3e9..443448ddb 100755 --- a/components/accordion/Accordion.vue +++ b/components/accordion/Accordion.vue @@ -78,14 +78,21 @@ export default { }, data() { return { + id: this.$attrs.id, d_activeIndex: this.activeIndex }; }, watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + }, activeIndex(newValue) { this.d_activeIndex = newValue; } }, + mounted() { + this.id = this.id || UniqueComponentId(); + }, methods: { isAccordionTab(child) { return child.type.name === 'AccordionTab'; @@ -255,9 +262,6 @@ export default { return tabs; }, []); - }, - id() { - return this.$attrs.id || UniqueComponentId(); } }, directives: { diff --git a/components/autocomplete/AutoComplete.vue b/components/autocomplete/AutoComplete.vue index 4fe38bb8e..4ca6fde00 100755 --- a/components/autocomplete/AutoComplete.vue +++ b/components/autocomplete/AutoComplete.vue @@ -316,6 +316,7 @@ export default { dirty: false, data() { return { + id: this.$attrs.id, focused: false, focusedOptionIndex: -1, focusedMultipleOptionIndex: -1, @@ -324,6 +325,9 @@ export default { }; }, watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + }, suggestions() { if (this.searching) { ObjectUtils.isNotEmpty(this.suggestions) ? this.show() : !!this.$slots.empty ? this.show() : this.hide(); @@ -335,6 +339,8 @@ export default { } }, mounted() { + this.id = this.id || UniqueComponentId(); + this.autoUpdateModel(); }, updated() { @@ -1056,9 +1062,6 @@ export default { selectedMessageText() { return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText; }, - id() { - return this.$attrs.id || UniqueComponentId(); - }, focusedOptionId() { return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null; }, diff --git a/components/cascadeselect/CascadeSelect.vue b/components/cascadeselect/CascadeSelect.vue index 69189f6ea..ab5e1dbde 100644 --- a/components/cascadeselect/CascadeSelect.vue +++ b/components/cascadeselect/CascadeSelect.vue @@ -192,6 +192,7 @@ export default { focusOnHover: false, data() { return { + id: this.$attrs.id, focused: false, focusedOptionInfo: { index: -1, level: 0, parentKey: '' }, activeOptionPath: [], @@ -200,11 +201,16 @@ export default { }; }, watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + }, options() { this.autoUpdateModel(); } }, mounted() { + this.id = this.id || UniqueComponentId(); + this.autoUpdateModel(); }, beforeUnmount() { @@ -846,9 +852,6 @@ export default { selectedMessageText() { return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText; }, - id() { - return this.$attrs.id || UniqueComponentId(); - }, focusedOptionId() { return this.focusedOptionInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null; } diff --git a/components/contextmenu/ContextMenu.vue b/components/contextmenu/ContextMenu.vue index e7502abb0..dca4cd1cb 100755 --- a/components/contextmenu/ContextMenu.vue +++ b/components/contextmenu/ContextMenu.vue @@ -89,6 +89,7 @@ export default { list: null, data() { return { + id: this.$attrs.id, focused: false, focusedItemInfo: { index: -1, level: 0, parentKey: '' }, activeItemPath: [], @@ -97,6 +98,9 @@ export default { }; }, watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + }, activeItemPath(newPath) { if (ObjectUtils.isNotEmpty(newPath)) { this.bindOutsideClickListener(); @@ -122,6 +126,8 @@ export default { this.container = null; }, mounted() { + this.id = this.id || UniqueComponentId(); + if (this.global) { this.bindDocumentContextMenuListener(); } @@ -611,9 +617,6 @@ export default { return processedItem ? processedItem.items : this.processedItems; }, - id() { - return this.$attrs.id || UniqueComponentId(); - }, focusedItemId() { return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null; } diff --git a/components/dock/DockSub.vue b/components/dock/DockSub.vue index 16f87fb07..fe7322f36 100644 --- a/components/dock/DockSub.vue +++ b/components/dock/DockSub.vue @@ -103,11 +103,20 @@ export default { }, data() { return { + id: this.menuId, currentIndex: -3, focused: false, focusedOptionIndex: -1 }; }, + watch: { + menuId(newValue) { + this.id = newValue || UniqueComponentId(); + } + }, + mounted() { + this.id = this.id || UniqueComponentId(); + }, methods: { getItemId(index) { return `${this.id}_${index}`; @@ -263,9 +272,6 @@ export default { } }, computed: { - id() { - return this.menuId || UniqueComponentId(); - }, focusedOptionId() { return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null; } diff --git a/components/dropdown/Dropdown.vue b/components/dropdown/Dropdown.vue index 41d26fa26..2597c6357 100755 --- a/components/dropdown/Dropdown.vue +++ b/components/dropdown/Dropdown.vue @@ -308,6 +308,7 @@ export default { focusOnHover: false, data() { return { + id: this.$attrs.id, focused: false, focusedOptionIndex: -1, filterValue: null, @@ -315,6 +316,9 @@ export default { }; }, watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + }, modelValue() { this.isModelValueChanged = true; }, @@ -323,6 +327,8 @@ export default { } }, mounted() { + this.id = this.id || UniqueComponentId(); + this.autoUpdateModel(); }, updated() { @@ -1025,9 +1031,6 @@ export default { selectedMessageText() { return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText; }, - id() { - return this.$attrs.id || UniqueComponentId(); - }, focusedOptionId() { return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null; }, diff --git a/components/listbox/Listbox.vue b/components/listbox/Listbox.vue index d96fb6200..df5d74f54 100755 --- a/components/listbox/Listbox.vue +++ b/components/listbox/Listbox.vue @@ -185,17 +185,23 @@ export default { focusOnHover: false, data() { return { + id: this.$attrs.id, filterValue: null, focused: false, focusedOptionIndex: -1 }; }, watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + }, options() { this.autoUpdateModel(); } }, mounted() { + this.id = this.id || UniqueComponentId(); + this.autoUpdateModel(); }, methods: { @@ -733,9 +739,6 @@ export default { selectedMessageText() { return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText; }, - id() { - return this.$attrs.id || UniqueComponentId(); - }, focusedOptionId() { return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null; }, diff --git a/components/megamenu/MegaMenu.vue b/components/megamenu/MegaMenu.vue index 7cb18c8cd..ab7151a16 100755 --- a/components/megamenu/MegaMenu.vue +++ b/components/megamenu/MegaMenu.vue @@ -79,6 +79,7 @@ export default { searchValue: null, data() { return { + id: this.$attrs.id, focused: false, focusedItemInfo: { index: -1, key: '', parentKey: '' }, activeItem: null, @@ -86,6 +87,9 @@ export default { }; }, watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + }, activeItem(newItem) { if (ObjectUtils.isNotEmpty(newItem)) { this.bindOutsideClickListener(); @@ -96,6 +100,9 @@ export default { } } }, + mounted() { + this.id = this.id || UniqueComponentId(); + }, beforeUnmount() { this.unbindOutsideClickListener(); this.unbindResizeListener(); @@ -603,9 +610,6 @@ export default { vertical() { return this.orientation === 'vertical'; }, - id() { - return this.$attrs.id || UniqueComponentId(); - }, focusedItemId() { return ObjectUtils.isNotEmpty(this.focusedItemInfo.key) ? `${this.id}_${this.focusedItemInfo.key}` : null; } diff --git a/components/menu/Menu.vue b/components/menu/Menu.vue index eedd95c8f..487d0a1f9 100644 --- a/components/menu/Menu.vue +++ b/components/menu/Menu.vue @@ -84,12 +84,18 @@ export default { }, data() { return { + id: this.$attrs.id, overlayVisible: false, focused: false, focusedOptionIndex: -1, selectedOptionIndex: -1 }; }, + watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + } + }, target: null, outsideClickListener: null, scrollHandler: null, @@ -97,6 +103,8 @@ export default { container: null, list: null, mounted() { + this.id = this.id || UniqueComponentId(); + if (!this.popup) { this.bindResizeListener(); this.bindOutsideClickListener(); @@ -389,9 +397,6 @@ export default { } ]; }, - id() { - return this.$attrs.id || UniqueComponentId(); - }, focusedOptionId() { return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null; } diff --git a/components/menubar/Menubar.vue b/components/menubar/Menubar.vue index b3292d627..cd57f02a9 100755 --- a/components/menubar/Menubar.vue +++ b/components/menubar/Menubar.vue @@ -80,6 +80,7 @@ export default { }, data() { return { + id: this.$attrs.id, mobileActive: false, focused: false, focusedItemInfo: { index: -1, level: 0, parentKey: '' }, @@ -88,6 +89,9 @@ export default { }; }, watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + }, activeItemPath(newPath) { if (ObjectUtils.isNotEmpty(newPath)) { this.bindOutsideClickListener(); @@ -101,6 +105,9 @@ export default { outsideClickListener: null, container: null, menubar: null, + mounted() { + this.id = this.id || UniqueComponentId(); + }, beforeUnmount() { this.mobileActive = false; this.unbindOutsideClickListener(); @@ -593,9 +600,6 @@ export default { return processedItem ? processedItem.items : this.processedItems; }, - id() { - return this.$attrs.id || UniqueComponentId(); - }, focusedItemId() { return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null; } diff --git a/components/multiselect/MultiSelect.vue b/components/multiselect/MultiSelect.vue index f69a79b49..9334d8463 100755 --- a/components/multiselect/MultiSelect.vue +++ b/components/multiselect/MultiSelect.vue @@ -328,6 +328,7 @@ export default { focusOnHover: false, data() { return { + id: this.$attrs.id, focused: false, focusedOptionIndex: -1, headerCheckboxFocused: false, @@ -336,11 +337,16 @@ export default { }; }, watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + }, options() { this.autoUpdateModel(); } }, mounted() { + this.id = this.id || UniqueComponentId(); + this.autoUpdateModel(); }, beforeUnmount() { @@ -1163,9 +1169,6 @@ export default { selectedMessageText() { return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.modelValue.length) : this.emptySelectionMessageText; }, - id() { - return this.$attrs.id || UniqueComponentId(); - }, focusedOptionId() { return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null; }, diff --git a/components/orderlist/OrderList.vue b/components/orderlist/OrderList.vue index 9e04cd6c7..bedb2f18c 100755 --- a/components/orderlist/OrderList.vue +++ b/components/orderlist/OrderList.vue @@ -120,11 +120,17 @@ export default { list: null, data() { return { + id: this.$attrs.id, d_selection: this.selection, focused: false, focusedOptionIndex: -1 }; }, + watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + } + }, beforeUnmount() { this.destroyStyle(); }, @@ -135,6 +141,8 @@ export default { } }, mounted() { + this.id = this.id || UniqueComponentId(); + if (this.responsive) { this.createStyle(); } @@ -550,9 +558,6 @@ export default { } ]; }, - id() { - return this.$attrs.id || UniqueComponentId(); - }, attributeSelector() { return UniqueComponentId(); }, diff --git a/components/panelmenu/PanelMenu.vue b/components/panelmenu/PanelMenu.vue index d6752da0f..333b87868 100644 --- a/components/panelmenu/PanelMenu.vue +++ b/components/panelmenu/PanelMenu.vue @@ -75,8 +75,8 @@ export default { }; }, watch: { - '$attrs.id': function (newVal) { - this.id = newVal || UniqueComponentId(); + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); } }, mounted() { diff --git a/components/picklist/PickList.vue b/components/picklist/PickList.vue index 9566038b4..6bde9c991 100755 --- a/components/picklist/PickList.vue +++ b/components/picklist/PickList.vue @@ -201,6 +201,7 @@ export default { styleElement: null, data() { return { + id: this.$attrs.id, d_selection: this.selection, focused: { sourceList: false, @@ -210,6 +211,9 @@ export default { }; }, watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + }, selection(newValue) { this.d_selection = newValue; } @@ -225,6 +229,8 @@ export default { this.destroyStyle(); }, mounted() { + this.id = this.id || UniqueComponentId(); + if (this.responsive) { this.createStyle(); } @@ -797,10 +803,10 @@ export default { }, computed: { idSource() { - return this.$attrs.id || UniqueComponentId(); + return `${this.id}_source`; }, idTarget() { - return this.$attrs.id || UniqueComponentId(); + return `${this.id}_target`; }, focusedOptionId() { return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null; diff --git a/components/rating/Rating.vue b/components/rating/Rating.vue index 2c87c523e..5aca12b29 100755 --- a/components/rating/Rating.vue +++ b/components/rating/Rating.vue @@ -77,9 +77,18 @@ export default { }, data() { return { + name: this.$attrs.name, focusedOptionIndex: -1 }; }, + watch: { + '$attrs.name': function (newValue) { + this.name = newValue || UniqueComponentId(); + } + }, + mounted() { + this.name = this.name || UniqueComponentId(); + }, methods: { onOptionClick(event, value) { if (!this.readonly && !this.disabled) { @@ -133,9 +142,6 @@ export default { }, offIconClass() { return ['p-rating-icon', this.offIcon]; - }, - name() { - return this.$attrs.name || UniqueComponentId(); } } }; diff --git a/components/speeddial/SpeedDial.vue b/components/speeddial/SpeedDial.vue index 56a4e262a..bf6671d40 100644 --- a/components/speeddial/SpeedDial.vue +++ b/components/speeddial/SpeedDial.vue @@ -115,6 +115,7 @@ export default { list: null, data() { return { + id: this.$attrs.id, d_visible: this.visible, isItemClicked: false, focused: false, @@ -122,11 +123,16 @@ export default { }; }, watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + }, visible(newValue) { this.d_visible = newValue; } }, mounted() { + this.id = this.id || UniqueComponentId(); + if (this.type !== 'linear') { const button = DomHandler.findSingle(this.container, '.p-speeddial-button'); const firstItem = DomHandler.findSingle(this.list, '.p-speeddial-item'); @@ -515,9 +521,6 @@ export default { this.maskClass ]; }, - id() { - return this.$attrs.id || UniqueComponentId(); - }, focusedOptionId() { return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null; } diff --git a/components/tabview/TabView.vue b/components/tabview/TabView.vue index ad0051e1d..d34e836ab 100755 --- a/components/tabview/TabView.vue +++ b/components/tabview/TabView.vue @@ -108,12 +108,16 @@ export default { }, data() { return { + id: this.$attrs.id, d_activeIndex: this.activeIndex, isPrevButtonDisabled: true, isNextButtonDisabled: false }; }, watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + }, activeIndex(newValue) { this.d_activeIndex = newValue; @@ -121,6 +125,8 @@ export default { } }, mounted() { + this.id = this.id || UniqueComponentId(); + this.updateInkBar(); this.scrollable && this.updateButtonState(); }, @@ -358,9 +364,6 @@ export default { }, nextButtonAriaLabel() { return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined; - }, - id() { - return this.$attrs.id || UniqueComponentId(); } }, directives: { diff --git a/components/tieredmenu/TieredMenu.vue b/components/tieredmenu/TieredMenu.vue index a37e345cc..68100a480 100755 --- a/components/tieredmenu/TieredMenu.vue +++ b/components/tieredmenu/TieredMenu.vue @@ -93,6 +93,7 @@ export default { searchValue: null, data() { return { + id: this.$attrs.id, focused: false, focusedItemInfo: { index: -1, level: 0, parentKey: '' }, activeItemPath: [], @@ -101,6 +102,9 @@ export default { }; }, watch: { + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); + }, activeItemPath(newPath) { if (!this.popup) { if (ObjectUtils.isNotEmpty(newPath)) { @@ -113,6 +117,9 @@ export default { } } }, + mounted() { + this.id = this.id || UniqueComponentId(); + }, beforeUnmount() { this.unbindOutsideClickListener(); this.unbindResizeListener(); @@ -632,9 +639,6 @@ export default { return processedItem ? processedItem.items : this.processedItems; }, - id() { - return this.$attrs.id || UniqueComponentId(); - }, focusedItemId() { return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null; }