fix: mouse leave does not clear highlight

Author: clovu

packages/listbox/src/listbox.test.tsx

@@ -335,4 +335,18 @@ describe('listbox primitives', () => {
 
     expect(screen.getByRole('listbox', { name: 'External team label' })).toBeTruthy()
   })
+
+  it('clears highlighted option when mouse leaves an option', async () => {
+    const user = userEvent.setup()
+    const { listbox } = renderSingleListbox()
+
+    await user.hover(getOption('Banana'))
+
+    expect(getOption('Banana').getAttribute('data-highlighted')).toBe('')
+    expect(getActiveOption(listbox).textContent).toBe('Banana')
+
+    await user.unhover(getOption('Banana'))
+
+    expect(getOption('Banana').hasAttribute('data-highlighted')).toBeFalsy()
+  })
 })

packages/listbox/src/listbox.tsx

@@ -518,12 +518,18 @@ function useItemBehavior(optionValue: string, disabled: boolean) {
       setActiveValue(optionValue)
   }, [isItemDisabled, optionValue, setActiveValue])
 
+  const handleMouseLeave = useCallback(() => {
+    if (!isItemDisabled && activeValue === optionValue)
+      setActiveValue(null)
+  }, [isItemDisabled, setActiveValue, optionValue, activeValue])
+
   return {
     isHighlighted,
     isItemDisabled,
     isSelected,
     handleMouseMove,
     selectItem,
+    handleMouseLeave,
   }
 }
 
@@ -539,6 +545,7 @@ export function ListboxItem({
   asChild = false,
   onClick,
   onMouseMove,
+  onMouseLeave,
   id: idProp,
   ...props
 }: ItemProps & { ref?: Ref<HTMLDivElement> }) {
@@ -550,6 +557,7 @@ export function ListboxItem({
     isSelected,
     handleMouseMove,
     selectItem,
+    handleMouseLeave,
   } = useItemBehavior(optionValue, disabled)
 
   const itemData = useMemo(() => ({
@@ -572,6 +580,7 @@ export function ListboxItem({
     'aria-disabled': isItemDisabled || undefined,
     'onMouseMove': composeEventHandlers(onMouseMove, handleMouseMove),
     'onClick': composeEventHandlers(onClick, handleClick),
+    'onMouseLeave': composeEventHandlers(onMouseLeave, handleMouseLeave),
     'data-state': isSelected ? 'checked' : 'unchecked',
     'data-highlighted': isHighlighted ? '' : undefined,
     'data-disabled': isItemDisabled ? '' : undefined,