Add prop to autocomplete to place labels below or above input

components/autocomplete/Autocomplete.jsx

@@ -11,10 +11,16 @@ const POSITION = {
  UP: 'up'
 };
 
+const SELECTEDPOSITION = {
+  ABOVE: 'above',
+  BELOW: 'below'
+};
+
 class Autocomplete extends React.Component {
  static propTypes = {
    className: React.PropTypes.string,
    direction: React.PropTypes.oneOf(['auto', 'up', 'down']),
+   selectedPosition: React.PropTypes.oneOf(['above', 'below']),
    disabled: React.PropTypes.bool,
    error: React.PropTypes.string,
    label: React.PropTypes.string,
@@ -27,6 +33,7 @@ class Autocomplete extends React.Component {
  static defaultProps = {
    className: '',
    direction: 'auto',
+   selectedPosition: 'above',
    multiple: true,
    source: {}
  };
@@ -39,7 +46,7 @@ class Autocomplete extends React.Component {
 
  componentWillReceiveProps (nextProps) {
    if (!this.props.multiple) {
-     this.setState({query: this.query(nextProps.value)});
+     this.setState({query: nextProps.value});
    }
  }
 
@@ -187,7 +194,7 @@ class Autocomplete extends React.Component {
 
    return (
      <div data-react-toolbox='autocomplete' className={className}>
-       {this.renderSelected()}
+       {this.props.selectedPosition === 'above' ? this.renderSelected() : null}
        <Input
          {...other}
          ref='input'
@@ -201,6 +208,7 @@ class Autocomplete extends React.Component {
          value={this.state.query}
        />
        {this.renderSuggestions()}
+       {this.props.selectedPosition === 'below' ? this.renderSelected() : null}
      </div>
    );
  }

components/autocomplete/readme.md

@@ -26,6 +26,7 @@ class AutocompleteTest extends React.Component {
     return (
       <Autocomplete
         direction="down"
+        selectedPosition="above"
         label="Choose countries"
         onChange={this.handleChange}
         source={source}
@@ -42,6 +43,7 @@ class AutocompleteTest extends React.Component {
 |:-----|:-----|:-----|:-----|
 | `className`     | `String`      | `''`            | Sets a class to style of the Component.|
 | `direction`    | `String`       |  `auto`        | Determines the opening direction. It can be `auto`, `top` or `bottom`. |
+| `selectedPosition`    | `String`       |  `above`        | Determines if the selected list is shown above or below input. It can be `above` or `below`. |
 | `disabled`      | `Bool`        |  `false`         | If true, component will be disabled.|
 | `error`         | `String`      |         | Sets the error string for the internal input element.|
 | `label`         | `String`      |         | The text string to use for the floating label element.|

react-toolbox.d.ts

@@ -168,7 +168,7 @@ declare namespace __RT {
          */
         multiple?: boolean,
         /**
-         * 	Object of key/values or array representing all items suggested.
+         *  Object of key/values or array representing all items suggested.
          */
         source: Object | Array<any>,
         /**
@@ -177,7 +177,7 @@ declare namespace __RT {
          */
         type?: string,
         /**
-         * 	Value or array of values currently selected component.Current value of the input element.
+         *  Value or array of values currently selected component.Current value of the input element.
          */
         value?: string | Array<any>,
     }