React-select: Dropdown doesn't collapse on outside click

[mohuace]

Sample Code
This is the code I am trying to implement. Inside handleChange function, I have written the logic for one of the group having single select functionality and other groups having multiselect functionality.
I am using the Control component where I have the logic written to implement the tooltip for the dropdown control.

When I try to click outside the dropdown, the menu doesn't collapse. Also If I comment out the logic inside handleChange function, the dropdown seems to be working fine.
Could anyone please help me with this.

[ebonow]

Confirmed. The example did not respond to outside clicks, but it does respond to clicking the dropdown indicator.

The only way I was able to get the behavior to act normally and as expected was by removing the custom Control, but creating other custom components to wrap in a Tooltip (or even without the Tooltip) gave the same unexpected behavior.

[Rall3n]

@mohuace You have to move your Control and MultiValueContainer components out of the render function.
It is generally bad practice to declare components in your component-render-function.

const Control = () => {}

const MultiValueContainer = () => {}

const App = () => {
    /* No components in render method, no problem */

    /* ... */
    <Select components={{ Control, MultiValueContainer }} />
    /* ... */
}

Having it inside the component causes it to be re-declared on every render, which in response will trigger a re-render of the whole Select component tree, re-mounting the Input component and breaking current focus handling i.e. the ability to close the menu when clicking outside.

[ebonow]

Thank you so so much @Rall3n !

I have come across other side effects (like Input losing focus) because my custom Select component includes the declaration of my other custom components (such as my Input). I have some code to clean up.

[mohuace]

Thanks for the help guys, appreciate it!