Touchscreen devices could not end drawing, select nor edit the drawings (eg. Rectangle, Fibonacci etc.)

[jackytanjq]

Expected behaviour

The drawing's (eg. Rectangle) second step/point could not be plotted and therefore could not end while using the Safari browser.

Using the Google Chrome browser can complete the drawing, but the drawing could not be selected to edit the points nor the options to edit/delete.

Actual behaviour

The drawings should behave the same as when using a mouse and keyboard.
Each step/point to end on each tap should behave similarly to a mouse click.

Live demo with steps to reproduce

https://www.highcharts.com/demo/stock/stock-tools-gui
Draw a "Rectangle", then single tap on the drawn rectangle to attempt to select.
Highcharts was not able to pick up the single taps to select the drawings.

Product version

Highcharts Stock v10.3.2

Affected browser(s)

Safari and Chrome on touchscreen devices (Tested on iPadOS 15.7, iPad Air 4th Gen and also on Android)

[bm64]

Hello @jackytanjq and thanks for reporting the bug. It looks like it's broken since 9.1.0, in v9.0.1 works fine.

[pawellysy]

Hello @jackytanjq, thanks for your patience. Here is the workaround for this bug: https://jsfiddle.net/BlackLabel/1g685f2h/4/

Internal note

The SVGElement.prototype.on function got refactored and doesn't implement the unique event behavior for touch events.

[pawellysy]

Regression after: #15627