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

[Feature Request] VTouchHold Directive for Long-Press of an Element #5322

Open
185driver opened this issue Oct 14, 2018 · 2 comments · May be fixed by #19661
Open

[Feature Request] VTouchHold Directive for Long-Press of an Element #5322

185driver opened this issue Oct 14, 2018 · 2 comments · May be fixed by #19661
Assignees
Labels
D: New Directive A new directive T: feature A new feature

Comments

@185driver
Copy link
Contributor

What problem does this feature solve?

Google's Tooltips MD spec mentions:

A tooltip is displayed upon tapping and holding a screen element or component (on mobile) or hovering over it (desktop).

Vuetify has the mouse hover method solved for tooltips on desktop, but does not yet provide a method to handle a finger long-press on mobile. Instead, a <v-tooltip> displays immediately on tap/click. This is sometimes the desired response, but other times it is not.

Adding a v-touch-hold type directive to vuetify would:

  1. Align vuetify more closely to Google's MD spec for tooltips.
  2. Potentially make it easy for developers to implement long-press functionality within a vuetify app anywhere it's needed. The current offerings elsewhere (other than here) do not seem a good match for vuetify use.

What is your proposed solution?

A v-touch-hold directive such as used by Quasar seems to have the best combination of features, simplicity, and effectiveness. It:

  1. is a directive, so can be applied most anywhere directly
  2. allows for custom long-press duration length v-touch-hold:2000, but has a reasonable default setting of 600ms
  3. can be used for both mouse and touch events, or limited to just touch events v-touch-hold.noMouse, as desired
  4. supports both .stop and .prevent modifier use, if needed
  5. calls a method when the duration threshold has been reached v-touch-hold="myHandler"
  6. passes the event to the handler, with the developer being able to glean the screen position and duration length (this feature may or may not be that useful)

Thanks for considering this request.

@johnleider johnleider added help wanted We are looking for community help T: feature A new feature labels Nov 1, 2018
@MajesticPotatoe MajesticPotatoe changed the title Feature Request: VTouchHold Directive for Long-Press of an Element [Feature Request] VTouchHold Directive for Long-Press of an Element Dec 7, 2018
@bryden
Copy link

bryden commented Jan 7, 2019

The current offerings elsewhere (other than here) do not seem a good match for vuetify use.

@185driver : have we considered hammerjs? In my opinion it's better aligned with the Google Material Design specs related to touch screen interaction.

Specifically, it has a framework for both tap and long-press, which I didn't see available using quasar's framework.

@johnleider johnleider added this to To do in Vuetify 3 - Titan via automation Nov 30, 2020
@johnleider
Copy link
Member

I like to provide baseline functionality for users but also give them the ability to integrate third party libraries, such as hammerjs, which offer a full suite of functionality.

With that being said, we have lots of touch directives that we are going to add in version 3.

@johnleider johnleider added the D: New Directive A new directive label Dec 8, 2020
@johnleider johnleider added this to the v3.x.x milestone Dec 8, 2020
@johnleider johnleider removed the help wanted We are looking for community help label Jan 23, 2024
@johnleider johnleider modified the milestones: v3.x.x, v3.6.0 (Nebula) Jan 26, 2024
johnleider added a commit that referenced this issue Apr 16, 2024
@johnleider johnleider self-assigned this Apr 21, 2024
@johnleider johnleider linked a pull request Apr 21, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
D: New Directive A new directive T: feature A new feature
Projects
No open projects
Development

Successfully merging a pull request may close this issue.

3 participants