RadzenSplitterPane is not working with iOS devices

[melfon]

Describe the bug
Touch events interfere with the component, and it is not possible to move the splitter bar.

To Reproduce
Steps to reproduce the behavior:

1. Run the Splitter demo at https://blazor.radzen.com/splitter
2. Try to slide it with an iPad. It will be marked, but not moved.

Expected behavior
You would expect it to follow your finger movement.

Desktop (please complete the following information):

• iOS 17.3.1 and 17.2
• Browsers tested: Chrome and Safari
• Tested with latest version: 4.31.0

Additional context
The problem can be solved by using pointer event instead of mouse event.

[melfon]

The problem can be solved with the following lines of code:

RadzenSplitterPane.razor line 21:
@onmousedown=@(args => Splitter.StartResize(args, Index))>
replaced with
@onpointerdown=@(args => Splitter.StartResize(args, Index))>

RadzenSplitterPane.razor.cs line 263:
await Splitter.StartResize(new MouseEventArgs()
replaced with
await Splitter.StartResize(new PointerEventArgs()

RadzenSplitter.razor.cs line 97:
internal Task StartResize(MouseEventArgs args, int paneIndex)
replaced with
internal Task StartResize(PointerEventArgs args, int paneIndex)

Radzen.Blazor.js lines 2114 to 2117:
document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler);
document.removeEventListener('mouseup', Radzen[el].mouseUpHandler);
document.removeEventListener('touchmove', Radzen[el].touchMoveHandler);
document.removeEventListener('touchend', Radzen[el].mouseUpHandler);
replaced with
document.removeEventListener('pointerup', Radzen[el].mouseUpHandler);
document.removeEventListener('pointermove', Radzen[el].mouseMoveHandler);
el.removeEventListener('touchmove', preventDefaultAndStopPropagation);

Radzen.Blazor.js lines 2170 to 2173:
document.addEventListener('mousemove', Radzen[el].mouseMoveHandler);
document.addEventListener('mouseup', Radzen[el].mouseUpHandler);
document.addEventListener('touchmove', Radzen[el].touchMoveHandler, { passive: true });
document.addEventListener('touchend', Radzen[el].mouseUpHandler, { passive: true });
replaced with
const preventDefaultAndStopPropagation = (ev) => {
ev.preventDefault();
ev.stopPropagation();
};
document.addEventListener('pointerup', Radzen[el].mouseUpHandler);
document.addEventListener('pointermove', Radzen[el].mouseMoveHandler);
el.addEventListener('touchmove', preventDefaultAndStopPropagation, { passive: false });

[akorchev]

Hi @melfon,

You can submit a pull request with the proposed changes. We will test and merge it if no other issues are found.

[melfon]

OK, will do