[iOS] function pickers are not working

[pixelzoom]

Reported by @kathy-phet via email:

The pickers for changing the function values (e.g. from +1 to +2) do not work on the iPad I have. It always just tries to move the function -- as opposed to changing the value in the function. So I cannot get anything but the "1"s right now on iPad. (latest dev version)

The "pickers" referred to are instances of scenery-phet.NumberPicker.

The version that @kathy-phet is testing is presumably 1.0.0-dev.26. I received no info on her iPad model, iOS version or browser version.

I reproduced the problem on iPad2 with iO 9.3.1 and mobile Safari.

Steps to reproduce:

1. Start 1.0.0-dev.26: http://www.colorado.edu/physics/phet/dev/html/function-builder/1.0.0-dev.26/function-builder_en.html
2. Go to the "Equations" screen
3. In the functions carousel (horizontal carousel at bottom center), click on one of the pickers.

On desktop (Safari, Chrome, Firefox), the pickers work as desired: Clicking a picker increments/decrements the value, but does not result in moving the function. The function does not move or pop out of the carousel unless you click on the function somewhere other than the picker.

On mobile Safari, "clicking" on a picker doesn't increment/decrement the value, and instead pops the function out of the carousel. If you hold the pointer down, the picker value will change.

Here's the relevant code in function-builder.MathFunctionNode:

     // picker for changing operand value
      var picker = new FBNumberPicker( functionInstance.operandProperty, functionInstance.operandRange, {
        color: functionInstance.viewOptions.pickerColor,
        font: FBConstants.EQUATIONS_FUNCTION_PICKER_FONT,
        arrowLineWidth: 0.5,
        skipZero: !functionInstance.zeroOperandValid
      } );

      // prevent clicking on the picker from starting a drag sequence for the function node
      picker.addInputListener( {
        down: function( event, trail ) {
          event.handle(); // don't propagate event to parent
        }
      } );

Is it possible that event.handle is not working as expected for touch?

Assigning to @jonathanolson with high priority, since this affects ability to use the sim.

[pixelzoom]

This is a showstopper.
Assigning to @ariel-phet to prioritize and assign.
Mentioning @jonathanolson, since he will undoubtedly be involved in addressing this.

[jonathanolson]

It seems touch-specific (I can also reproduce in "device mode" on Chrome), and event.handle shouldn't* have any differences between mouse and touch.

It looks likely that touch-to-snag is enabled on the function bodies themselves, so that after the touch-down triggers the picker, any movement afterwards triggers the drag on the function body.

[jonathanolson]

(Will be investigating how to fix).

[jonathanolson]

It does seem that allowTouchSnag: false in MovableNode prevents the bad behavior. Can this be turned off, or have an option that controls which nodes can be touch snagged?

Additionally, the 'trail' parameter to the event listener should be removed, as Scenery just calls eventListener( event ) without a second parameter.