useCombobox focus-ring during keyboard navigation

[jonas kristoffersen]

• downshift version: 8.4.0
• node version: @nrwl/node: 15.6.3
• npm (or yarn) version: npm: 10.2.0

Using the useCombobox hook.

What you did:
I tried navigating the combobox using only keyboard navigation.

What happened:
I expected focus-rings as are usual for keyboard navigation. I've searched issues, and google in general to find how focus-rings are implemented in downshift, but cant find any sources or documentation about this.

Hover and highlight are already covered well, but wonder if theres any support for just keyboard navigation, where it's common to highlight the focused element more boldly and distinctly for those who have bad vision.

Suggested solution:
Setting some property on the currently keyboard-focused element that can selected in css and styled.

[Nakul Nagariya]

you can use something like this:
js:

<li
                    {...getItemProps({
                      item,
                      index,
                      ...rest,
                    })}
                    className={cn(
                      highlightedIndexItem === index &&
                        item?.disabled !== true &&
                        getBlocksWith("__option-list-item--highlighted"),
                    )}
                  >

scss:

&--highlighted {
        // Goal is to provide a pseudo-focus style when user navigates through menu items via keyboard
        // and a hover style when navigating with a pointer device like a mouse

        &:last-child {
          color: $highlight-color;
          border-block: rem(1) solid $highlight-color;

          &:hover {
            @include standard-hover-visual-styles;

            border-block: none;
          }
        }
      }

[jonas kristoffersen]

Good suggestion, but unfortunately wont work in my case.

In my dropdown menu i have divs that are not items, these sit between items and show text to explain what each "section" of items contains.

For example:

Fruits
1. Apple
2. Banana
3. Kiwi
Vegetables
4. Cabbage
5. Carrot
6. Potato 

Downshift doesent remove highlight when you move your mouse outside the item, only when the cursor leaves the menu entirely or a new item is being hovered.

If i went with this solution, hovering an item, and then moving the cursor to the non-item's in the menu would mistakenly add focus ring to the previously hovered item without ever having used the keyboard.

[Silviu Alexandru Avram]

You can add a onMouseMove event on the Fruits and Vegetables elements and use setHighlightedIndex(-1), which you also get from Downshift. Does it work for you? Feel free to re-open this if you need further guidance. Thank you!