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

Dropdown keyboard navigation doesn't scroll items into view #8724

Closed
1 task done
microbit-matt-hillsdon opened this issue Jan 8, 2025 · 0 comments · Fixed by #8726
Closed
1 task done

Dropdown keyboard navigation doesn't scroll items into view #8724

microbit-matt-hillsdon opened this issue Jan 8, 2025 · 0 comments · Fixed by #8726
Assignees
Labels
issue: bug Describes why the code or behaviour is wrong

Comments

@microbit-matt-hillsdon
Copy link

microbit-matt-hillsdon commented Jan 8, 2025

Check for duplicates

  • I have searched for similar issues before opening a new one.

Description

Dropdown fields have working keyboard navigation but they don't seem to scroll the item into view which is problematic with long lists of items. MakeCode has these e.g. for melodies:

Image

We've reproduced this on master of Blockly using variables but it applies to dropdowns in general.

Reproduction steps

  1. Create a lot of variables or load the JSON snippet below into the playground.
  2. Drag in a set variable block
  3. Click to open the dropdown
  4. Use ArrowDown to move through the list
  5. Note that when you get to an item that's out of view it isn't scrolled into view

The code appears to be trying to do this but it doesn't work for some reason.

{
  "blocks": {
    "languageVersion": 0,
    "blocks": [
      {
        "type": "variables_set",
        "id": "nX?W]mgDHPVMxu+w(~py",
        "x": 213,
        "y": 88,
        "fields": {
          "VAR": {
            "id": "A6!zejC}ER8q*eY^:b?,"
          }
        }
      }
    ]
  },
  "variables": [
    {
      "name": "a",
      "id": "A6!zejC}ER8q*eY^:b?,"
    },
    {
      "name": "b",
      "id": "~}o_i~=qGKzx`SfAlX|o"
    },
    {
      "name": "c",
      "id": "B=XJ9h}suaJn62Z@0vDD"
    },
    {
      "name": "d",
      "id": "]fPaLcqT$5t*?W~{S5-t"
    },
    {
      "name": "e",
      "id": "zRku(0;YVou$14|FDmls"
    },
    {
      "name": "f",
      "id": "en1NVptvE5Vzp%]d~S(v"
    },
    {
      "name": "g",
      "id": "$r7R@6Ud`3.P#5awIqYP"
    },
    {
      "name": "h",
      "id": "K,5Kh9UG|5ZZ:drSbJr?"
    },
    {
      "name": "i",
      "id": "pQB$Z]o_DUM|?B_][Mw8"
    },
    {
      "name": "j",
      "id": "oj/^Wf!w7UkoSHNK~Z3F"
    },
    {
      "name": "k",
      "id": "5h/vTKk_]3=.%9})uSQ{"
    },
    {
      "name": "l",
      "id": "8EGw8x]ufNoS@%gVLMio"
    }
  ]
}

Stack trace

Screenshots

Out of view selection:

Image

Browsers

Chrome desktop

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue: bug Describes why the code or behaviour is wrong
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants