ListBoxItem - Adding `onFocusChange`

[mJarsater]

Provide a general summary of the feature here

We are rendering a Tooltip for ListBoxItem if it is truncated. And we want to show it when it is either hovered or focused. But it seems like the ListBoxItem is currently missing a onFocusChange event to know whether or not it is in focus.

🤔 Expected Behavior?

API example:

<ListBoxItem onFocusChange={(isFocused) => doSomething(isFocused)} />

😯 Current Behavior

Currently no event do detect a focus change is exported.

💁 Possible Solution

No response

🔦 Context

<AriaListBoxItem
  onHoverChange={() => evaluateTruncation()}
>
  {item => ( 
      <Tooltip_Default
        triggerRef={objectRef}
        isOpen={isTruncate && (item.isHovered || item.isFocused)}
      >
         <Text_Block slot="label" isTruncated ref={textRef}>
            {typeof children === 'function' ? children(item) : children}
          </Text_Block>
         
      </Tooltip_Default>
  )}
</AriaListBoxItem>

This is a rough draft of what are working with today. We'd like to be able to do:

<AriaListBoxItem
  onHoverChange={() => evaluateTruncation()}
  onFocusChange={() => evaluateTruncation()}
>
  {item => ( 
      <Tooltip_Default
        triggerRef={objectRef}
        isOpen={isTruncate && (item.isHovered || item.isFocused)}
      >
         <Text_Block slot="label" isTruncated ref={textRef}>
            {typeof children === 'function' ? children(item) : children}
          </Text_Block>
         
      </Tooltip_Default>
  )}
</AriaListBoxItem>

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Just adding onFocusChange wouldn't handle this.

Work to support Tooltips in Collections is under discussion here #7289.

For now, you can display the truncated name by instead wrapping, or using a gridlist layout with a button that shows the full name in a popover, or using selection/actions to open a panel displaying the name/metadata

[mJarsater]

@snowystinger thanks I have a solution in place where I evaluate if the SelectorItem is truncated in a custom hook. Just wanted to highlight that I think this should be a feature in the Item. Eventhough Tooltips might work out of the box in the Item in the future I still think some sort of event for focus would be great.