From 6615f31d8a96512a40c9cc4b9f512125e741fcd0 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Tue, 16 Apr 2024 12:35:02 +0300 Subject: [PATCH] Fixed #5593 - Hydration defects --- components/lib/accordion/Accordion.vue | 10 +++++----- components/lib/autocomplete/AutoComplete.vue | 8 +++----- components/lib/calendar/Calendar.vue | 8 +++----- components/lib/cascadeselect/CascadeSelect.vue | 8 +++----- components/lib/chips/Chips.vue | 10 +++++----- components/lib/contextmenu/ContextMenu.vue | 9 ++++----- components/lib/datatable/ColumnFilter.vue | 9 ++++----- components/lib/dialog/Dialog.vue | 9 ++++----- components/lib/dock/DockSub.vue | 10 +++++----- components/lib/dropdown/Dropdown.vue | 8 +++----- components/lib/fieldset/Fieldset.vue | 10 +++++----- components/lib/galleria/GalleriaContent.vue | 12 ++++++------ components/lib/listbox/Listbox.vue | 8 +++----- components/lib/megamenu/MegaMenu.vue | 8 +++----- components/lib/menu/Menu.vue | 9 ++++----- components/lib/menubar/Menubar.vue | 8 +++----- components/lib/multiselect/MultiSelect.vue | 8 +++----- components/lib/orderlist/OrderList.vue | 9 ++++----- components/lib/panel/Panel.vue | 10 +++++----- components/lib/panelmenu/PanelMenu.vue | 10 +++++----- components/lib/password/Password.vue | 8 +++----- components/lib/picklist/PickList.vue | 9 ++++----- components/lib/rating/Rating.vue | 10 +++++----- components/lib/scrollpanel/ScrollPanel.vue | 9 ++++----- components/lib/speeddial/SpeedDial.vue | 9 ++++----- components/lib/splitbutton/SplitButton.vue | 9 ++++----- components/lib/stepper/Stepper.vue | 10 +++++----- components/lib/tabview/TabView.vue | 8 +++----- components/lib/tieredmenu/TieredMenu.vue | 10 +++++----- components/lib/treeselect/TreeSelect.vue | 8 +++----- 30 files changed, 120 insertions(+), 151 deletions(-) diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue index 534e9b37f..e9fb3fa53 100755 --- a/components/lib/accordion/Accordion.vue +++ b/components/lib/accordion/Accordion.vue @@ -73,16 +73,16 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$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'; diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue index ee5b848a7..0f79b35af 100755 --- a/components/lib/autocomplete/AutoComplete.vue +++ b/components/lib/autocomplete/AutoComplete.vue @@ -201,11 +201,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, suggestions() { if (this.searching) { @@ -218,6 +215,7 @@ export default { } }, mounted() { + this.id = this.id || UniqueComponentId(); this.autoUpdateModel(); }, updated() { diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue index 82dabdba3..d63588b2e 100755 --- a/components/lib/calendar/Calendar.vue +++ b/components/lib/calendar/Calendar.vue @@ -560,11 +560,8 @@ export default { }; }, watch: { - id: { - immediate: true, - handler: function (newValue) { - this.d_id = newValue || UniqueComponentId(); - } + id: function (newValue) { + this.d_id = newValue || UniqueComponentId(); }, modelValue(newValue) { this.updateCurrentMetaData(); @@ -614,6 +611,7 @@ export default { this.updateCurrentMetaData(); }, mounted() { + this.d_id = this.d_id || UniqueComponentId(); this.createResponsiveStyle(); this.bindMatchMediaListener(); diff --git a/components/lib/cascadeselect/CascadeSelect.vue b/components/lib/cascadeselect/CascadeSelect.vue index f154895d8..07762eaf3 100644 --- a/components/lib/cascadeselect/CascadeSelect.vue +++ b/components/lib/cascadeselect/CascadeSelect.vue @@ -110,17 +110,15 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, options() { this.autoUpdateModel(); } }, mounted() { + this.id = this.id || UniqueComponentId(); this.autoUpdateModel(); }, beforeUnmount() { diff --git a/components/lib/chips/Chips.vue b/components/lib/chips/Chips.vue index ddce4478e..f3ab1305f 100755 --- a/components/lib/chips/Chips.vue +++ b/components/lib/chips/Chips.vue @@ -76,13 +76,13 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); } }, + mounted() { + this.id = this.id || UniqueComponentId(); + }, methods: { onWrapperClick() { this.$refs.input.focus(); diff --git a/components/lib/contextmenu/ContextMenu.vue b/components/lib/contextmenu/ContextMenu.vue index ddd0c4624..b066a0a6a 100755 --- a/components/lib/contextmenu/ContextMenu.vue +++ b/components/lib/contextmenu/ContextMenu.vue @@ -64,11 +64,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, activeItemPath(newPath) { if (ObjectUtils.isNotEmpty(newPath)) { @@ -81,6 +78,8 @@ export default { } }, mounted() { + this.id = this.id || UniqueComponentId(); + if (this.global) { this.bindDocumentContextMenuListener(); } diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue index 6f7d23b8e..3dc30d850 100644 --- a/components/lib/datatable/ColumnFilter.vue +++ b/components/lib/datatable/ColumnFilter.vue @@ -286,11 +286,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); } }, overlay: null, @@ -308,6 +305,8 @@ export default { } }, mounted() { + this.id = this.id || UniqueComponentId(); + if (this.filters && this.filters[this.field]) { let fieldFilters = this.filters[this.field]; diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue index 708044f70..762db37f9 100755 --- a/components/lib/dialog/Dialog.vue +++ b/components/lib/dialog/Dialog.vue @@ -88,11 +88,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); } }, documentKeydownListener: null, @@ -127,6 +124,8 @@ export default { this.mask = null; }, mounted() { + this.id = this.id || UniqueComponentId(); + if (this.breakpoints) { this.createStyle(); } diff --git a/components/lib/dock/DockSub.vue b/components/lib/dock/DockSub.vue index 2b4cb368e..ad1732f39 100644 --- a/components/lib/dock/DockSub.vue +++ b/components/lib/dock/DockSub.vue @@ -106,13 +106,13 @@ export default { }; }, watch: { - menuId: { - immediate: true, - handler(newValue) { - this.id = newValue || UniqueComponentId(); - } + menuId(newValue) { + this.id = newValue || UniqueComponentId(); } }, + mounted() { + this.id = this.id || UniqueComponentId(); + }, methods: { getItemId(index) { return `${this.id}_${index}`; diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue index 9a223bac1..cb3d13e78 100755 --- a/components/lib/dropdown/Dropdown.vue +++ b/components/lib/dropdown/Dropdown.vue @@ -218,11 +218,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, modelValue() { this.isModelValueChanged = true; @@ -232,6 +229,7 @@ export default { } }, mounted() { + this.id = this.id || UniqueComponentId(); this.autoUpdateModel(); this.bindLabelClickListener(); }, diff --git a/components/lib/fieldset/Fieldset.vue b/components/lib/fieldset/Fieldset.vue index 22ecc2303..95fb7c7ec 100755 --- a/components/lib/fieldset/Fieldset.vue +++ b/components/lib/fieldset/Fieldset.vue @@ -54,16 +54,16 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, collapsed(newValue) { this.d_collapsed = newValue; } }, + mounted() { + this.id = this.id || UniqueComponentId(); + }, methods: { toggle(event) { this.d_collapsed = !this.d_collapsed; diff --git a/components/lib/galleria/GalleriaContent.vue b/components/lib/galleria/GalleriaContent.vue index de8e91df0..6ab095b66 100755 --- a/components/lib/galleria/GalleriaContent.vue +++ b/components/lib/galleria/GalleriaContent.vue @@ -76,18 +76,15 @@ export default { emits: ['activeitem-change', 'mask-hide'], data() { return { - id: this.$attrs.id, + id: this.$attrs.id || UniqueComponentId(), activeIndex: this.$attrs.activeIndex, numVisible: this.$attrs.numVisible, slideShowActive: false }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, '$attrs.value': function (newVal) { if (newVal && newVal.length < this.numVisible) { @@ -104,6 +101,9 @@ export default { newVal ? this.startSlideShow() : this.stopSlideShow(); } }, + mounted() { + this.id = this.id || UniqueComponentId(); + }, updated() { this.$emit('activeitem-change', this.activeIndex); }, diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue index 0134c3f49..97b62dc2a 100755 --- a/components/lib/listbox/Listbox.vue +++ b/components/lib/listbox/Listbox.vue @@ -149,17 +149,15 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, options() { this.autoUpdateModel(); } }, mounted() { + this.id = this.id || UniqueComponentId(); this.autoUpdateModel(); }, methods: { diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue index 4e9ee6879..a34d0d55c 100755 --- a/components/lib/megamenu/MegaMenu.vue +++ b/components/lib/megamenu/MegaMenu.vue @@ -86,11 +86,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, activeItem(newItem) { if (ObjectUtils.isNotEmpty(newItem)) { @@ -103,6 +100,7 @@ export default { } }, mounted() { + this.id = this.id || UniqueComponentId(); this.bindMatchMediaListener(); }, beforeUnmount() { diff --git a/components/lib/menu/Menu.vue b/components/lib/menu/Menu.vue index ece3fa078..87f8b928e 100644 --- a/components/lib/menu/Menu.vue +++ b/components/lib/menu/Menu.vue @@ -72,11 +72,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); } }, target: null, @@ -86,6 +83,8 @@ export default { container: null, list: null, mounted() { + this.id = this.id || UniqueComponentId(); + if (!this.popup) { this.bindResizeListener(); this.bindOutsideClickListener(); diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue index be2aece2d..92aa2e410 100755 --- a/components/lib/menubar/Menubar.vue +++ b/components/lib/menubar/Menubar.vue @@ -79,11 +79,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, activeItemPath(newPath) { if (ObjectUtils.isNotEmpty(newPath)) { @@ -99,6 +96,7 @@ export default { container: null, menubar: null, mounted() { + this.id = this.id || UniqueComponentId(); this.bindMatchMediaListener(); }, beforeUnmount() { diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue index dffaf637a..5175103c5 100755 --- a/components/lib/multiselect/MultiSelect.vue +++ b/components/lib/multiselect/MultiSelect.vue @@ -238,17 +238,15 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, options() { this.autoUpdateModel(); } }, mounted() { + this.id = this.id || UniqueComponentId(); this.autoUpdateModel(); }, beforeUnmount() { diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue index 4e649f94e..bb45e4b60 100755 --- a/components/lib/orderlist/OrderList.vue +++ b/components/lib/orderlist/OrderList.vue @@ -105,11 +105,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); } }, beforeUnmount() { @@ -122,6 +119,8 @@ export default { } }, mounted() { + this.id = this.id || UniqueComponentId(); + if (this.responsive) { this.createStyle(); } diff --git a/components/lib/panel/Panel.vue b/components/lib/panel/Panel.vue index 91aaff1ba..1e831fc09 100755 --- a/components/lib/panel/Panel.vue +++ b/components/lib/panel/Panel.vue @@ -58,16 +58,16 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, collapsed(newValue) { this.d_collapsed = newValue; } }, + mounted() { + this.id = this.id || UniqueComponentId(); + }, methods: { toggle(event) { this.d_collapsed = !this.d_collapsed; diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue index 03f7573df..950969a10 100644 --- a/components/lib/panelmenu/PanelMenu.vue +++ b/components/lib/panelmenu/PanelMenu.vue @@ -73,13 +73,13 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); } }, + mounted() { + this.id = this.id || UniqueComponentId(); + }, methods: { getItemProp(item, name) { return item ? ObjectUtils.getItemValue(item[name]) : undefined; diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue index c0fd068dd..7645e6bdc 100755 --- a/components/lib/password/Password.vue +++ b/components/lib/password/Password.vue @@ -77,11 +77,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); } }, mediumCheckRegExp: null, @@ -90,6 +87,7 @@ export default { scrollHandler: null, overlay: null, mounted() { + this.id = this.id || UniqueComponentId(); this.infoText = this.promptText; this.mediumCheckRegExp = new RegExp(this.mediumRegex); this.strongCheckRegExp = new RegExp(this.strongRegex); diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue index 85df8dee2..3bcd65978 100755 --- a/components/lib/picklist/PickList.vue +++ b/components/lib/picklist/PickList.vue @@ -221,11 +221,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, selection(newValue) { this.d_selection = newValue; @@ -247,6 +244,8 @@ export default { this.destroyMedia(); }, mounted() { + this.id = this.id || UniqueComponentId(); + if (this.responsive) { this.createStyle(); this.initMedia(); diff --git a/components/lib/rating/Rating.vue b/components/lib/rating/Rating.vue index 485fb0bc0..9d53191de 100755 --- a/components/lib/rating/Rating.vue +++ b/components/lib/rating/Rating.vue @@ -68,13 +68,13 @@ export default { }; }, watch: { - '$attrs.name': { - immediate: true, - handler: function (newValue) { - this.name = newValue || UniqueComponentId(); - } + '$attrs.name': function (newValue) { + this.name = newValue || UniqueComponentId(); } }, + mounted() { + this.name = this.name || UniqueComponentId(); + }, methods: { getPTOptions(key, value) { return this.ptm(key, { diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue index 1adef1ee6..99f315991 100644 --- a/components/lib/scrollpanel/ScrollPanel.vue +++ b/components/lib/scrollpanel/ScrollPanel.vue @@ -69,14 +69,13 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); } }, mounted() { + this.id = this.id || UniqueComponentId(); + if (this.$el.offsetParent) { this.initialize(); } diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue index 79b8107a1..20f82334f 100644 --- a/components/lib/speeddial/SpeedDial.vue +++ b/components/lib/speeddial/SpeedDial.vue @@ -78,17 +78,16 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$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, '[data-pc-name="button"]'); const firstItem = DomHandler.findSingle(this.list, '[data-pc-section="menuitem"]'); diff --git a/components/lib/splitbutton/SplitButton.vue b/components/lib/splitbutton/SplitButton.vue index fcd0a1c4c..1efd3c116 100755 --- a/components/lib/splitbutton/SplitButton.vue +++ b/components/lib/splitbutton/SplitButton.vue @@ -78,14 +78,13 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); } }, mounted() { + this.id = this.id || UniqueComponentId(); + this.$watch('$refs.menu.visible', (newValue) => { this.isExpanded = newValue; }); diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue index 532108d0f..7ba3d49cf 100644 --- a/components/lib/stepper/Stepper.vue +++ b/components/lib/stepper/Stepper.vue @@ -154,16 +154,16 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, activeStep(newValue) { this.d_activeStep = newValue; } }, + mounted() { + this.id = this.id || UniqueComponentId(); + }, methods: { isStep(child) { return child.type.name === 'StepperPanel'; diff --git a/components/lib/tabview/TabView.vue b/components/lib/tabview/TabView.vue index 39ea5b461..5528c38b9 100755 --- a/components/lib/tabview/TabView.vue +++ b/components/lib/tabview/TabView.vue @@ -113,11 +113,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, activeIndex(newValue) { this.d_activeIndex = newValue; @@ -126,6 +123,7 @@ export default { } }, mounted() { + this.id = this.id || UniqueComponentId(); this.updateInkBar(); this.scrollable && this.updateButtonState(); }, diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue index 2ccedef02..1b4cb52d1 100755 --- a/components/lib/tieredmenu/TieredMenu.vue +++ b/components/lib/tieredmenu/TieredMenu.vue @@ -71,11 +71,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, activeItemPath(newPath) { if (!this.popup) { @@ -89,6 +86,9 @@ export default { } } }, + mounted() { + this.id = this.id || UniqueComponentId(); + }, beforeUnmount() { this.unbindOutsideClickListener(); this.unbindResizeListener(); diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue index ffe72d09e..26f63e9ea 100644 --- a/components/lib/treeselect/TreeSelect.vue +++ b/components/lib/treeselect/TreeSelect.vue @@ -128,11 +128,8 @@ export default { }; }, watch: { - '$attrs.id': { - immediate: true, - handler: function (newValue) { - this.id = newValue || UniqueComponentId(); - } + '$attrs.id': function (newValue) { + this.id = newValue || UniqueComponentId(); }, modelValue: { handler: function () { @@ -169,6 +166,7 @@ export default { } }, mounted() { + this.id = this.id || UniqueComponentId(); this.updateTreeState(); }, methods: {