PanResponder: Firefox problem

[MillerGregor]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
the issue can be reproduced with the example in the RNW Storybook.

1. using Firefox, navigate to: http://necolas.github.io/react-native-web/storybook/?selectedKind=APIs&selectedStory=PanResponder&full=0&down=0&left=1&panelRight=0
2. mousedown on the circle, drag, and release. The first time works correctly.
3. move the cursor off of the circle.
4. mousedown on the circle again and drag, keeping the button pressed.

• This time, the "original" circle appears to remain in place and a "copy" is dragged with the cursor. The cursor becomes a "(\)" symbol.

5. mouseup.

• The original circle is now "stuck" to the cursor (and stays blue) until another mousedown.

What is the expected behavior?
each series of mousedown->drag->mouseup moves the circle with the cursor and leaves it once the mouse button is released.

Environment (include versions). Did this work in previous versions?

• OS: Win10 15063

• Device: PC

• Browser: Firefox 57.0 64bit and Firefox Developer 58.0b8 64bit

• React Native for Web (version): 0.1.16 and 0.0.130

• React (version): 16.0.0 and 15.5.4
  (behavior is the same)

• works correctly on:

  • Chrome 62
  • IE 11
  • Edge 40

Clearly, Firefox Quantum is doing something different. I'd submit a bug to mozilla, but they'll want a reproduce-able example. I doubt they'd enjoy receiving my webpacked react app.

thanks

[necolas]

I haven't looked into this yet, but it does seem that Firefox is doing something different to other browsers here (cc @linclark)

[necolas]

I thought I'd fixed this but there's something else going on with Firefox. After the first press-and-drag, it stops firing mousemove events altogether and goes into the browser's drag-and-drop mode, whereas other browsers do not.

And this issue doesn't manifest at all in Firefox if you open dev tools and turn on "responsive design mode" (with or without touch is being emulated). You can also "fix" the frozen state at any time by turning on "responsive design mode". So I wonder if there's an issue in desktop Firefox?

Edit: looks like a Firefox bug – when a shape has display:flex, press-and-drag is treated as if the element were an image. You can reproduce by loading shapes of css, editing the styles of any shape to include display:flex, then press and drag. Try in RWD mode too

[necolas]

cc @miketaylr from mozilla web compat

[MillerGregor]

agreed, must be a firefox bug.

You can reproduce by loading shapes of css

this is an easily-reproducible example that I can submit to mozilla.

thanks for looking into this

[miketaylr]

Thanks.

@Gregor1971 feel free to report a bug at bugzilla.mozilla.org, or just at webcompat.com and we'll take a look. Thanks!

(for bugzilla, you can cc :miketaylr, or just ping me back with the bug number)

[necolas]

Thank you both

[MillerGregor]

@miketaylr
submitted #1439068
thanks

[murtraja]

@MillerGregor thanks for filing that issue.

The (top) swiper here doesn't always work properly due to this