Correct way to handle onClick in Toolbar?

[coryvirok]

While using the Toolbar component, I'd like to handle Toolbar.GroupItem and Toolbar.Button click's directly instead of having to jump through hoops while using onValueChanged or binding to value. However when I delegate rendering in the GroupItem or Button, I no longer get keyboard events being handled.

E.g. This example will allow me to handle on:click but I lose the ability to cycle through the toolbar items using the left and right arrow keys.

<Toolbar.Root>
  <Toolbar.Group value={val} type="multiple">
    <Toolbar.GroupItem let:builder asChild aria-label="toggle foo" value="foo">
      <button {...builder} on:click={handleFooClick}>
        click me
      </button>
    </Toolbar.GroupItem>
  </Toolbar.Group>

  <Toolbar.Button let:builder asChild>
    <button {...builder}>
      or click me
    </button>
  </Toolbar.Button>
</Toolbar.Root>

Side note: It would be much much nicer if the Toolbar allowed overidding on:click handlers directly instead of using render delegation. Without this, the only 2 options are to use render delegation like I'm doing above, but that breaks most of the toolbar's keyboard functionality. Or, write complex code to handle toolbar item clicks via the GroupItem's onValueChanged callback. This last option is ok if type="single", but for type="multiple", it becomes difficult.

Also, how do you handle clicks for Toolbar.Button?

[coryvirok]

Oh... I think I understand half my question now. For the Toolbar.Button, the piece I was missing was use:builder.action on the button.

If I add use:builder.action on the button in Toolbar.GroupItem, I can handle a direct click, and the keyboard arrows allow me to cycle through toolbar options, however pressing space-bar on my button doesn't trigger the on:click handler.