Number field step button click does not lock touch scrolling

[TatuLund]

Description

Number field step button click does not lock touch scrolling. Hence if you intend to touch scroll the view by accidentally touching the button, you will both scroll and increment/decrement the field. This leads to accidental actions and errors.

Expected outcome

It would be better if the touch move action would be prevented, and only one of the actions happens. User will notice this and get feedback and learns how to use the UI correctly.

Minimal reproducible example

@Route(value = "integer", layout = MainLayout.class)
public class IntegerView extends Scroller {

    public IntegerView() {
        IntegerField field = new IntegerField("Integer");
        field.setStepButtonsVisible(true);
        VerticalLayout layout = new VerticalLayout();
        Div spacer1 = new Div();
        Div spacer2 = new Div();
        spacer1.setHeight("750px");
        spacer2.setHeight("750px");
        layout.add(spacer1, field, spacer2);
        setContent(layout);
    }
 }

Steps to reproduce

Try out the example view with mobile device.

Environment

Vaadin version(s): Vaadin 24.2
OS: Android, iOS

Browsers

No response

[TatuLund]

The workaround is to add preventDefault on touchmove event to decrement/increment buttons.

@Route(value = "integer", layout = MainLayout.class)
public class IntegerView extends Scroller {

    public IntegerView() {
        IntegerField field = new IntegerField("Integer");
        field.setStepButtonsVisible(true);
        field.getElement().executeJs(
                """
                        const container = this.shadowRoot.querySelector('vaadin-input-container');
                        for (let i=0;i<container.children.length;i++) {
                            if (container.children[i].getAttribute('part')
                                    && container.children[i].getAttribute('part').endsWith('button')) {
                                container.children[i].addEventListener('touchmove', (e) => {
                                    e.preventDefault();
                                });
                            }
                        };
                                """);        
        VerticalLayout layout = new VerticalLayout();
        Div spacer1 = new Div();
        Div spacer2 = new Div();
        spacer1.setHeight("750px");
        spacer2.setHeight("750px");
        layout.add(spacer1, field, spacer2);
        setContent(layout);
    }
 }

[web-padawan]

Increasing or decreasing value happens on touchend event. In case if there's a scrolling in progress, cancelable for this event returns false (at least in Chrome device emulator) and the following error is logged in the console:

I also tested this on iOS simulator and cancelable is set to false as well, but there is no console error in this case.
That said, I think we could check for cancelable on touchend and if it's false, don't change the field value.