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.

Sign up for GitHub

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

Jump to bottom

Calling updateOptions() causes scrolling to jump. #2621

Closed
3 tasks done
MaxwellDAssistek opened this issue Aug 11, 2022 · 9 comments
Closed
3 tasks done

Calling updateOptions() causes scrolling to jump. #2621

MaxwellDAssistek opened this issue Aug 11, 2022 · 9 comments
Labels
Area: TypeScript Priority: Medium Type: Bug v6

Comments

@MaxwellDAssistek
Copy link

Prerequisites

Describe the issue

Calling updateOptions() on a datetimepicker that is at the bottom of a scrollable div causes the scroll to jump due to the datetime picker being recreated.

2022-08-11 12-50-04

StackBlitz fork

https://stackblitz.com/edit/tempus-dominus-v6-simple-setup-v78952?file=index.js

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Firefox

What version of are you using? You can find this information from the sample StackBlitz.

6.0.0-beta9

What your browser's locale? You can find this information from the sample StackBlitz.

en-US
@Eonasdan Eonasdan added the State: Triage Tickets that need to be triaged. label Aug 11, 2022
@MaxwellDAssistek
Copy link
Author

MaxwellDAssistek commented Aug 11, 2022 •
edited
Loading

Even if I work around this issue by temporarily setting up a min-height css property that equals to the height of the div before updateOptions, the picker being reloaded is MUCH too noticeable.

An application that I am working on requires essentially 2 (inline!) pickers to be linked so one cannot be earlier than the other and vice versa. the way I used to do this in previous versions of TD was to update the max/minDate as one of the pickers changes, however in this version it is very noticeable.
2022-08-11 16-39-43
(Due to the low framerate of the gif it is less noticeable, but in reality it is very noticeable on every change of one of the pickers)

@Eonasdan Eonasdan moved this to 🆕 New in Tempus Dominus Oct 24, 2022
@Eonasdan Eonasdan moved this from 🆕 New to 📋 Backlog in Tempus Dominus Oct 24, 2022
@Eonasdan Eonasdan moved this from 📋 Backlog to 🔖 Ready in Tempus Dominus Dec 5, 2022
@Eonasdan Eonasdan moved this from 🔖 Ready to 🏗 In progress in Tempus Dominus Dec 13, 2022
Eonasdan added a commit that referenced this issue Dec 13, 2022
@Eonasdan
fix #2621 by added min-height and simplifying rebuild function
4f9018f
@Eonasdan
Copy link
Owner

Hi. I believe I have fix this in the attached branch. Please check out this StackBlitz

@Eonasdan Eonasdan moved this from 🏗 In progress to 👀 In review in Tempus Dominus Dec 13, 2022
@MaxwellDAssistek
Copy link
Author

MaxwellDAssistek commented Dec 13, 2022 •
edited
Loading

I am still able to reproduce the issue very easily. On Firefox if you start clicking it multiple times in a row it still flashes. I also tested the same StackBlitz on Chrome and apparently it is even easier to reproduce there. Over all it might be marginally better, but it still doesn't look like the core issue is resolved. I tried also updated my app to the latest version to the same result. Still same flickering.

@Eonasdan Eonasdan moved this from 👀 In review to 🔖 Ready in Tempus Dominus Dec 14, 2022
@Eonasdan Eonasdan mentioned this issue Dec 14, 2022
Merged
Eonasdan added a commit that referenced this issue Dec 14, 2022
@Eonasdan
fix #2621 by added min-height and simplifying rebuild function (#2738)
80b9562
Repository owner moved this from 🔖 Ready to ✅ Done in Tempus Dominus Dec 14, 2022
@Eonasdan Eonasdan moved this from ✅ Done to 🔖 Ready in Tempus Dominus Dec 14, 2022
@MaxwellDAssistek
Copy link
Author

@Eonasdan Should I open another issue that focuses on the flickering rather than the scrolling?

@Eonasdan Eonasdan reopened this Dec 14, 2022
Repository owner moved this from 🔖 Ready to 📋 Backlog in Tempus Dominus Dec 14, 2022
@Eonasdan
Copy link
Owner

No. I merged what I had and it auto closed. I'll try to keep improving this.

@Eonasdan Eonasdan moved this from 📋 Backlog to 🔖 Ready in Tempus Dominus May 22, 2023
@Eonasdan Eonasdan moved this from 🔖 Ready to 🏗 In progress in Tempus Dominus May 22, 2023
@Eonasdan
Copy link
Owner

Hi @MaxwellDAssistek I'm looking at this again. I see this still happens on the SB even with the latest, however locally, it's not an issue. Are you still experiencing this?

@MaxwellDAssistek
Copy link
Author

@Eonasdan Very much so. We've done our best to make it less noticeable with min-height/min-width and/or loading screens, but its still definitely an issue for us.

