JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.58k stars 4.12k forks source link

onMenu doesn't trigger outside of custom ValueContainer and Options. #4831

Closed gsambrotta closed 3 years ago

gsambrotta commented 3 years ago

Possible bug.

On my select, I use custom ValueContainer(the selected option) because I need to show just an icon, instead of a text. When I click outside of the ValueContainer or of the Options, the menu doesn't close anymore. It seems that it close the first time and then not anymore. I think some props are not properly passed down when I create the custom ValueContainer.

My select code is:

<Select
                isMulti={false}
                isSearchable={false}
                styles={customSelectStyles}
                defaultValue={searchEngineObj}
                options={searchEngines}
                components={{ Option: IconOption, ValueContainer: ContainerIcon }}
                onChange={handleChangeSearch}
              />

My custom ValueContainer

const ContainerIcon = ({ children, ...rest }) => {
    return (
      <ValueContainer  {...rest}>
        <img
          className={styles.selectedIcon}
          src={searchEngineObj.icon}
          style={{ width: 25 }}
          alt={searchEngineObj.label}
        />
        <span className={styles.selectedValue}>{children}</span>
      </ValueContainer>
    )
  }

Is a bug or I missed some steps?

ebonow commented 3 years ago

Greetings @gsambrotta ,

The ValueContainer component is also a container for the Input component. Since, your custom component does not have an Input, the onFocus and onBlur functionality which is used to internally trigger the menu, is unable to fire.

You may want to search on other closed issues regarding custom ValueContainer if you would like to see some examples or further explanation.

I'll close this now as intended behavior, but given that this is a common issue, I will see if there is a place for this either in a common FAQ or within the documentation for the custom component itself.

gsambrotta commented 3 years ago

@ebonow thank you very much. Sorry, not sure why I didn't find the other issues while searching, probably I didn't realize I searched just for open issues. Many thanks :pray:

dvaldivia commented 7 months ago

I couldn't find any other issues where the custom ValueContainer stops triggering menu opening, did you had any luck @gsambrotta ?