ActionMenu: Page scrolls when moving focus to first item

[siddharthkp]

Steps to reproduce:

1. Open an ActionMenu with click (not keyboard). Focus will stay on the anchor.
2. Press ArrowDown to move focus from anchor to first item

This also fires page scroll event

In docs,

Screen.Recording.2022-08-19.at.9.27.13.AM.mov

In memex,

menu-scroll-key.mov

Impact:

Low, tiny annoyance for users that use both mouse and keyboard in the menu

Solution:

We might need to prevent the scroll event when moving focus for the first time in useMoveFocusToMenuItem

[Shubhambawner]

Hello @siddharthkp @colebemis ,
may I work on this issue ?

[siddharthkp]

Sure, go for it! :)

[Shubhambawner]

Hello, can you please help me in setting p the project locally?
I forked repo, then cloned the fork locally, and then ran the script npm run setup as described in here
attaching the screenshot here:

I cleaned the whole repo and re cloned it again, but the same thing repeats, if possible, please provide any setup guidelines for locally setting up the repo.

I am having node v16 as described, npm v8.5.0

[siddharthkp]

Hi!

script/setup is a bash script. You have to make sure the terminal you are using supports bash.

I'm not on windows so I'm not able to recommend you one that's good. microsoft/windows terminal might be a good one?

[Shubhambawner]

I am using terminal that comes integrated with VS Code IDE, I tried windows command prompt, PowerShell and PowerShell as admin.

[siddharthkp]

That's a shame, are you able to run the commands inside the script individually?

# Install dependencies
npm install

# Build
npm run build

# Install docs dependencies
pushd docs
npm install --legacy-peer-deps
popd

[Shubhambawner]

I tried that too at the very beginning, but after running each script manually the start command gives error:

as it seems to be a gatsby error, here is some more info:

docs@1.0.0 gatsby
gatsby "info"

System:
OS: Windows 10 10.0.19043
CPU: (4) x64 Intel(R) Core(TM) i3-10110U CPU @ 2.10GHz
Binaries:
Node: 16.14.2 - D:\program_files\nodeJS\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.5.0 - D:\program_files\nodeJS\npm.CMD
Languages:
Python: 3.9.5 - D:\program_files\python\python.EXE
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.63)
npmPackages:
gatsby: ^3.7.2 => 3.7.2
gatsby-plugin-alias-imports: ^1.0.5 => 1.0.5
gatsby-plugin-typescript: 2.10.0 => 2.10.0

[siddharthkp]

Ah right, same story after installation as well. We haven't tested this on windows at all to know all the breaking points, so I don't know how to help you here 😢

@colebemis any ideas?

[Shubhambawner]

I m really not able to figure out the setup for windows, shall we put it on discussion ?
Does the development of all repositories at primer completely happen in Linux/Unix environment ?

[siddharthkp]

I m really not able to figure out the setup for windows, shall we put it on discussion

Yep, good call!

Does the development of all repositories at primer completely happen in Linux/Unix environment ?

It does. I know some folks use codespaces instead of a local clone, that should work for you as well