From 3a134dd5618ef3ef78074b0d201d816d7d59363a Mon Sep 17 00:00:00 2001
From: i7slegend <fordik4@gmail.com>
Date: Wed, 27 Mar 2024 05:37:32 +0300
Subject: [PATCH 1/2] Fix #5412 - Twice render if attribute id not defined

---
 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                 | 12 ++++++------
 components/lib/contextmenu/ContextMenu.vue     |  9 +++++----
 components/lib/datatable/ColumnFilter.vue      | 11 ++++++-----
 components/lib/dialog/Dialog.vue               | 11 ++++++-----
 components/lib/dock/DockSub.vue                | 12 ++++++------
 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                   | 11 ++++++-----
 components/lib/menubar/Menubar.vue             |  8 +++++---
 components/lib/multiselect/MultiSelect.vue     |  8 +++++---
 components/lib/orderlist/OrderList.vue         | 11 ++++++-----
 components/lib/panel/Panel.vue                 | 10 +++++-----
 components/lib/panelmenu/PanelMenu.vue         | 12 ++++++------
 components/lib/password/Password.vue           | 10 ++++++----
 components/lib/picklist/PickList.vue           |  9 +++++----
 components/lib/rating/Rating.vue               | 12 ++++++------
 components/lib/scrollpanel/ScrollPanel.vue     | 11 ++++++-----
 components/lib/speeddial/SpeedDial.vue         |  9 +++++----
 components/lib/splitbutton/SplitButton.vue     | 11 ++++++-----
 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, 162 insertions(+), 131 deletions(-)

diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue
index e9fb3fa53a..ba11106377 100755
--- a/components/lib/accordion/Accordion.vue
+++ b/components/lib/accordion/Accordion.vue
@@ -73,16 +73,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: 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 0f79b35afc..f42065e71c 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -201,8 +201,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         suggestions() {
             if (this.searching) {
@@ -215,7 +218,6 @@ 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 d63588b2e1..1d992af5c9 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -560,8 +560,11 @@ export default {
         };
     },
     watch: {
-        id: function (newValue) {
-            this.d_id = newValue || UniqueComponentId();
+        id: {
+            immediate: true,
+            handler: function (newValue) {
+                this.d_id = newValue || UniqueComponentId();
+            },
         },
         modelValue(newValue) {
             this.updateCurrentMetaData();
@@ -611,7 +614,6 @@ 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 07762eaf3d..445edccbfc 100644
--- a/components/lib/cascadeselect/CascadeSelect.vue
+++ b/components/lib/cascadeselect/CascadeSelect.vue
@@ -110,15 +110,17 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: 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 f3ab1305fd..0ad9c6c8a7 100755
--- a/components/lib/chips/Chips.vue
+++ b/components/lib/chips/Chips.vue
@@ -76,12 +76,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
-    },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     methods: {
         onWrapperClick() {
diff --git a/components/lib/contextmenu/ContextMenu.vue b/components/lib/contextmenu/ContextMenu.vue
index f159f8f695..14c6a51349 100755
--- a/components/lib/contextmenu/ContextMenu.vue
+++ b/components/lib/contextmenu/ContextMenu.vue
@@ -64,8 +64,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
@@ -78,8 +81,6 @@ 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 3dc30d8501..bd80740f39 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -286,9 +286,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     overlay: null,
     selfClick: false,
@@ -305,8 +308,6 @@ 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 762db37f99..ac3ce1b9ce 100755
--- a/components/lib/dialog/Dialog.vue
+++ b/components/lib/dialog/Dialog.vue
@@ -88,9 +88,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     documentKeydownListener: null,
     container: null,
@@ -124,8 +127,6 @@ 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 ad1732f392..7994913f55 100644
--- a/components/lib/dock/DockSub.vue
+++ b/components/lib/dock/DockSub.vue
@@ -106,12 +106,12 @@ export default {
         };
     },
     watch: {
-        menuId(newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
-    },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
+        menuId: {
+            immediate: true,
+            handler(newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     methods: {
         getItemId(index) {
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
index d85de8e33e..0683bcfebd 100755
--- a/components/lib/dropdown/Dropdown.vue
+++ b/components/lib/dropdown/Dropdown.vue
@@ -218,8 +218,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         modelValue() {
             this.isModelValueChanged = true;
@@ -229,7 +232,6 @@ 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 95fb7c7ec1..f7f7a837c8 100755
--- a/components/lib/fieldset/Fieldset.vue
+++ b/components/lib/fieldset/Fieldset.vue
@@ -54,16 +54,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: 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 6ab095b66d..e84f146f96 100755
--- a/components/lib/galleria/GalleriaContent.vue
+++ b/components/lib/galleria/GalleriaContent.vue
@@ -76,15 +76,18 @@ export default {
     emits: ['activeitem-change', 'mask-hide'],
     data() {
         return {
-            id: this.$attrs.id || UniqueComponentId(),
+            id: this.$attrs.id,
             activeIndex: this.$attrs.activeIndex,
             numVisible: this.$attrs.numVisible,
             slideShowActive: false
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         '$attrs.value': function (newVal) {
             if (newVal && newVal.length < this.numVisible) {
@@ -101,9 +104,6 @@ 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 97b62dc2af..70fad9bb8e 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -149,15 +149,17 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: 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 6f934efa9e..5160b91006 100755
--- a/components/lib/megamenu/MegaMenu.vue
+++ b/components/lib/megamenu/MegaMenu.vue
@@ -86,8 +86,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         activeItem(newItem) {
             if (ObjectUtils.isNotEmpty(newItem)) {
@@ -100,7 +103,6 @@ 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 87f8b928e6..523232cd33 100644
--- a/components/lib/menu/Menu.vue
+++ b/components/lib/menu/Menu.vue
@@ -72,9 +72,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     target: null,
     outsideClickListener: null,
@@ -83,8 +86,6 @@ 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 67e845a25d..9ce93231e8 100755
--- a/components/lib/menubar/Menubar.vue
+++ b/components/lib/menubar/Menubar.vue
@@ -79,8 +79,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
@@ -96,7 +99,6 @@ 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 3037866cb3..2c79ba1ef1 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -238,15 +238,17 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: 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 bb45e4b606..a8b1db652f 100755
--- a/components/lib/orderlist/OrderList.vue
+++ b/components/lib/orderlist/OrderList.vue
@@ -105,9 +105,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     beforeUnmount() {
         this.destroyStyle();
@@ -119,8 +122,6 @@ 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 1e831fc09f..517daa8ad0 100755
--- a/components/lib/panel/Panel.vue
+++ b/components/lib/panel/Panel.vue
@@ -58,16 +58,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: 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 950969a101..ae3fec72cc 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -73,12 +73,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
-    },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     methods: {
         getItemProp(item, name) {
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index 7645e6bdc4..ca048c7cb1 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -77,9 +77,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     mediumCheckRegExp: null,
     strongCheckRegExp: null,
@@ -87,7 +90,6 @@ 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 3bcd659785..d37d1c6870 100755
--- a/components/lib/picklist/PickList.vue
+++ b/components/lib/picklist/PickList.vue
@@ -221,8 +221,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         selection(newValue) {
             this.d_selection = newValue;
@@ -244,8 +247,6 @@ 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 9d53191de2..4c0dd08649 100755
--- a/components/lib/rating/Rating.vue
+++ b/components/lib/rating/Rating.vue
@@ -68,12 +68,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.name': function (newValue) {
-            this.name = newValue || UniqueComponentId();
-        }
-    },
-    mounted() {
-        this.name = this.name || UniqueComponentId();
+        '$attrs.name': {
+            immediate: true,
+            handler: function (newValue) {
+                this.name = newValue || UniqueComponentId();
+            },
+        },
     },
     methods: {
         getPTOptions(key, value) {
diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue
index 99f315991f..5d4bcd186c 100644
--- a/components/lib/scrollpanel/ScrollPanel.vue
+++ b/components/lib/scrollpanel/ScrollPanel.vue
@@ -69,13 +69,14 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: 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 20f82334f9..958b2c5ed8 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -78,16 +78,17 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: 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 1efd3c1163..4850630dd4 100755
--- a/components/lib/splitbutton/SplitButton.vue
+++ b/components/lib/splitbutton/SplitButton.vue
@@ -78,13 +78,14 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: 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 0c8d211b86..05a52b9a39 100644
--- a/components/lib/stepper/Stepper.vue
+++ b/components/lib/stepper/Stepper.vue
@@ -156,16 +156,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: 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 5528c38b99..472c0c6f99 100755
--- a/components/lib/tabview/TabView.vue
+++ b/components/lib/tabview/TabView.vue
@@ -113,8 +113,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
@@ -123,7 +126,6 @@ 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 ea172a5408..52efa4d67c 100755
--- a/components/lib/tieredmenu/TieredMenu.vue
+++ b/components/lib/tieredmenu/TieredMenu.vue
@@ -71,8 +71,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         activeItemPath(newPath) {
             if (!this.popup) {
@@ -86,9 +89,6 @@ 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 26f63e9ea5..86528f1cf2 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -128,8 +128,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         modelValue: {
             handler: function () {
@@ -166,7 +169,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.updateTreeState();
     },
     methods: {

From 85a9455c8487a8a98d853871471c36cf45c019c5 Mon Sep 17 00:00:00 2001
From: i7slegend <fordik4@gmail.com>
Date: Thu, 28 Mar 2024 02:27:46 +0300
Subject: [PATCH 2/2] PR checker #5412 - prettier warns

---
 components/lib/accordion/Accordion.vue         | 2 +-
 components/lib/autocomplete/AutoComplete.vue   | 2 +-
 components/lib/calendar/Calendar.vue           | 2 +-
 components/lib/cascadeselect/CascadeSelect.vue | 2 +-
 components/lib/chips/Chips.vue                 | 4 ++--
 components/lib/contextmenu/ContextMenu.vue     | 2 +-
 components/lib/datatable/ColumnFilter.vue      | 4 ++--
 components/lib/dialog/Dialog.vue               | 4 ++--
 components/lib/dock/DockSub.vue                | 4 ++--
 components/lib/dropdown/Dropdown.vue           | 2 +-
 components/lib/fieldset/Fieldset.vue           | 2 +-
 components/lib/galleria/GalleriaContent.vue    | 2 +-
 components/lib/listbox/Listbox.vue             | 2 +-
 components/lib/megamenu/MegaMenu.vue           | 2 +-
 components/lib/menu/Menu.vue                   | 4 ++--
 components/lib/menubar/Menubar.vue             | 2 +-
 components/lib/multiselect/MultiSelect.vue     | 2 +-
 components/lib/orderlist/OrderList.vue         | 4 ++--
 components/lib/panel/Panel.vue                 | 2 +-
 components/lib/panelmenu/PanelMenu.vue         | 4 ++--
 components/lib/password/Password.vue           | 4 ++--
 components/lib/picklist/PickList.vue           | 2 +-
 components/lib/rating/Rating.vue               | 4 ++--
 components/lib/scrollpanel/ScrollPanel.vue     | 4 ++--
 components/lib/speeddial/SpeedDial.vue         | 2 +-
 components/lib/splitbutton/SplitButton.vue     | 4 ++--
 components/lib/stepper/Stepper.vue             | 2 +-
 components/lib/tabview/TabView.vue             | 2 +-
 components/lib/tieredmenu/TieredMenu.vue       | 2 +-
 components/lib/treeselect/TreeSelect.vue       | 2 +-
 30 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue
index ba11106377..534e9b37f5 100755
--- a/components/lib/accordion/Accordion.vue
+++ b/components/lib/accordion/Accordion.vue
@@ -77,7 +77,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index f42065e71c..ee5b848a74 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -205,7 +205,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         suggestions() {
             if (this.searching) {
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index 1d992af5c9..82dabdba3c 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -564,7 +564,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.d_id = newValue || UniqueComponentId();
-            },
+            }
         },
         modelValue(newValue) {
             this.updateCurrentMetaData();
diff --git a/components/lib/cascadeselect/CascadeSelect.vue b/components/lib/cascadeselect/CascadeSelect.vue
index 445edccbfc..f154895d8a 100644
--- a/components/lib/cascadeselect/CascadeSelect.vue
+++ b/components/lib/cascadeselect/CascadeSelect.vue
@@ -114,7 +114,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         options() {
             this.autoUpdateModel();
diff --git a/components/lib/chips/Chips.vue b/components/lib/chips/Chips.vue
index 0ad9c6c8a7..ddce4478ec 100755
--- a/components/lib/chips/Chips.vue
+++ b/components/lib/chips/Chips.vue
@@ -80,8 +80,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     methods: {
         onWrapperClick() {
diff --git a/components/lib/contextmenu/ContextMenu.vue b/components/lib/contextmenu/ContextMenu.vue
index 14c6a51349..4df1fa50bb 100755
--- a/components/lib/contextmenu/ContextMenu.vue
+++ b/components/lib/contextmenu/ContextMenu.vue
@@ -68,7 +68,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index bd80740f39..6f7d23b8eb 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -290,8 +290,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     overlay: null,
     selfClick: false,
diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
index ac3ce1b9ce..708044f70c 100755
--- a/components/lib/dialog/Dialog.vue
+++ b/components/lib/dialog/Dialog.vue
@@ -92,8 +92,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     documentKeydownListener: null,
     container: null,
diff --git a/components/lib/dock/DockSub.vue b/components/lib/dock/DockSub.vue
index 7994913f55..2b4cb368ea 100644
--- a/components/lib/dock/DockSub.vue
+++ b/components/lib/dock/DockSub.vue
@@ -110,8 +110,8 @@ export default {
             immediate: true,
             handler(newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     methods: {
         getItemId(index) {
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
index 0683bcfebd..5fa60d4a7c 100755
--- a/components/lib/dropdown/Dropdown.vue
+++ b/components/lib/dropdown/Dropdown.vue
@@ -222,7 +222,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         modelValue() {
             this.isModelValueChanged = true;
diff --git a/components/lib/fieldset/Fieldset.vue b/components/lib/fieldset/Fieldset.vue
index f7f7a837c8..22ecc2303e 100755
--- a/components/lib/fieldset/Fieldset.vue
+++ b/components/lib/fieldset/Fieldset.vue
@@ -58,7 +58,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         collapsed(newValue) {
             this.d_collapsed = newValue;
diff --git a/components/lib/galleria/GalleriaContent.vue b/components/lib/galleria/GalleriaContent.vue
index e84f146f96..de8e91df01 100755
--- a/components/lib/galleria/GalleriaContent.vue
+++ b/components/lib/galleria/GalleriaContent.vue
@@ -87,7 +87,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         '$attrs.value': function (newVal) {
             if (newVal && newVal.length < this.numVisible) {
diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index 70fad9bb8e..0134c3f497 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -153,7 +153,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         options() {
             this.autoUpdateModel();
diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue
index 5160b91006..ec6c548110 100755
--- a/components/lib/megamenu/MegaMenu.vue
+++ b/components/lib/megamenu/MegaMenu.vue
@@ -90,7 +90,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeItem(newItem) {
             if (ObjectUtils.isNotEmpty(newItem)) {
diff --git a/components/lib/menu/Menu.vue b/components/lib/menu/Menu.vue
index 523232cd33..ece3fa0781 100644
--- a/components/lib/menu/Menu.vue
+++ b/components/lib/menu/Menu.vue
@@ -76,8 +76,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     target: null,
     outsideClickListener: null,
diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue
index 9ce93231e8..5c33ead799 100755
--- a/components/lib/menubar/Menubar.vue
+++ b/components/lib/menubar/Menubar.vue
@@ -83,7 +83,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 2c79ba1ef1..4885f90171 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -242,7 +242,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         options() {
             this.autoUpdateModel();
diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue
index a8b1db652f..4e649f94e9 100755
--- a/components/lib/orderlist/OrderList.vue
+++ b/components/lib/orderlist/OrderList.vue
@@ -109,8 +109,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     beforeUnmount() {
         this.destroyStyle();
diff --git a/components/lib/panel/Panel.vue b/components/lib/panel/Panel.vue
index 517daa8ad0..91aaff1ba0 100755
--- a/components/lib/panel/Panel.vue
+++ b/components/lib/panel/Panel.vue
@@ -62,7 +62,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         collapsed(newValue) {
             this.d_collapsed = newValue;
diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
index ae3fec72cc..03f7573df7 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -77,8 +77,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     methods: {
         getItemProp(item, name) {
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index ca048c7cb1..c0fd068dd0 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -81,8 +81,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     mediumCheckRegExp: null,
     strongCheckRegExp: null,
diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue
index d37d1c6870..85df8dee2a 100755
--- a/components/lib/picklist/PickList.vue
+++ b/components/lib/picklist/PickList.vue
@@ -225,7 +225,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         selection(newValue) {
             this.d_selection = newValue;
diff --git a/components/lib/rating/Rating.vue b/components/lib/rating/Rating.vue
index 4c0dd08649..485fb0bc0a 100755
--- a/components/lib/rating/Rating.vue
+++ b/components/lib/rating/Rating.vue
@@ -72,8 +72,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.name = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     methods: {
         getPTOptions(key, value) {
diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue
index 5d4bcd186c..1adef1ee61 100644
--- a/components/lib/scrollpanel/ScrollPanel.vue
+++ b/components/lib/scrollpanel/ScrollPanel.vue
@@ -73,8 +73,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     mounted() {
         if (this.$el.offsetParent) {
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index 958b2c5ed8..79b8107a15 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -82,7 +82,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         visible(newValue) {
             this.d_visible = newValue;
diff --git a/components/lib/splitbutton/SplitButton.vue b/components/lib/splitbutton/SplitButton.vue
index 4850630dd4..fcd0a1c4ca 100755
--- a/components/lib/splitbutton/SplitButton.vue
+++ b/components/lib/splitbutton/SplitButton.vue
@@ -82,8 +82,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     mounted() {
         this.$watch('$refs.menu.visible', (newValue) => {
diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue
index 05a52b9a39..4f9c979011 100644
--- a/components/lib/stepper/Stepper.vue
+++ b/components/lib/stepper/Stepper.vue
@@ -160,7 +160,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeStep(newValue) {
             this.d_activeStep = newValue;
diff --git a/components/lib/tabview/TabView.vue b/components/lib/tabview/TabView.vue
index 472c0c6f99..39ea5b4613 100755
--- a/components/lib/tabview/TabView.vue
+++ b/components/lib/tabview/TabView.vue
@@ -117,7 +117,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
index 52efa4d67c..0f004f3662 100755
--- a/components/lib/tieredmenu/TieredMenu.vue
+++ b/components/lib/tieredmenu/TieredMenu.vue
@@ -75,7 +75,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeItemPath(newPath) {
             if (!this.popup) {
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index 86528f1cf2..ffe72d09e0 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -132,7 +132,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         modelValue: {
             handler: function () {