Menubar, Megamenu, Contextmenu and etc.: Twice render if $attrs.id not defined

[i7slegend]

Describe the bug

Components like a menu (Menubar, Megamenu, Contextmenu) and another which generates id in the dom triggers "initial" render twice: first - with id null (if $attrs.id not passed), and next render with generated id

I got example with dirty fix in the codesandbox only with menubar

Reproducer

https://codesandbox.io/p/devbox/frosty-stitch-t2m2m9?file=%2Fsrc%2FApp.vue

PrimeVue version

3.43.0

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Create any component which generate id for DOM. All components what do it generate id after mount and trigger render twice also it's triggers submenus if child component uses id too

Expected behavior

Initial render trigger once (ofc if $attrs.id has not changed)

[mertsincan]

Fixed in #4954

[mertsincan]

@i7slegend This PR broke our entire Id structure. Ids are constantly generated as undefined. That's why I reverted it. You can try your PR with Listbox demo;

<ul id="undefined_list" class="p-listbox-list" style="" tabindex="-1" role="listbox" aria-multiselectable="false" aria-disabled="false" data-pc-section="list"> ....

For now, I set a milestone for it. We check it before the milestone is released.
Best Regards,

[i7slegend]

@i7slegend This PR broke our entire Id structure. Ids are constantly generated as undefined. That's why I reverted it. You can try your PR with Listbox demo;

<ul id="undefined_list" class="p-listbox-list" style="" tabindex="-1" role="listbox" aria-multiselectable="false" aria-disabled="false" data-pc-section="list"> ....

For now, I set a milestone for it. We check it before the milestone is released. Best Regards,

Got it.
Yeah it's reproduce under the nuxt server. In "standalone" vue components it's works correctly.

So i have test nuxt variant and see what beforeMount() not called on the server.

I test the case with data() & beforeCreate() and found what it's called at same time (very very close) and it's affect to next problem: data() replace id to undefined after beforeCreate() hook.
IMHO, in this case enough move initial UniqueComponentId to the data() instead use in any hooks (at least under the nuxt framework). Anyway it's only my theory 🙃

[i7slegend]

Attach code block (on example Listbox) which works under nuxt as expected:

    data() {
        return {
            id: this.$attrs.id || UniqueComponentId(),
            filterValue: null,
            focused: false,
            focusedOptionIndex: -1
        };
    },
    watch: {
        '$attrs.id': function (newValue) {
            this.id = newValue || UniqueComponentId();
        },
        options() {
            this.autoUpdateModel();
        }
    },
    mounted() {
        this.autoUpdateModel();
    },

[mertsincan]

Hi @i7slegend,

Thanks a lot for the detailed info! Yes, we are working to update it like in the above code block.

[i7slegend]

Hello! Sorry for reopen this issue, i found what commits above doesn't goals to fix trigger render twice in this issue's example. It's reproduces now

I mean in the attached code block before (#4953 (comment)) this (use OR operator in state component for id property).
Example for Menubar component:

    data() {
        return {
-           id: this.$attrs.id,
+           id: this.$attrs.id || UniqueComponentId(),
            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();
    },

[i7slegend]

Oh, issue not reopened 😖

@mertsincan