Skip to content

scroll speed for timepicker on mobile devices to high #6292

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

Open
robertjanetzko opened this issue Dec 4, 2019 · 18 comments · May be fixed by #15639
Open

scroll speed for timepicker on mobile devices to high #6292

robertjanetzko opened this issue Dec 4, 2019 · 18 comments · May be fixed by #15639

Comments

@robertjanetzko
Copy link

Description

The touch controls for the time picker on mobile devices are too sensitive. For every pixel you move your finger, the spinner does one step, which is way to fast.

  • igniteui-angular version: 8.2.x
  • browser: Safari Mobile

Steps to reproduce

  1. Open time picker dialog on mobile device
  2. Drag up or down with your finger

Result

When moving the distance of one entry, it does to many steps

Expected result

When moving the distance of one entry, it should do one step

@Lipata
Copy link
Member

Lipata commented Dec 16, 2019

Hi, @robertjanetzko.

Thank you, once again for contributing to our repository! As I mentioned to you in your PR, we will try to configure hammer.js in order to implement that functionality. During testing it on other touch devices it seems that we need to make sure scrolling is working consistently across them and that is why we will research and implement that in one of our future sprints. Tell me what you think.

@github-actions
Copy link

There has been no recent activity and this issue has been marked inactive.

@github-actions github-actions bot added the status: inactive Used to stale issues and pull requests label May 23, 2020
@Lipata Lipata removed the status: inactive Used to stale issues and pull requests label May 24, 2020
@github-actions
Copy link

There has been no recent activity and this issue has been marked inactive.

@github-actions github-actions bot added the status: inactive Used to stale issues and pull requests label Jul 24, 2020
@Lipata Lipata removed the status: inactive Used to stale issues and pull requests label Jul 24, 2020
@radomirchev radomirchev added status: ice-box and removed 🐛 bug Any issue that describes a bug 🧨 severity: medium labels Aug 10, 2020
@github-actions
Copy link

There has been no recent activity and this issue has been marked inactive.

@github-actions github-actions bot added the status: inactive Used to stale issues and pull requests label Oct 10, 2020
@Lipata Lipata removed the status: inactive Used to stale issues and pull requests label Oct 12, 2020
@github-actions
Copy link

There has been no recent activity and this issue has been marked inactive.

@github-actions github-actions bot added the status: inactive Used to stale issues and pull requests label Dec 12, 2020
@Lipata Lipata removed the status: inactive Used to stale issues and pull requests label Dec 13, 2020
@github-actions
Copy link

There has been no recent activity and this issue has been marked inactive.

@github-actions github-actions bot added the status: inactive Used to stale issues and pull requests label Feb 12, 2021
@Lipata Lipata removed the status: inactive Used to stale issues and pull requests label Feb 12, 2021
@github-actions
Copy link

There has been no recent activity and this issue has been marked inactive.

@zhosti
Copy link
Contributor

zhosti commented Jun 28, 2021

Hi @kdinev, I checked the issue and it is still reproducing.

@github-actions
Copy link

There has been no recent activity and this issue has been marked inactive.

@github-actions github-actions bot added the status: inactive Used to stale issues and pull requests label Aug 28, 2021
@Lipata Lipata removed the status: inactive Used to stale issues and pull requests label Aug 30, 2021
@github-actions
Copy link

There has been no recent activity and this issue has been marked inactive.

@github-actions github-actions bot added the status: inactive Used to stale issues and pull requests label Oct 30, 2021
@Lipata Lipata removed the status: inactive Used to stale issues and pull requests label Oct 31, 2021
@github-actions
Copy link

There has been no recent activity and this issue has been marked inactive.

@github-actions github-actions bot added the status: inactive Used to stale issues and pull requests label Dec 31, 2021
@Lipata Lipata removed the status: inactive Used to stale issues and pull requests label Jan 4, 2022
@github-actions
Copy link

github-actions bot commented Mar 6, 2022

There has been no recent activity and this issue has been marked inactive.

@github-actions github-actions bot added the status: inactive Used to stale issues and pull requests label Mar 6, 2022
@Lipata Lipata removed the status: inactive Used to stale issues and pull requests label Mar 6, 2022
@github-actions
Copy link

github-actions bot commented May 6, 2022

There has been no recent activity and this issue has been marked inactive.

@github-actions github-actions bot added the status: inactive Used to stale issues and pull requests label May 6, 2022
@kdinev kdinev reopened this Feb 13, 2025
@kdinev
Copy link
Member

kdinev commented Feb 13, 2025

This is also reproducible on a regular touchpad on a laptop.

@github-actions github-actions bot removed the status: inactive Used to stale issues and pull requests label Feb 14, 2025
@jackofdiamond5
Copy link
Member

After a little bit of research, I think we may need to redesign the way the time picker handles scrolling.

Right now we listen for scroll or pan events and based on the event.deltaY we calculate the next item in the scrolled list. Which is done by directly setting the value of the internal date object that corresponds to the appropriate minutes. hours, seconds, etc. The value that is being set is calculated by using the delta from the event. Later the same value is used in the template during *ngFor to regenerate the spinners. This means that the scroll that the time picker has is somewhat simulated with the *ngFor as it just re-renders the spinners every time the scroll or pan occur. The date object is also used in the input of the picker to synchronize its value with that of the spinners.

With the current approach we cannot really tamper with the delta returned by the events as any modifications would result in unwanted changes in the picker's date value. In turn, this would cause unwanted behavior such as scrolling past several hours at once or having to scroll multiple times in order to get to the next hour, etc.

What we need to do is decouple the picker's scroll strategy from its internal value. This way we will be able to safely modify the delta returned by the event to simulate slower or faster scrolling. The date object could still be modified in order to preserve synchronization between the spinners and the input but it should not be used for anything else.

@lalo-mx
Copy link

lalo-mx commented Feb 28, 2025

Could an option be to enable the use of the native iOS and Android component input time to select the time? I think for many cases it is enough

@jackofdiamond5
Copy link
Member

@lalo-mx in our case the usage of the native <input type="time"> is not plausible since there are differences in the component's UI and behavior depending on the platform/browser. Our goal is for all of our components to be seamlessly integrated in any platform with a unified UI and this is why we generally don't rely on the native controls, but we build around them.

In the case of the time picker the input is of type=text since we have custom handling around parsing and populating dates in it through the usage of the IgxDateTimeEditorDirective.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment