Thank you in advance for reading my post.
I enabled the multiselect mode for a tree component.
Then on a regular screen, I can do single item selection with mouse click and multiple items selection with mouse click + CTRL button is pressed.
But on a touch screen, the mutiselect mode is on by default . No matter the CTRL is pressed or not, I can only do mutiple item selection.
Why it’s different on a touch screen? How can I fix this bug?
I wouldn’t consider it a bug. The thing is: You don’t have a CTRL Button on your phone or tablet. So as the Table allows MultiSelections aka is in MultiSelect-Mode you would expect the user wanting to select multiple items. Now because there is no “easy way” to switch between selecting one and selecting multiple that is also easy to understandable by every user and as a result would be conform to UX/Usability, Vaadin defaults to Multi-Select on Touch for those devices (Similiary to it removing the scrollbars on a Grid when the app is viewed with a touch device.
It seems like your “test device” is some kind of Tablet PC as you talk about using CTRL and nothing happening. That it because the majority of Users that view Vaadin application in mobile mode will probably be smartphones or tablets / devices without a CTRL button.
Now how you could “solve” this problem:
A You could try to “hack” it in by either doing something in the Item Click Listener of your Table, some custom selection handling with a Collection object to hold selected values and a CellStyleGenerator to change styles on selected rows or maybe even some JS Hack (maybe there is even a simple method to do this. I don’t actually know, maybe someone else does)
B You could for example add a Button above the Table that is only visible on mobile and allows the user to switch between multi- and single-select. This was the first thing that came to my mind that “should” be easy to understand for mobile users so be conform with good UX and shouldn’t be too difficult to implement.