search

bitcoinsearch / bitcoinsearch-app

Search the depths of bitcoin’s technical ecosystem
https://bitcoinsearch.xyz
Apache License 2.0
19 stars 13 forks source link

navigate checkbox with arrows/enter and change search focus on '/' hotkey #21

Closed Emmanuel-Develops closed 1 year ago

Emmanuel-Develops commented 1 year ago

closes #19

netlify[bot] commented 1 year ago

Deploy Preview for bitcoinsearch ready!

Name Link
Latest commit d8af97b9cb7e002f9d15881677a9697cd0e92e7c
Latest deploy log https://app.netlify.com/sites/bitcoinsearch/deploys/63c9d3174091d30009d382c2
Deploy Preview https://deploy-preview-21--bitcoinsearch.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Emmanuel-Develops commented 1 year ago

Due to the new eslint rules, I refactored existing components and renamed others.

adamjonas commented 1 year ago

I would have preferred to break the eslint into another PR. This is now much harder to review.

adamjonas commented 1 year ago

The slash works well but the arrows and enter key have unexpected behaviors.

If I use the arrow key in the text box it toggle between the author and previous prompt.

If I hit return to select a checkbox, return doesn't uncheck it. I need to use space.

https://user-images.githubusercontent.com/755825/213207477-77376762-93be-40de-8b77-6a748703ec63.mov

Emmanuel-Develops commented 1 year ago

The slash works well but the arrows and enter key have unexpected behaviors.

If I use the arrow key in the text box it toggle between the author and previous prompt.

If I hit return to select a checkbox, return doesn't uncheck it. I need to use space.

Screen.Recording.2023-01-18.at.10.07.03.AM.mov

The enter key unchecks the prompt when the toggle is at the previous prompt.

The current styling specificity has "checked" as higher precedence over "navigation" I'll change that.

What do you think about "CMD/CTRL + K" to search? It's a common hotkey for search. Should we add the key binding along with "/"

Emmanuel-Develops commented 1 year ago

https://user-images.githubusercontent.com/62019510/213254898-dd838fa8-8f14-4580-b92e-e3251bf14661.mov

How about this? I restricted the navigation to within options. The filter is focused and active while navigating. Added previous state memory to remember last checked/unchecked option and continue navigating continues from there

adamjonas commented 1 year ago

What do you think about "CMD/CTRL + K" to search? It's a common hotkey for search. Should we add the key binding along with "/"

Sounds good

adamjonas commented 1 year ago

What's the UI to tell people about the shortcuts you are adding?

adamjonas commented 1 year ago

hitting the / not only highlights the input but it writes the slash in the input

adamjonas commented 1 year ago

I can navigate down to the checkboxes but not back up to the input field

https://user-images.githubusercontent.com/755825/213491363-1f510808-4222-4b68-aea8-74d72d273b53.mov

adamjonas commented 1 year ago

Weird behavior when unchecking authors and returning to input box

https://user-images.githubusercontent.com/755825/213492105-312a6086-5925-43f2-8da6-927bec4609c5.mov

Emmanuel-Develops commented 1 year ago

Details

the input field is actively focused and navigation is trapped among the options. You can search at any point during navigation, it will continue from where you stopped typing and filter the options. The up and down has a side-effect that changes the position of the input cursor (from beginning to end of the word). I've fixed that.

Emmanuel-Develops commented 1 year ago

Weird behavior when unchecking authors and returning to input box

Screen.Recording.2023-01-19.at.11.02.26.AM.mov

I can't recreate this on either chrome or safari. What browser was used to create this?

Emmanuel-Develops commented 1 year ago

What's the UI to tell people about the shortcuts you are adding?

seachbar-keyboard-hint

it could be in the red box as

💡: Search with ⌘k or /

adamjonas commented 1 year ago

tACK

If you lose the focus on the facet input box it can get a little funky, but I'm ok with this as a v1.

I'll create an issue on the hotkeys UI

adamjonas commented 1 year ago

In the future, let's not wrap unrelated features together in 1 PR. The eslint formatting additions should have been split out on their own.

Emmanuel-Develops commented 1 year ago

In the future, let's not wrap unrelated features together in 1 PR. The eslint formatting additions should have been split out on their own.

Yes I agree. It was meant to be a smaller fix kinda spiraled out. There would be more segregation going forward