React-bootstrap-typeahead: AsyncTypeahead inside react-bootstrap collapsible panel hides text on first open

[DaveyEdwards]

Version

2.0.0-alpha.5
react-bootstrap version: 0.31.5

Steps to reproduce

Place AsyncTypeahead inside react-bootstrap collapsible panel. On first load when you first open the panel there seems to be something white blocking all the text from displaying (See gif). If you click the typeahead or toggle the collapsible panel again it fixes it. I tried going through all the styles and toggled them on/off without finding anything.

Expected Behavior

You can see the placeholder text on initial open

Actual Behavior

Placeholder text is hidden. I think there is something being pushed over the placeholder.

Any ideas on trying to debug would be great, thanks

[ericgio]

This appears to be a known issue with react-autosize-input. Because the container (collapsed panel) has display: none, the sizer element doesn't properly calculate the width on initial render.

[DaveyEdwards]

My current work around for the typeahdea inside the panel is the following (to give people a sense on nestedness for a specific target)

.panel-collapse > div> div > div > div > div > .rbt > .rbt-input > div  > div > input {
  min-width: 125px
}

[ericgio]

This should be fixed as of v2.5.1. The package now uses its own, stripped-down version of the autosize input.

[luiscmas]

Hi, in current version, Autosize Input seems it's not in the code anymore, is there a way to use this functionality.

Thanks!!!

[ericgio]

@luiscmas: Correct, the autosize component was dropped in favor of flexbox styling. There are no plans to bring the autosize component back. If you need to create a custom input, you can use react-autosize-input and render it in the typeahead using renderInput.