Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
BinarySenseiii opened this issue Jan 2, 2023 · 8 comments
Assignees
Labels
bug Something isn't working

Comments

@BinarySenseiii
Copy link

BinarySenseiii commented Jan 2, 2023

screen-recording.webm
@BinarySenseiii BinarySenseiii changed the title on FireFox if i try to change minutes then hour field also moving with minutes on FireFox if i try to change minutes then hour field also moving with minutes in nextjs app Jan 2, 2023
@pglejzer pglejzer self-assigned this Feb 3, 2023
@pglejzer pglejzer added the bug Something isn't working label Feb 3, 2023
@mj-jpad
Copy link

mj-jpad commented Feb 6, 2023

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.

image

image

image

Edit: This was on a Angular 13

@Jurugi
Copy link

Jurugi commented Apr 10, 2023

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
Copy link

allannienhuis commented Jul 4, 2023

@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
Copy link

jinDeHao commented Aug 1, 2024

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
Copy link

@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
Copy link

jinDeHao commented Aug 9, 2024

Your are welcome 🤗

@jinDeHao
Copy link

jinDeHao commented Aug 9, 2024

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

@SoyRonyVargas
Copy link

Yes i do it , thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

7 participants