Menu is re-rendering after scrolling the page and trying to click on an option

[Wojtasik]

When using react-select with menuPostion="fixed" I've noticed a strange behaviour when trying to select an option after scrolling down.

The issue can be reproduced in this sandbox: https://codesandbox.io/s/react-codesandboxer-example-mxslt?file=/example.js

Steps:

• click on the select to open the options menu;
• scroll down the page (not the options menu) to the bottom (would be best if the select is no longer visible in the viewport);
• try to select any option that is not highlighted;
• the menu will re-render at different postion.

Is this an expected behaviour?

Here is what I found after digging into the code:

• when user hovers on an option in the menu, onOptionHover gets called

  react-select/packages/react-select/src/Select.js

  Lines 1142 to 1147 in 32ad5c0

  	onOptionHover = (focusedOption: OptionType) => {
  	if (this.blockOptionHover || this.state.focusedOption === focusedOption) {
  	return;
  	}
  	this.setState({ focusedOption });
  	};

  which calls setState;
• because the setState was called the menu is rerendered and freshly calculated offset is applied:

  react-select/packages/react-select/src/components/Menu.js

  Lines 519 to 521 in 32ad5c0

  	const rect = getBoundingClientObj(controlElement);
  	const scrollDistance = isFixed ? 0 : window.pageYOffset;
  	const offset = rect[placement] + scrollDistance;

Thanks,
Patryk.

P.S. Thanks for this awesome library!

[ebonow]

Greetings @Wojtasik and Confirmed.

It appears that scrolling the page while a fixed menu causes the menu position to get lost after an option is hovered. However, I am not certain what the expected/desired behavior is as the menu position is being specified as fixed and the page is being scrolled down.

I will mark this is needs-review as its unclear to me what the expected solution should be.

[Methuselah96]

Hey @Wojtasik! I know it's been a long time, but we're finally looking into old menu positioning issues. Can you help me understand what your use case for using menuPosition="fixed" is? I'm trying to determine in what scenarios someone would use menuPosition="fixed" and expect the position to change.

[Wojtasik]

Hi @Methuselah96 - thanks for getting back to me with this one!

Can you help me understand what your use case for using menuPosition="fixed" is?

I cannot remember the use case exactly, but I think it was related to iPad (tablet) usage.

I'm trying to determine in what scenarios someone would use menuPosition="fixed" and expect the position to change.

Agreed. The bug was about the menu jumping around after user has scrolled down. Just checked and still can see this bug happening in the code sandbox example in the ticket description.

Please let me know if it helps or if I can do anything else to help with this one. Thanks!

[hc0503]

This issue keep be happened yet when I customize Menu component.

<Select
	components={{
		Menu: ({ children, ...rest }) => (
			<components.Menu {...rest}>{children}</components.Menu>
		),
	}}
/>

[vgapchynski]

@devdreamsolution
Try to wrap your Menu render function in React.useCallback, it solved my problem with re-rendering Menu when options array was updated

[hc0503]

I've resolved the issue.
If it's defined the customize component in outside, that doesn't re-render.

const CustomizeMenu = ({children, ...rest}) => (
    <components.Menu {...rest}>{children}</components.Menu>
)

<Select
	components={{
		Menu: CustomizeMenu
	}}
/>