Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cursor won't remain set to its assigned style whilst click-and-dragging to move a View #204

Open
shirakaba opened this issue Jul 3, 2018 · 1 comment
Labels

Comments

@shirakaba
Copy link
Contributor

shirakaba commented Jul 3, 2018

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

$ node_modules/.bin/react-native-macos info

Environment:
  OS: macOS High Sierra 10.13.5
  Node: 9.11.1
  Yarn: 1.3.2
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.3.1 Build version 9E501
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.0.0-alpha.12 => 16.0.0-alpha.12
  react-native: Not Found

react-native-macos: 0.18.0-alpha.3

Aim

Basically I want the cursor to imitate the accessible behaviour you'd expect from NSSplitViewController: the cursor style should reflect whether it's hovering over the divider or not.

Steps to Reproduce

Run the code from the Reproducible Demo section.

  1. Move your cursor onto the pale-cloured divider bar
  2. Try clicking-and-dragging, moving it from side-to-side.
  3. Release your cursor.
  4. Move your cursor off the divider.

Expected Behaviour

  1. The cursor should become set to resizeLeftRight style.
  2. The cursor should remain in resizeLeftRight style.
  3. The cursor should remain in resizeLeftRight style provided that it's still overlapping the divider bar.
  4. The cursor should return to arrow style.

Actual Behavior

  1. ╳ The cursor returns to arrow style. Even if an adaptation is added to restore resizeLeftRight style upon any call of the whilstDragging function, the cursor will repeatedly fight to return to arrow style. I think this is related to the divider changing position (possibly re-rendering in the process, and affecting the responder behaviour), but I'm not sure.
  2. ✅ (maybe by co-incidence)
  3. ✅ (maybe by co-incidence)

See video on Twitter.

Reproducible Demo

Use the code snippet from this Snack with react-native-macos.

Note: commit 7c8be91 from July 3rd 2018 to master must first be applied to fix the Cursor module import issue.

@ptmt
Copy link
Owner

ptmt commented Jul 7, 2018

A very good case of how tricky it could be to replicate native UX. Instead, it's appealing to rewrite this with the native component, which is not easy too. I have a little time this weekend, trying to fix as many bugs as I can. Will play with this too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants