bug: ion-datetime does not allow click and drag to scroll through wheel

[marshall86]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

As per this issue #27414

Expected Behavior

Scroll on mouse click and drag

Steps to Reproduce

If you create an ion datetime component you will see that is not possible to click and scroll but you either use the mouse wheel or the keyboard to scroll inside the component.

Code Reproduction URL

https://stackblitz.com/edit/angular-jbamzx-vmydwk?file=src%2Fapp%2Fexample.component.html

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/myuser/.nvm/versions/node/v18.18.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.1.0
@angular-devkit/build-angular : 17.3.6
@angular-devkit/schematics : 17.3.6
@angular/cli : 17.3.6
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 5.7.5
@capacitor/android : 4.6.1 (/Users/myuser/Documents/....../node_modules/@capacitor/android)
@capacitor/core : 5.7.5
@capacitor/ios : 4.6.1 (/Users/myuser/Documents/......node_modules/@capacitor/ios)

Cordova:

Cordova CLI : 11.1.0
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v18.18.0 (/Users/myuser/.nvm/versions/node/v18.18.0/bin/node)
npm : 9.8.1
OS : macOS Unknown
Xcode : Xcode 15.4 Build version 15F31d

Additional Information

No response

[thetaPC]

Thank you for submitting this issue!

As mentioned in a comment through the other thread, "The wheel picker is designed for mobile application and is not intended for desktop use. Datetime does support keyboard and screen reader entry for scenarios where touch is not feasible. Arrow keys can be used to navigate between wheel options, and VoiceOver/TalkBack can be used to navigate between wheel options."

Please, elaborate the need for a click and drag functionality.

[Ionaru]

I hope this video demonstrates the issue.

The <ion-datetime> component still uses its 'wheel' or 'carousel' design for picking the month & year even when used on desktop, but dragging with the mouse is not possible. Arrow keys, scrollwheel and clicking do work.

The 'wheel' design of the datepicker suggests that dragging with the mouse is possible, like a slider or scrollbar. But it isn't, this is surprising behaviour to users expecting similar patterns.

The same is true for <ion-picker>

During development, it is strange that switching from desktop to mobile view suddenly enables dragging.

Related to #6969

---

The UX for scrollwheel-ing through the options isn't great, but I made a separate issue for that: #30244

[thetaPC]

Thank you for your response! Do you have a use case that demonstrates the dragging behavior on desktop? The more use cases we gather, the better we can evaluate how to move forward with this issue. Since the wheel picker is designed for mobile, its behavior may vary on different platforms. However, we’re open to making adjustments if there are valid use cases.

[Ionaru]

I've been unable to find specific examples of dragging behaviour on desktop websites or applications, but I have also not found any wheel pickers...

Currently there is no grid style available for the time, month and year selection, so I found these use cases:

1. Expected UX patterns: Nowadays, most people grow up using their phones more than a desktop PC. So the expectation when presented with a wheel-like design, is that you can drag the wheel up or down to change the value. Especially in iOS it is used a lot. Because dragging things is used in various desktop functions as well (web scrollbar, dragging windows, taskbar items, sliders, etc), I would expect it to work on this wheel picker.

2. No mouse wheel: Because there is no grid style available for the time, month and year selection, selecting a specific value like a birthyear can require a lot of clicks or button presses when no mouse wheel is available. Say the picker defaults to 2025 and I want to select 1965, I have these options, assuming I know all controls and I have all these buttons on my keyboard:

   • Clicking: only scrolls 2 years at a time so that's 30 clicks.
   • Arrow keys: 60 keypresses.
   • Pageup/pagedown: this scrolls 5 years at a time, so 12 keypresses.

P.S. While browsing through the <ion-picker> code, I found a lot of code relating to text input, but I couldn't find anything in the documentation about that feature, or type anything in any of the <ion-picker> or <ion-datetime> examples. Does that feature work?

ionic-framework/core/src/components/picker/picker.tsx

Lines 218 to 231 in b8ce56b

	/**
	* Enters input mode to allow
	* for text entry of numeric values.
	* If on mobile, we focus a hidden input
	* field so that the on screen keyboard
	* is brought up. When tabbing using a
	* keyboard, picker columns receive an outline
	* to indicate they are focused. As a result,
	* we should not focus the hidden input as it
	* would cause the outline to go away, preventing
	* users from having any visual indication of which
	* column is focused.
	*/
	private enterInputMode = (columnEl?: HTMLIonPickerColumnElement, focusInput = true) => {