Input field overrides className parameter - but only sometimes

[viridia]

I'm passing a 'className' attribute to the Autosuggest widget so that I can customize the width, but I see odd behavior when I do this. First, here's how I am calling it:

      <Autosuggest
          className={className}
          placeholder={placeholder}
          datalist={this.state.datalist}
          datalistOnly
          datalistPartial
          onSearch={this.onSearch}
          itemReactKeyPropName="username"
          itemSortKeyPropName="username"
          itemValuePropName="label" />

Also, I have set up my search callback to return no results if the input string is <2 characters. Given that, here's what I see:

• widget initially renders as I would expect, with my class names and width.
• as soon as I type 2 characters, there are matches, so the toggle widget appears and the dropdown menu appears showing the matches. However, it no longer recognizes the className attribute that I passed in, and instead uses its built-in class names, causing the input text field to become very wide.
• I hit backspace twice to clear out the field. The dropdown menu goes away but the toggle button is still there, which is not what I would have expected. The control is still using its built-in styles.
• I click on the toggle button (which has no entries). The toggle button disappears! And the widget reverts to using the className attribute that I passed in, which means it once again has its normal width.

[trevorr]

The className property of the Autosuggest component is applied (somewhat arbitrarily) to the input element (as opposed to the top-level div). Is that what you're expecting? Depending on settings like whether the toggle is visible (which controls whether an input group div wraps the input element), you'll have a variable number of divs wrapping the input. As in #4, you can force the presence of the input group regardless of the toggle visibility by using a setting such as bsSize.

Since CSS doesn't have parent selectors, it might be better (and more intuitive) if I moved the className usage to the (unconditionally rendered) top-level div. It's a breaking change, but I doubt it would affect anyone at this point. Let me know if you think this will help.