How can I customize keyboard event binding?

[Asaki-M]

I use the UncontrolledTreeEnvironment and renderItem, but i lost the keyboard bindings, like Space cannot not expand/collapse. How can I customize keyboard event binding?

This is my renderItem code:

<li {...(context.itemContainerWithChildrenProps as any)}>
  <div {...(context.itemContainerWithoutChildrenProps as any)} style={{ '--depthOffset': `${(depth + 1) * 12}px` }}>
    {arrow}
    <div {...(context.interactiveElementProps as any)}>
      <div className="flex items-center gap-2">
        <div onClick={(e) => e.stopPropagation()}>
          <Checkbox checked={isSelected} onCheckedChange={handleCheckedChange} className="shrink-0" />
        </div>
        {title}
      </div>
    </div>
  </div>
  {children}
</li>;

[lukasbach]

Hi! Some keyboard bindings like space are not specified by RCT as actual keyboard bindings, but the consequence of the browser treating a clickable element as something that will handle space inputs as click events if the element is focused. But since the element that receives context.interactiveElementProps is not actually a clickable element, my guess is that that's the reason that doesn't work. Does it fix it to replace that div element with a button element?