on FireFox if i try to change minutes then hour field also moving with minutes in nextjs app

[BinarySenseiii]

screen-recording.webm

[mj-jpad]

This appears to be browser independent - spotted on Chrome and Edge as well as Firefox.

Not sure about the inner workings, but the document.querySelectorAll('.timepicker-ui-value-tips') returns seemingly far too many nodes. Each time the timepicker is closed & reopened the number of nodes increases by either 12 or 24, can't see a real pattern. The nodes are removed after selecting them by moving the hand though, and then closing it.

Edit: This was on a Angular 13

[Jurugi]

I have fixed this.

Search for the line null!==this.hourTips

Before that add a check if the minutes has 'active', then reuse the var to see if it can set the hour. Here is an example how to change it, be careful in the minimized code:

var checkmins; checkmins=document.querySelector(".timepicker-ui-minutes"); if(checkmins && checkmins.classList.contains("active")) checkmins = false; if(null!==this.hourTips&&checkmins)

[allannienhuis]

@pglejzer is there a chance that this issue could be fixed in a patch release? I attempted to create a pull request, but without build documentation I couldn't figure out exactly how to build the library in a way I could test it in my app with something like npm link.

Based on @Jurugi 's comment above, I thought an appropriate fix might be in index.ts: ` const activeMins = this.minutes.classList.contains('active');

if ((this.hourTips && activeMins) !== null) { `

but without being able to build and test it I'm not sure - I may have got the activeMins in the wrong part of the expression :) ...

I'm happy to help out any way I can.
Cheers, Allan.

[jinDeHao]

let alreadyOpenedPicker = false;
timepickerParent?.addEventListener('click', () => {
  document.querySelectorAll(".timepicker-ui-cancel-btn, .timepicker-ui-ok-btn").forEach(btn => {
    btn.addEventListener('click', () => {
      alreadyOpenedPicker = false;
    });
  })
  if (!alreadyOpenedPicker) {
    const timePickerPrototype = document.querySelector(".timepicker-ui-modal.normalize.timepicker-ui-normalize")
    timePickerPrototype.remove();
    console.log(timePickerPrototype);
    alreadyOpenedPicker = true;
  }
})

i find solution for this issue add this code to your js, it will fix it!!!!!

[SoyRonyVargas]

@jinDeHao Thank you very much, your code worked perfectly. It fixed the issue with the time change in Safari and Firefox. Thank you so much!

This is my code

fixRenderTimePicker: ($element) => {

        let alreadyOpenedPicker = false

        $element?.addEventListener('click', () => {

            document.querySelectorAll(".timepicker-ui-cancel-btn, .timepicker-ui-ok-btn").forEach(btn => {
                btn.addEventListener('click', () => {
                    alreadyOpenedPicker = false;
                });
            })

            const timePickerPrototype = document.querySelector(".timepicker-ui-modal.normalize.timepicker-ui-normalize")

            if( timePickerPrototype )
            {
                timePickerPrototype.remove();
                console.log(timePickerPrototype);
            }

        })

    },

[jinDeHao]

Your are welcome 🤗

[jinDeHao]

You need to make this code works only with Mozilla by adding condition above.

[SoyRonyVargas]

Yes i do it , thanks