React-admin: Sidebar in mobile(responsive small mode) selects the first item on its own( without user clicking it )

[astriskit]

Hello there.

When I was browsing the demo site(https://marmelab.com/admin-on-rest-demo/) in my mobile( chrome browser latest up-to-date ), I saw, whenever the sidebar was opened, the first item (the dashboard) got itself selected without any tapping.

Also, while tapping on the other items in the list, it was not always that the results were loaded( the page remained unchanged i.e. no action ) and the sidebar as usual closed.

Please see into it.

[djhi]

Can't reproduce any of those issues: tested on Asus Zenfone 2

[astriskit]

It is strange because I have tried in atleast two different devices. One of them is Yu Yuphoria.

[djhi]

Have you tried a sample material-ui app on these phones ?

[astriskit]

Taking your advice, I browsed http://www.material-ui.com/ (demo) in my mobile and though the UI was not that quickly working but was working as expected( without any functional disruption like admin-on-rest ).

[fzaninotto]

I can confirm the issue with Chrome in simulated device mode.

[astriskit]

So, it is a bug. Thanks to @fzaninotto for confirming that.

[djhi]

whenever the sidebar was opened, the first item (the dashboard) got itself selected without any tapping.

In fact, I can only reproduce this prb when we are on the dashboard page. Opening the Sidebar from any other page does not select the first item automatically

[djhi]

Moreover, if I try to log the onTouchTap event inside the DashboardMenuItem, I do not get any log from this auto selection

[astriskit]

hello there!

I thought it would be nice if I could add pictures of what I faced.

So here are the gifs -

[djhi]

Thanks but we finally reproduced it. I have spent several hours on this already but haven't find why it is happening yet.

[astriskit]

Hello there!
Any update guys ??
BTW thanks for the efforts. :+1:

[djhi]

Not yet

[astriskit]

Hello guys! Any update ?!

[wesley6j]

On a Chrome in simulated device mode, both dashboard page and products page have this bug.

When user click to display the menu, the first item is automatically selected.

I wonder if products list page has a regular table (rather than a grid list), this bug will disappear for this page?

[wesley6j]

The cause is that sometimes (on dashboard and products page) the touch event is sent to the MenuItem. This can be confirmed by moving down all the menu items with edited css.

A 200ms delay to show the drawer prevented this on Chome simulation.

I am not 100% sure the 200 ms works for all devices. if it doesn't, try increase it.

698

[astriskit]

It worked, but I increased that to 300 since 200 wasn't making any difference. And now at least the auto selection of the first item in the list isn't triggering. That's cool. But, something remains same, if I click on an item in the menu (while simulating in the chromium), the link related with the menu option just doesn't load. But, if I press the mouse key for a little bit longer and then release it when selecting the menu option, the link is loaded. I find it strange.

[wesley6j]

@astriskit Please increase it to a very large value just to verify the problem is related to "the touch event sent to menu icon is also sent to the first item of the drawer".

If the delay has to be very large for some devices, then we can only fix it by not allowing drawer and its children nodes to accept events when animation is happening.

[astriskit]

@wesley6j Increased it till 2000 ms and the effect seems to be same, i.e., the auto-click is not triggering, although with increasing delay. But, the menu options are not loaded in chromium.

[djhi]

Can't reproduce it on the next branch anymore. Feel free to reopen.

[djhi]

Reopened as I reproduced it on the demo with the next branch