Eonasdan added a commit that referenced this issue May 22, 2023
@Eonasdan
#2621 potential fix
6ec3cac
@Eonasdan
Copy link
Owner

Thanks for letting me know. Can you try this stackblitz based on this branch

@Eonasdan Eonasdan moved this from 🏗 In progress to 👀 In review in Tempus Dominus May 24, 2023
@Eonasdan Eonasdan mentioned this issue Jul 3, 2023
Merged
Eonasdan added a commit that referenced this issue Jul 3, 2023
@Eonasdan
#2621 potential fix (#2833)
a1e1dec
Eonasdan added a commit that referenced this issue Jul 3, 2023
@Eonasdan
#2621 potential fix (#2833)
5833aa0
Eonasdan added a commit that referenced this issue Jul 3, 2023
@Eonasdan @axunonb @roitto
More tests (#2834)
132a7b2 
* #2791 more tests

* #2791 more tests

* #2791 more tests

* #2757 should fix start of the week (#2818)

* Add type attribute to meridiem button (#2822)

Resolves #2820

* repl improvements

* repl improvements

* Fix typo in Finnish locale (fi.ts) (#2824)

Renamed Edelline -> Edellinen

* #2575 open on focus (#2832)

* #2575 open on focus

* Add type attribute to meridiem button (#2822)

Resolves #2820

* repl improvements

* repl improvements

* Fix typo in Finnish locale (fi.ts) (#2824)

Renamed Edelline -> Edellinen

* repl improvements

* repl improvements

* repl improvements

* repl improvements

---------

Co-authored-by: axunonb <[email protected]>
Co-authored-by: Pertti Roitto <[email protected]>

* #2621 potential fix (#2833)

---------

Co-authored-by: axunonb <[email protected]>
Co-authored-by: Pertti Roitto <[email protected]>
@Eonasdan Eonasdan moved this from 👀 In review to ✅ Done in Tempus Dominus Jul 3, 2023
Eonasdan added a commit that referenced this issue Jul 3, 2023
@Eonasdan
#2621 potential fix (#2833)
be914c0
Eonasdan added a commit that referenced this issue Jul 3, 2023
@Eonasdan @axunonb @roitto
More tests (#2834)
cf30905 
* #2791 more tests

* #2791 more tests

* #2791 more tests

* #2757 should fix start of the week (#2818)

* Add type attribute to meridiem button (#2822)

Resolves #2820

* repl improvements

* repl improvements

* Fix typo in Finnish locale (fi.ts) (#2824)

Renamed Edelline -> Edellinen

* #2575 open on focus (#2832)

* #2575 open on focus

* Add type attribute to meridiem button (#2822)

Resolves #2820

* repl improvements

* repl improvements

* Fix typo in Finnish locale (fi.ts) (#2824)

Renamed Edelline -> Edellinen

* repl improvements

* repl improvements

* repl improvements

* repl improvements

---------

Co-authored-by: axunonb <[email protected]>
Co-authored-by: Pertti Roitto <[email protected]>

* #2621 potential fix (#2833)

---------

Co-authored-by: axunonb <[email protected]>
Co-authored-by: Pertti Roitto <[email protected]>
@Eonasdan Eonasdan mentioned this issue Jul 3, 2023
Merged
Eonasdan added a commit that referenced this issue Jul 3, 2023
@Eonasdan
Development master (#2835)
93de311 
<h2>6.7.10</h2>
      <h3>New</h3>
      <ul>
        <li>Lots more test coverage #2791</li>
      </ul>
      <h3>Bug fixes</h3>
      <ul>
        <li>Hopefully fixed update options bounce. #2621</li>
        <li>Fixed input toggle #2575</li>
        <li>Fixed docs #2810</li>
      </ul>
@Eonasdan Eonasdan moved this from ✅ Done to 🚀 Released in Tempus Dominus Jul 3, 2023
@Eonasdan
Copy link
Owner

Eonasdan commented Jul 3, 2023

This has been released

@Eonasdan Eonasdan closed this as completed Jul 3, 2023
@github-project-automation github-project-automation bot moved this from 🚀 Released to ✅ Done in Tempus Dominus Jul 3, 2023
@Eonasdan Eonasdan moved this from ✅ Done to 🚀 Released in Tempus Dominus Jul 3, 2023
@Eonasdan Eonasdan moved this from 🚀 Released to ✅ Done in Tempus Dominus Jul 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Area: TypeScript Priority: Medium Type: Bug v6
Projects
Tempus Dominus
Archived in project
Milestone
No milestone
Development

When branches are created from issues, their pull requests are automatically linked.

2621-calling-updateoptions-causes-scrolling-to-jump Eonasdan/tempus-dominus
2 participants
@Eonasdan @MaxwellDAssistek