Fixed snackbar console error

[manjeet-wisetr]

Description

Console error when click on snackbar:
react-dom.js?ver=17.0.1:4088 Uncaught TypeError: Cannot read properties of undefined (reading 'current') at dismissMe (components.js)

Screenshots

Types of changes

check added on listRef object in dismissMe function in snackbar component

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @manjeet-wisetr! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[mirka]

Thanks for contributing! The fix looks sensible to me 👍

Before merging, could we:

• fix the linting errors
• add a changelog entry for this bug fix

I think the e2e test failure is a flake... let's see if it goes away on the next run.

[alexstine]

@mirka Just a quick question, is this a side-effect of a bigger problem? Why would this code error out? It's a simple focus. Maybe changing when useEffect fires would be better?

[mirka]

is this a side-effect of a bigger problem?

My read of the problem was that the listRef focus call was added under the assumption that a Snackbar would always be rendered as a child of SnackbarList, which isn't true. So the listRef prop is simply undefined in that case. Do you see deeper problems here? I don't have historical context around this component, but nothing stands out to me in particular (#34736). Suggestions welcome!

[alexstine]

@mirka I don't have historical context around here either. Just wanted to ask to be sure. Focus relates to accessibility and I've got my eye on accessibility going forward to try to prevent regressions.

[mirka]

@alexstine Ah ok thanks, I see your point. This PR does not introduce a regression in that sense, but it doesn't solve the focus restoration problem either, so I made a new issue for it (#38425).

[Mamaduka]

Suggested change

	if ( listRef && listRef.current ) {
	listRef.current.focus();
	}
	listRef.current?.focus();

suggestion (non-blocking): We could use "Optional chaining" here.

[manjeet-wisetr]

yes but apply optional chaining from listRef

[Mamaduka]

Thank works as well.

Only the changelog entry is missing, and we can merge this PR.

[manjeet-wisetr]

changelog entry added

[manjeet-wisetr]

#39693

[Mamaduka]

Thank you. Since the changelog is related to this change, I think it should be part of this PR.

Sorry, I probably should've mentioned this initially.

[Mamaduka]

Hi, @manjeet-wisetr

Can you consolidate the changelog commit with this PR?

[t-hamano]

Hi @manjeet-wisetr,

The Snackbar component has been migrated to Typescript by #45472. At the same time, it appears that changes similar to this PR were made. Therefore, I would like to close this PR.

Thank you for your contribution!