[Bug]: Menu component does not protect access to refs in focusItem

[Kilian-Collender]

Package

@carbon/react

Browser

Chrome

Package version

v1.49.0

React version

v18.2.0

Description

In the findIndex function here

carbon/packages/react/src/components/Menu/Menu.tsx

Line 237 in e70f08d

item.ref.current.contains(document.activeElement)

It tries to use contains against the current ref value without checking that the ref value is not null.

During our automations this is throwing the following error Cannot read properties of null (reading 'contains') as item.ref.current is null .

This requires just a simple check to ensure that the value is not null before calling contains

Reproduction/example

NA

Steps to reproduce

Hard to reproduce consistently manually as it only really happens when the interaction is very fast, but it has been possible to see this consistently in automations.

The key part to the issue is that the submenu items are being created in async manner, so the refs are not being maintained.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

The key part to the issue is that the submenu items are being created in async manner, so the refs are not being maintained.

Short of fixing that issue we could at least avoid the error with some optional chaining.

[Kilian-Collender]

I'm happy to add the optional chaining @tay1orjones