fix(Menu,Listbox): prevent data-highlighted flash on mount (#2651)

benjamincanac · web-flow · commit 333707d0a2d6 · 2026-05-22T12:40:51.000+08:00
Both `MenuItemImpl` and `ListboxItem` compared `currentElement` against
`highlightedElement` without guarding for `undefined`, so every item
matched (`undefined === undefined`) until template refs resolved.
diff --git a/packages/core/src/Listbox/ListboxItem.vue b/packages/core/src/Listbox/ListboxItem.vue
@@ -44,7 +44,7 @@ const { CollectionItem } = useCollection()
 const { forwardRef, currentElement } = useForwardExpose()
 const rootContext = injectListboxRootContext()
 
-const isHighlighted = computed(() => currentElement.value === rootContext.highlightedElement.value)
+const isHighlighted = computed(() => currentElement.value != null && currentElement.value === rootContext.highlightedElement.value)
 const isSelected = computed(() => valueComparator(rootContext.modelValue.value, props.value, rootContext.by))
 
 const disabled = computed(() => rootContext.disabled.value || props.disabled)
diff --git a/packages/core/src/Menu/MenuItemImpl.vue b/packages/core/src/Menu/MenuItemImpl.vue
@@ -33,7 +33,7 @@ const { forwardRef, currentElement } = useForwardExpose()
 const { CollectionItem } = useCollection()
 
 const isFocused = ref(false)
-const isHighlighted = computed(() => isFocused.value || (contentContext.highlightedElement.value === currentElement.value))
+const isHighlighted = computed(() => isFocused.value || (currentElement.value != null && contentContext.highlightedElement.value === currentElement.value))
 
 async function handlePointerMove(event: PointerEvent) {
   if (event.defaultPrevented || !isMouseEvent(event))
