Composite: two-dimensional arrow navigation with MenuButtons

[oandregal]

Updated Stackblitz repro: https://stackblitz.com/edit/vitejs-vite-p27qhy?file=src%2FApp.tsx&terminal=dev

Motivation

I'm trying to use Composite in WordPress/Gutenberg to create a two-dimensional arrow navigation experience. This is the PR where I'm working on it.

I'm having trouble making it work when it contains MenuButtons. This is a Stackblitz (outdated) demonstrating how the interaction doesn't work as expected:

Usage example

      <Ariakit.CompositeProvider>
        <Ariakit.Composite>
          <Ariakit.CompositeRow>
            <Ariakit.CompositeItem render={<button>Button</button>} />

            <Ariakit.CompositeItem
              render={
                <Ariakit.MenuProvider>
                  <Ariakit.MenuButton>Menu</Ariakit.MenuButton>{' '}
                  <Ariakit.Menu>
                    <Ariakit.MenuItem>Hello</Ariakit.MenuItem>
                  </Ariakit.Menu>
                </Ariakit.MenuProvider>
              }
            />

            <Ariakit.CompositeItem render={<button>Button</button>} />
          </Ariakit.CompositeRow>

          <Ariakit.CompositeRow>
            <Ariakit.CompositeItem render={<button>Button</button>} />

            <Ariakit.CompositeItem
              render={
                <Ariakit.MenuProvider>
                  <Ariakit.MenuButton>Menu</Ariakit.MenuButton>{' '}
                  <Ariakit.Menu>
                    <Ariakit.MenuItem>Hello</Ariakit.MenuItem>
                  </Ariakit.Menu>
                </Ariakit.MenuProvider>
              }
            />

            <Ariakit.CompositeItem render={<button>Button</button>} />
          </Ariakit.CompositeRow>
        </Ariakit.Composite>
      </Ariakit.CompositeProvider>

I'm not sure if I'm missing something or it just doesn't work with MenuButtons.

[DaniGuardiola]

@diegohaz I want to contribute a fix to this, if that's what makes sense to do. One observation here:

There are some tricky interaction conflicts. For example, pressing arrow down opens a menu, but in a 2d composite it moves focus to the item below. I'm not sure how this should be handled.

[oandregal]

In the example I shared, the menus are not reachable via arrow keys:

Gravacao.do.ecra.2024-05-06.as.13.34.49.mov

[DaniGuardiola]

@oandregal I have added an updated repro to the description, as yours wasn't entirely correct (the element that the composite item needs to be "merged" with is MenuButton, not MenuProvider). Still doesn't work though!

I added two examples: CompositeItem rendered as MenuButton and the reverse case.

[DaniGuardiola]

Digging deeper into this, it seems like this is a symptom of the composite item that's merged with the menu button not being registered in the composite collection store. Still trying to find the reason for this though.

[diegohaz]

Try to pass the store directly to CompositeItem instead of relying on CompositeProvider.

[DaniGuardiola]

Isn't this somewhat similar to what @jjenzz has discussed multiple times in the context of Radix UI primitives regarding context scoping? @diegohaz

[diegohaz]

We have scoping on most components. We just don't check it on CompositeItem because it's too low level and most of the time people use it with the composite store directly rather than CompositeProvider.

[DaniGuardiola]

The workaround of passing the store explicitly does indeed work: https://stackblitz.com/edit/vitejs-vite-kw6x9j?file=src%2FApp.tsx

One important detail is that the "topmost" component should be the CompositeItem (e.g. <CompositeItem render={<MenuButton />}), so that the CompositeItem has precedence in interactions like arrow down. See this demo (same sandbox I just linked) where only the middle row one is like this and properly works.

Kapture.2024-05-07.at.12.35.29.mp4

@diegohaz I feel like scoping should work here too, this is a valid use case and this behavior was unexpected. Do you agree, and if so, can you point me to an example of how it is implemented so I can contribute it for CompositeItem?

[diegohaz]

@DaniGuardiola Sure, I think this should be fixed in CompositeItem. Usually, using useCompositeProviderContext instead of just useCompositeContext is enough. I don't have my computer right now, but I believe MenuButton implements this.