[question] [DataGridPro]About Sorting on iPad

[e12879]

Order ID or Support key 💳 (optional)

58043

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I am using mui/x-data-grid-pro.
Please tell me about the sort function of DataGridPro on iPad (Safari).
Android tablet (Google Chrome) sorts with 1Tap.
On the other hand, iPad sorts with 2Tap. Is this the specification?
If possible, I would like to sort with 1Tap even on iPad (Safari). Is there a way?

supplementary explanation:
Column headers only have sort functionality.

Your environment 🌎

My environment is as follows.
■npx @mui/envinfo
  System:
   OS: Windows 10 10.0.19044
  Binaries:
    Node: 14.21.3 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.18 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.48)

 

■Actual machine environment in use
　　Ipad 6 iOS：15.7.1
　　iPad Pro iOS：16.3.1
　　Galaxy Tab A8：Android11

[m4theushw]

@mui/xgrid Could someone test the DataGrid on the iOS simulator or on a real device? With the DevTools only one tap is enough to trigger the sorting.

[cherniavskii]

I can reproduce this on iOS simulator:

Screen.Recording.2023-04-28.at.10.21.47.mov

[cherniavskii]

Apparently, this is how iOS handles the elements with :hover:
https://humanwhocodes.com/blog/2012/07/05/ios-has-a-hover-problem/
https://css-tricks.com/annoying-mobile-double-tap-link-issue/

[cherniavskii]

Similar issue was reported for the Autocomplete component in mui/material-ui#21049

[cherniavskii]

I'm not sure there's an easy fix here. To make sorting work on the first click, we have to get rid of hover styles on mobile, therefore it will be impossible to open the column menu (column menu icon is only showed on hover)

[e12879]

@cherniavskii @m4theushw
thank you for your reply.
Do you have any plans to fix it in DataGridPro?
If it doesn't, I'm aware that I need to remove the hover.

[cherniavskii]

@e12879 We do not have plans for a fix yet, as it's unclear how to make the column menu work without hover.

cc @gerdadesign Maybe we can reconsider how column headers work on touch devices? E.g. show them in "hovered" state by default, so that you always see the icons in the column headers, as well as resize handles?

[romgrk]

An alternative I sometimes see on mobile is to use a long press to replace the hover trigger.

[MBilalShafi]

you always see the icons in the column headers, as well as resize handles

This makes sense to me because:

1. The content shown on mobile screens is mostly not that much and it won't look heavy to show the icons all the time
2. There's no hover on mobile rather it is a tap, so showing the icons may save some extra taps/confusion on other (non-iOS) devices too

[gerdadesign]

+1 for showing on mobile what is typically reserved for hover on desktop.