ScrollContainer and Slider don't interact well on mobile platforms

[Russell Keith-Magee]

Describe the bug

If you have an iOS or Android app with a scroll container that contains a slider, the slider will only respond to clicks on the range, not drag events on the slider handle.

Steps to reproduce

Run the following app:

import toga
from toga.style import Pack
from toga.style.pack import COLUMN


class Bug2395(toga.App):
    def startup(self):
        main_box = toga.Box(
            children=[
                toga.Slider(),
                toga.ScrollContainer(
                    content=toga.Box(
                        children=(
                            [toga.Label(f"label {i}") for i in range(0, 50)]
                            + [toga.Slider()]
                            + [toga.Label(f"label {i}") for i in range(0, 50)]
                        ),
                        style=Pack(direction=COLUMN),
                    ),
                    style=Pack(flex=1),
                ),
            ],
            style=Pack(direction=COLUMN),
        )

        self.main_window = toga.MainWindow(title=self.formal_name)
        self.main_window.content = main_box
        self.main_window.show()


def main():
    return Bug2395()

This has 2 sliders - one inside the ScrollContainer, and one outside. The one outside the ScrollContainer behaves as expected; however, the one inside will only respond to clicking on points on the range of the slider. The slider handle itself cannot be grabbed.

Expected behavior

Both sliders should respond to grabbing the slider handle.

Screenshots

No response

Environment

• Operating System: Android, iOS
• Python version: All
• Software versions:
  • Briefcase: 0.3.17
  • Toga: 0.4.2

Logs

No response

Additional context

This is likely because the Scrollcontainer is taking priority on the drag events.