Time picker up/down arrows problem

[secit-pl]

Describe the bug
Time pickers do not work as expected when there is more than one time picker on the same page. When I click the up/down arrows, it changes other fields too. The first (top) one works as expected, but the second does not.

To Reproduce
Create two vue-date-pickers with following configuration:

<vue-date-picker v-model="value"
                 :placeholder="placeholder"
                 :disabled="disabled"
                 locale="en-GB"
                 autocomplete="off"
                 format="yyyy-MM-dd HH:mm:ss 'UTC'"
                 :state="error ? false : null"
                 time-picker-inline
                 auto-apply
                 position="left"
                 hide-input-icon
                 timezone="UTC"
                 :month-change-on-scroll="false"
                 :enable-seconds="true"
/>

Expected behavior
When I click the up/down arrow on the date/time element, it should only change that element, not others.

Screenshots

Video: https://github.com/user-attachments/assets/7264323f-d374-4fb4-ad50-f5b4106a2c60

Desktop & mobile (please complete the following information):

• Browser: chrome 134.0.6998.89
• Library version 11.0.2

[github-actions]

Stale issue message

[secit-pl]

The problem still exists.

[falkgeist]

You need to wrap the date picker in a component, since the date picker controls are relative to the parent component.
Disregard that, I remembered wrong, it was a different component, not the date picker. Sorry.

But as an idea, did you try adding :ref="'some-unique-identifier'" to the attributes?

[secit-pl]

        data: function () {
            return {
                vueDatePickerRandomRef: 'vdp' + Math.random(),
            };
        },

:ref="vueDatePickerRandomRef"

fixed the problem.

Why does it work?

[falkgeist]

once you have a unique reference for each date picker, it (or Vue) can distinguish between them and know which one to control. for more details the Devs would have to explain, that's above me.

[falkgeist]

but if you really need multiple dynamic date pickers, you'd be well advised to use a non-randomized unique identifier, like an index, if you're generating the date pickers within a loop

[Jasenkoo]

As @falkgeist described, when you render multiple components in v-for, each element needs to have key attribute.

The key gives each element a stable identity so Vue can:

• Track elements correctly when the list changes (items added, removed, or reordered)
• Reuse and reorder existing DOM elements efficiently instead of recreating them
• Prevent rendering bugs especially with stateful components or form inputs

If you manually add one bellow another, the issue does not appear.