[bug] weird cursor while dragging the element which has `data-tauri-drag-region` attribute

[percy507]

Describe the bug

I am not sure this is a bug or just a missing part of document.

Before adding the draggable attribute, the cursor is not the wanted one while dragging.

Reproduction

No response

Expected behavior

No response

Platform and versions

Environment
  › OS: Mac OS 11.6.0 X64
  › Node.js: 16.10.0
  › npm: 7.24.0
  › pnpm: 6.16.0
  › yarn: 1.22.15
  › rustup: 1.24.3
  › rustc: 1.60.0
  › cargo: 1.60.0
  › Rust toolchain: stable-x86_64-apple-darwin 

Packages
  › @tauri-apps/cli [NPM]: 1.0.0-rc.7(outdated, latest: 1.0.0-rc.9)
  › @tauri-apps/api [NPM]: 1.0.0-rc.3(outdated, latest: 1.0.0-rc.4)
  › tauri [RUST]: 1.0.0-rc.6,
  › tauri-build [RUST]: 1.0.0-rc.4,
  › tao [RUST]: 0.7.0,
  › wry [RUST]: 0.14.0,

Stack trace

No response

Additional context

No response

[Laegel]

Hey @percy507 , that doesn't look like a bug but rather something we're not handling (yet?).
You may customize your cursor with the following CSS properties:

[data-tauri-drag-region] {
  cursor: move; /* Not all browsers support "grab" */
  cursor: grab;
  cursor: -webkit-grab;
}

[data-tauri-drag-region]:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

[percy507]

You may customize your cursor with the following CSS properties

@Laegel I have tried this. It seems not helpful.

[lucasfernog]

The CSS should work if you apply it globally, I just tested it to confirm. If you still face issues please share a repo with us so we can help you spot the problem.

[percy507]

I just tested it to confirm

@lucasfernog Do you mind share your tested css code? I try to set cursor of [data-tauri-drag-region]:active but not work at all.

[lucasfernog]

Same that Laegel pasted here @percy507

[percy507]

Unfortunately, still not work.😭 Even upgrade to the newest tauri version.

Environment
  › OS: Mac OS 11.6.0 X64
  › Node.js: 16.10.0
  › npm: 7.24.0
  › pnpm: 6.16.0
  › yarn: 1.22.15
  › rustup: 1.24.3
  › rustc: 1.60.0
  › cargo: 1.60.0
  › Rust toolchain: stable-x86_64-apple-darwin 

Packages
  › @tauri-apps/cli [NPM]: 1.0.0-rc.13
  › @tauri-apps/api [NPM]: 1.0.0-rc.6
  › tauri [RUST]: 1.0.0-rc.14,
  › tauri-build [RUST]: 1.0.0-rc.12,
  › tao [RUST]: 0.9.1,
  › wry [RUST]: 0.17.0,

App
  › build-type: bundle
  › CSP: default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  › distDir: ../dist
  › devPath: http://localhost:6777/
  › framework: React
  › bundler: Rollup

App directory structure
  ├─ .husky
  ├─ node_modules
  ├─ public
  ├─ packages
  ├─ src-tauri
  ├─ .git
  ├─ .vscode
  └─ src

[lucasfernog]

If you share a repo I can help you find the issue.

[percy507]

@lucasfernog Here you go. A fresh demo created by npx create-tauri-app.

https://github.com/percy507/tauri-demo

[lucasfernog]

@percy507 sorry actually this code is also needed:

document.querySelector('.dragbar').addEventListener('mousedown', e => {
  e.preventDefault()
})

this is something we can do on our side though, and I think we should.

[lucasfernog]

We will do this automatically in the next release (we will publish it in the next few hours). Thanks for reporting this, I didn't notice it in my test app because it was doing this behind the scenes already.

[schickling]

Can confirm: Works for me in the latest RC release.

[xmx-emm]

I have been searching for this method for almost an hour. Thank you