Labels in control are hidden when Select used within an expander (collapsed) with a defaultValue.

[alturium]

Description

1. If Select component is wrapped in an expander (or collapse-like component), and a default value is set, and the expander is closed upon initial creation, then the value is not shown in the control because of the WrappedComponent has inserted a <div> with a width of 0 (width: 0px).
2. After toggling expander to open (see below), the value is in the control but is not shown because the CSS property ‘width’ is 0px.
3. It not possible to recover from this state by attempting to reselect items, or by clearing items in control.

Expected Behavior
There should a label in the control, but instead it is effectively hidden by a width: 0px from a wrapping <div>.

There is a similar issue: ‘Default selected items don't appear when using transitions if select is hidden #3029’. The discussion in #3029 seems to indicate that the issue has to do with the Collapse component, which stores a ‘width’ in its state (initially set to ‘auto’), but appears it does not get re-computed.

Sandbox
https://codesandbox.io/s/jz4112nvyw

Screenshot

[gwyneplaine]

@alturium thanks for this issue.
Is there any reason why you're leveraging display: "none" to hide/show children?
Generally speaking something like the pattern in the sandbox below is preferable in react
https://codesandbox.io/s/188ly2543

The reason this is happening is because Collapse uses the width of the DOM node to manage transition animations. since the is using display:none to hide its children, when measurement happens the width of the element is 0. At the moment I can't think of a simple fix for this within Collapse that wouldn't also compromise its existing functionality.

Happy to discuss this further If you do feel strongly about the pattern in your sandbox. Even better, if you have an idea of how to go about resolving the issue, a PR is always greatly appreciated :D

[alturium]

The example used Expander but in actuality I was using Collapse from the reactstrap library (not to be confused with the Collapse component in react-select, and discussed below) . So I don't have control over the component. But I was able to modify the Expander to accomplish the same purpose and it works! Thanks @gwyneplaine

Luckily, I was able to substitute my version of Collapse and that probably meets 99% use cases. However, there may be situations where Select is buried in a hierarchy of react components and one cannot substitute the container or parent. So this issue still remains.

In thinking about it, I can see that the react's DOM is created, and the width computed at that point in time as 0 (zero). Changing props or states themselves do not cause the re-calculation of width in Collapse (Select version), so there seems to be no way to cause the re-calculation of 'width'. This might be due to Collapse storing 'width' as a state variable and to the way or manner that React works in creating its DOM.

So essentially we are working around a React limitation, using the most essential line below, to force a re-evaluation of the react DOM tree:
{expanded && ( <div style={contentStyle}>{this.props.children}</div> )}

It may still be possible to re-write the react-select Collapse component to not store width as a state variable. This kinda has code smell since there is no provision of updating it and widths do change and assuming that width doesn't change may not be correct.

Does this sound correct?

[geochanto]

Running into the same issue. Tried the top answer here, didn't work: facebook/react#4101

I'm trying to use value instead of defaultValue, but that doesn't seem to be working either.

If I start with the open state for , defaultValue populates. But if it starts collapsed, defaultValue doesn't populate when the state is toggled on, even though I can see the defaultValue prop is passed down to react-select.

UPDATE:
Seems I found the culprit for my case. the defaultValue was actually there, but it was hidden by label having zero width via inline CSS. It seems that this was caused by using the makeAnimated component. After removing it, CSS width is back to normal and default label shows up.

[muserrefakillibaykus]

Is this bug fixed? @bladey @alturium

[arejaycola]

Thank you @geochanto! This saved me a lot of time. I guess I will just go without animation until this issue is resolved.

[ebonow]

@alturium @muserrefakillibaykus

I have not been able to reproduce this even in the sandbox link provided. I am uncertain what if anything has changed, but if someone can replicate this issue please provide some more information so we can reproduce the described error, reopen this issue and further troubleshoot.

In the meanwhile given that I am unable to replicate it, I will close it for time being.