Menubar: Custom locale config overwriting default untouched config properties

[nelson-antunes]

Describe the bug

Menubar component with MenuItems throws "Uncaught TypeError: Cannot read properties of undefined (reading 'navigation')" when custom locale options are set for PrimeVue. This stops the component with the Menubar from rendering.

When debugging, I noticed that the custom locale configurations overwrote the whole default configuration object passed to the Menubar component in its render function, not only the changed properties.

Reproducer

https://codesandbox.io/s/musing-mopsa-vf6ddf?file=/src/main.js:4302-4314

PrimeVue version

3.29.0 - 3.32.0

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Add any locale configuration in your PrimeVue installation/injection (main.js/ts)
2. Add a Menubar component with a collection of MenuItems in your App

Expected behavior

No error

[nelson-antunes]

Looking at the source code for PrimeVue install function (https://github.com/primefaces/primevue/blob/prod/components/lib/config/PrimeVue.js) we can see the problem is the use of spread (...) to set the default values for options. This won't work for nested objects, since the spreading is only ocurring in the first level of the object. Any nested object will be replaced as a whole by the new one passed inside the configuration object.

[tugcekucukoglu]

Actually, you have already said the solution is using spread operator. Due to the config option being a reactive object, spread operation can be used also for its nested objects.

I have forked your example and made some changes: https://codesandbox.io/s/serverless-platform-5td2z9?file=/src/main.js:4291-4311

Thanks for your contribution!

[YCdvll]

Hello, it's the same problem with Rating component.
I add locale for calendar value and brake Rating component.

TypeError: Cannot read properties of undefined (reading 'star')

[ItriIbouanane]

Actually, you have already said the solution is using spread operator. Due to the config option being a reactive object, spread operation can be used also for its nested objects.

I have forked your example and made some changes: https://codesandbox.io/s/serverless-platform-5td2z9?file=/src/main.js:4291-4311

Thanks for your contribution!

What did you actually change ?