using custom components when isMulti and !closeMenuOnSelect click outside do not close menu

Summary

I'm using react-select version 3.1.0. When I use a custom ValueContainer and closeMenuOnSelect={false}, the menu doesn't close when you click outside the menu.

Details

When I first open the menu and click away, the menu closes. After I select items and click away, the menu doesn't close. If I then unselect items, the menu still doesn't close when I click away. I checked out issue 2810 from v2, but I am defining the custom component outside of the render and it doesn't solve the problem.

Code

const ValueContainer = ({ children, ...props }) => {
  const { getValue, hasValue, isMulti, selectProps: { placeholder } } = props;
  const numberOfValues = getValue().length;
  if (!hasValue || !isMulti) {
    return (
      <components.ValueContainer {...props}>
        {children}
      </components.ValueContainer>
    );
  }
  return (
    <components.ValueContainer {...props}>
      {`${numberOfValues} ${placeholder}`}
    </components.ValueContainer>
  );
};

const Select = (props) => {
  return (
    <span>
      <ReactSelect
        {...props}
        components={{
          ValueContainer
        }}
        closeMenuOnSelect={true}
        isMulti={true}
      />
    </span>
  );
};

Looks like it's working as expected now. I must have tweaked something that got it working ¯_(ツ)_/¯

We are running in exactly the same problem. Any chance that you share your latest code?

@chkal

@chkal I'm really not sure what changed, but I hope this helps! I confirmed that it's still working.

const Select = (props) => {
  const { isMulti, options, placeholder, onMenuClose, isClearable, value, getOptionLabel, getOptionValue, onChange } = props;
  return (
    <span>
      <ReactSelect
        options={options}
        placeholder={placeholder}
        isMulti={isMulti}
        onMenuClose={onMenuClose}
        isClearable={isClearable}
        value={value}
        getOptionValue={getOptionValue}
        getOptionLabel={getOptionLabel}
        onChange={onChange}
        components={{
          ValueContainer,
          Option,
        }}
        closeMenuOnSelect={!isMulti}
        hideSelectedOptions={!isMulti}
        styles={styles}
        {...props}
      />
    </span>
  );
};

Value container:

const ValueContainer = ({ children, ...props }) => {
  const { getValue, hasValue, isMulti, selectProps: { placeholder, inputValue } } = props;
  const numberOfValues = getValue().length;
  if (!hasValue || !isMulti) {
    return (
      <components.ValueContainer {...props}>
        {children}
      </components.ValueContainer>
    );
  }
  return (
    <components.ValueContainer {...props}>
      {
        !inputValue &&
        <components.Placeholder {...props}>{`${numberOfValues} ${placeholder}`}</components.Placeholder>
      }
      {children[1]}
    </components.ValueContainer>
  );
};

@taylorstyers Thanks a lot for sharing your code.

In the meantime we also fixed the issue by adding {children[1]} as the last child of <components.ValueContainer ...>.

Thanks a lot! 🍻

I am facing the same issue, do you know how did you fix it?

@mohuace

@mohuace I posted my updated code above, which is still working. Plus @chkal said how they fixed it. ¯_(ツ)_/¯

Hey, could you guys have a look at this once [https://codesandbox.io/s/react-codesandboxer-example-forked-0kykq?file=/example.js]
Inside handleChange function, I have implemented the logic for the dropdown...having a single select functionality for one of the groups and a multiselect for other groups. I have also added the component Control which is written to provide a tooltip functionality to the dropdown.
In this scenario, I am facing the same issue i.e. when I click outside the dropdown, it doesn't collapse. But when I remove the handleChange function all together, the dropdown seems to be working fine.
Any thoughts on this?
Appreciate your help!

I experimented a bit with your sample. Just move your custom components out of the App component. This should fix this issue.

https://codesandbox.io/s/react-codesandboxer-example-forked-m05z9?file=/example.js

Not completely sure why this happens. But if you declare the custom components inside another component, you will get new components on each render, which is most likely a bad idea. :-)

@chkal

Ohh, I see. Thanks a lot @chkal , this was really helpful!

That requirement to add {children[1]} was so tricky to find. Is it even documented?

@Dror-Bar

@Dror-Bar I don't think that this is part of the "public API" to be honest.

I experimented a bit with your sample. Just move your custom components out of the App component. This should fix this issue.

https://codesandbox.io/s/react-codesandboxer-example-forked-m05z9?file=/example.js

Not completely sure why this happens. But if you declare the custom components inside another component, you will get new components on each render, which is most likely a bad idea. :-)

You can't create a component within a functional component.

This 2-minute article explains why:
https://dev.to/borasvm/react-create-component-inside-a-component-456b#:~:text=So%20the%20take%20away%20%2D%20NEVER,COMPONENT%20INSIDE%20ANOTHER%20FUNCTION%20COMPONENT.&text=Functions%20are%20not%20part%20of,called%20when%20component%20re%2Drender.

This has come up in several times and is an easy mistake to make, and thought it might be worth mentioning that the following section was added to the documentation as part of the v3.2 release.

https://react-select.com/components#defining-components

Today i have come across with this issue and i resolved it by moving my custom components outside of React functional component, Basically you can't define functional component within another functional component because it cause re renders and it will not close the dropdown

Navigation Menu

Repository navigation

using custom components when isMulti and !closeMenuOnSelect click outside do not close menu #4170

Summary

Details

Code

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

using custom components when isMulti and !closeMenuOnSelect click outside do not close menu #4170

Description

Summary

Details

Code

Activity

taylorgannon commented on Aug 20, 2020

chkal commented on Aug 28, 2020

taylorgannon commented on Aug 28, 2020

chkal commented on Aug 28, 2020

mohuace commented on Sep 4, 2020

taylorgannon commented on Sep 4, 2020

mohuace commented on Sep 7, 2020

chkal commented on Sep 8, 2020

mohuace commented on Sep 8, 2020

Dror-Bar commented on Nov 29, 2020

chkal commented on Nov 29, 2020

Falzaro commented on Jan 14, 2021

ebonow commented on Jan 14, 2021

faizantroon commented on Aug 4, 2023

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions