dropdown on mobile doesn't work
dnoneill opened this issue · 22 comments
Dropdown purpose field does not work on mobile. It will not allow you to select the purpose you want.
Do you have a sample page online to try with a physical device? I can't reproduce it on the Chrome (or FF) mobile emulator, and touch events seem to work in principle, too. (The only thing I'm noticing is that the dropdown is rendered underneath tags, if any. But that's just a CSS z-index issue.)
Quick update: the CSS issue is now fixed.
@rsimon I am trying to test on a mobile but when I try npm start on on the annotorious-openseadraon I get the following error:
/annotorious-openseadragon/node_modules/webpack-dev-server/lib/servers/WebsocketServer.js:10
static heartbeatInterval = 1000;
^
SyntaxError: Unexpected token =
at new Script (vm.js:80:7)
at NativeCompileCache._moduleCompile (/annotorious-openseadragon/node_modules/v8-compile-cache/v8-compile-cache.js:240:18)
at Module._compile (/annotorious-openseadragon/node_modules/v8-compile-cache/v8-compile-cache.js:184:36)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (/annotorious-openseadragon/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Server.getServerTransport (/annotorious-openseadragon/node_modules/webpack-dev-server/lib/Server.js:1009:28)
Did you start with a fresh install? Try to delete your no node_modules and package.lock file, then running npm install.
Just tried that. Did not work, same error.
Uploaded a video of the problem I am running into.
NEZO1988.mp4
Re build error: sorry, I was unable to reproduce this. I've done a fresh clone, ran npm install, npm start. I didn't find anything when I googled your error either. Really no idea what this could be. For info: I'm on Linux, node version 14.15.1 and npm version 7.20.3.
Concerning the dropdown: just to confirm, you are using touch, not a keyboard arrow, right? Do you know whether this worked in a previous version? Frankly, I never touched anything about the react-select widget since you integrated it. I definitely didn't make any changes (although there may well have been upgrades to a newer version of the library at some point).
Also, I just switched on the purposeSelector in the Getting Started demo on the Annotorious website - and it seems to work perfectly ok. Is there some other code on you page that could intervene? JS event handlers? CSS?
Screenrecorder-2021-10-26-16-33-32-829.mp4
The video above is Chrome on Android. I also tested Safari on a (very old...) iPad, same behavior.
I tried it on the iPad I have and it worked. I am wondering if it might have something to do with the openseadragon. Anyway you can test with the openseadragon guide?
PS: I also note there's a problem with your editor position. Which version of Annotorious are you using? And are you sure you are using the CSS theme from the same version?
Also I think the error has to do with the "Error: Cannot find module 'worker_threads'" that shows up with npm install
I am using annotorious-openseadragon Version 2.5.6 and the css I am using is what got packaged with it. Also the editor position moved when I accidentally dragged it on the touch screen.
Also I think the error has to do with the "Error: Cannot find module 'worker_threads'" that shows up with npm install
Maybe this? https://stdworkflow.com/884/vite-error-cannot-find-module-worker-threads
Which version of node are you using?
P.S.: dropdown worked on the OSD Getting Started as well. But that's using v2.5.8 (which has a selection bug argh) - there have been CSS changes between v2.5.6 and 2.5.8 which I think might have possible impact. But those should only affect the editor in upwards orientation (= when positioned above the box).
Hmmm. Okay. I will look into my implementation. Thanks.
So you remember from which version you upgraded? A possible change could be the draggable editor. Really couldn't imagine anything else that could affect this. If that's it, v2.5.9 should provide the final fix.
Yeah. Updated to 2.5.8. Also the updating of node fixed that error I was getting. Thanks so much!
🎉 must have been the new draggable behaviour after all. As I said: unfortunately 2.5.8 has another bug that causes problems selecting annotations on touch. But that's already fixed on main, and will be live with 2.5.9 soon.
Sounds good. Thanks!