Splitter Doesn't Resize on Mobile

[EthanHaid]

I'm submitting a...

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primevue/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=110

CodeSandbox Case (Bug Reports)

CodeSandbox reproduction:
https://codesandbox.io/s/splitter-doesnt-work-on-mobile-dcfzs?file=/src/App.vue
https://dcfzs.csb.app/

Current behavior
Splitter can only be resized on desktop

Expected behavior
Splitter can also be resized on mobile

Minimal reproduction of the problem with instructions

https://codesandbox.io/s/splitter-doesnt-work-on-mobile-dcfzs?file=/src/App.vue
https://dcfzs.csb.app/

• Open this sandbox in a new window
  (button is top-right of the preview)
• Open Chrome Dev-tools
  (press F12)
• Switch to mobile view
  (Ctrl-Shift-M)
• Observe, the splitter cannot be resized, despite the large gutter size. This is also broken when testing with an actual phone.

What is the motivation / use case for changing the behavior?
I would like my app to work on mobile please :)

Please tell us about your environment:
CodeSandbox, Chrome

• Vue version:
  3.2.11

• PrimeVue version:
  3.7.1

• Browser:
  Chrome, Mobile Firefox, Mobile Chrome
  Works on desktop Firefox's mobile view though

[mertsincan]

Hi,

Splitter uses touch events and Mobile Emulator doesn't trigger them. Could you please try the splitter component with Mobile Device? It works fine for me.

For now, closed. If the problem persists, please reopen this ticket.
Best Regards,

[EthanHaid]

I did try it on mobile, resizing is broken on Android Chrome and Firefox. I can test on iOS Safari later today.

The Mobile Emulator is triggering the touch events, and the p-splitter-gutter-risizing class gets applied. The problem is that the flex-basis calc does not get updated as the touch slides left and right.

Please reopen this issue, splitter is broken on Android mobile.

[EthanHaid]

@mertsincan Update:

It seems to work properly on iOS, both Safari and Chrome. It remains, however, broken on Android Chrome and Firefox, as well as desktop Chrome's mobile emulator.