Grid layout for the ComboBox list

[fregante]

Is it possible to place the items of a ComboBox in a grid instead of the standard list?

I'm trying to build an icon picker but the icons are displayed in a list, which isn't great. Current code:

      <ComboBox defaultItems={iconOptions}>
        {(item) => 
          <Item>
            <Icon
              icon={item.value.id}
              size={32}
            />
          </Item>
        }
      </ComboBox>

[snowystinger]

They should probably have their name next to them as text to make it more accessible, in which case, a list makes sense.
Otherwise, it's difficult to tell what part of what you typed has matched the currently displayed icons, especially if it's a fuzzy match.

[LFDanLu]

+1 to what @snowystinger said above. That being said, the grid popup case exists in the WAI-ARIA 1.2 combobox examples but that interaction pattern isn't supported by our combobox hooks. You'd have to modify the keyboard event handlers in those hooks and support a grid popover instead of using a listbox

[snowystinger]

I'm not sure that's a great experience, arrow key navigation becomes unreliable/unpredictable. Should left and right arrows navigate the grid cells? or should they move in the input?
I did not try that with VO, I'm not sure what it would say if it's updating both the cell and the cursor location at the same time.