[Autocomplete] Fix keyboard navigation when using custom popover

[sai6855]

fixes: #34998

working proof: https://www.loom.com/share/8641a1e8a33844b0a48bff6e0d392289

Issue: element.offsetTop from below code returns incorrect value if parent element doesn't have relative position . attached some references below on this

material-ui/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js

Lines 376 to 389 in c789ca6

	if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse') {
	const element = option;
	const scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;
	const elementBottom = element.offsetTop + element.offsetHeight;
	if (elementBottom > scrollBottom) {
	listboxNode.scrollTop = elementBottom - listboxNode.clientHeight;
	} else if (
	element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0) <
	listboxNode.scrollTop
	) {
	listboxNode.scrollTop = element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0);
	}
	}

https://stackoverflow.com/questions/29277608/jquery-offset-top-returns-wrong-value-error-with-margin#:~:text=if%20you%20try%20to%20get,will%20get%20a%20wrong%20value.&text=Try%20removing%20the%20margin%2Dtop,will%20see%20it%20will%20work.

https://medium.com/@alexcambose/js-offsettop-property-is-not-great-and-here-is-why-b79842ef7582.

So i've added position relative to parent element and added test.

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-35160--material-ui.netlify.app/

Details of bundle changes

Generated by 🚫 dangerJS against d851146

[michaldudak]

Thanks, at first glance it seems to be working well.

I've got one remark on the test, however. Instead of verifying if a certain CSS property is set, it would be better to test if the selected item is visible (the outcome that's visible to the end-user). You could verify if the scrollTop of the listbox is equal to 0 after performing the steps described in the issue.

[sai6855]

thanks for quick review @michaldudak, updated test case as described

[sai6855]

hi @michaldudak i've updated test as described, also created another PR (#35196) which fixes similar navigation bug. can you review that when you get time

[michaldudak]

All good now. Thanks for your work!

[oliviertassinari]

Oh, nice detail. I have learned something today: the parent offset !== scroll container. I see Joy UI already has this style applied so is not impacted. We could have solved this without CSS: by using .offsetParent and comparing it with the scroll container but it might have been overkill 😁. To consider if this bug gets raised again when using MUI Base directly.