Classifier: sometimes text input fields ignore left/right keys

[shaunanoordin]

UI/UX Issue

Problem: in certain conditions, text input fields () in the Classifier's tasks panel ignore Left and Right arrow keys.

Analysis

• Oddly, the only time I'm able to trigger this error is if the Tutorial appears when the workflow starts.
• i.e. it triggers when it's the first time a logged-in user visits a workflow with a tutorial.
• If I refresh the page, the issue no longer occurs.

My best(??) guess at the moment (which is still pretty weak; see below) is that the Tutorial component is capturing the Left/Right keyboard input but isn't releasing it (addEventListener triggers, but not removeEventListener), since the left/right keys are used by the tutorial to switch between pages. But in any case, replicating this issue is a pain since it requires a fresh new user and a fresh new workflow every time.

Additional debugging notes:

• Anonymous users don't encounter this error, even though they'll always encounter the Tutorial component.
• Manually opening the Tutorial and then closing again doesn't trigger the error
• When debugging, be careful that you're not using a user account that has already seen the tutorial, or else you'll never be able to replicate the problem. (e.g. don't use zootester1 or zootester2 to test Notes From Nature: Capture the Collections.)

Context & History

Originally discovered by Alisa on 20 Mar on https://www.zooniverse.org/projects/cmnbotany/notes-from-nature-capture-the-collections

See Slack convo: https://zooniverse.slack.com/archives/C06LHUC6R/p1710942747398659

Testing

Tested with macOS + Chrome 122

• On a test project, create a workflow with 1x Text Task, and has a Tutorial.
• As a new user (which has never viewed the workflow before), open the workflow in the PFE classifier.
• Click on the text task. Type in whatever. Press the left/right arrow keys on your keyboard to move the caret/text cursor.
  • Expectation: left/right arrow keys should move the caret/text cursor one space left/right.
  • Actual: the caret/text cursor doesn't move. Other keys work fine, including up/down arrow keys.

Status

Investigation stopped pending additional help.

Low priority; need to see if other volunteers are reporting a similar problem.

Current workaround is to reload the page.