Menu alignment options

README.md

@@ -99,6 +99,7 @@ An example file is included with the NPM module. Simply open `example/index.html
 ### Props
 Name | Type | Default | Description
 -----|------|---------|------------
+align | string | 'justify' | Specify menu alignment. The default value is `justify`, which makes the menu as wide as the input and truncates long values. Specifying `left` or `right` will align the menu to that side and the width will be determined by the length of menu item values.
 allowNew | boolean | false | Allows the creation of new selections on the fly. Note that any new items will be added to the list of selections, but not the list of original options unless handled as such by `Typeahead`'s parent.
 defaultSelected | array | `[]` | Specify any pre-selected options. Use only if you want the component to be uncontrolled.
 disabled | boolean | | Whether to disable the input. Will also disable selections when `multiple={true}`.

css/Typeahead.css

@@ -9,6 +9,10 @@
   outline: none;
 }
 
+.bootstrap-typeahead .dropdown-menu-justify {
+  right: 0;
+}
+
 .bootstrap-typeahead-input-hint {
   color: #aaa;
 }

example/example.js

@@ -37,6 +37,8 @@ const Example = React.createClass({
 
   getInitialState() {
     return {
+      align: 'justify',
+      alignMenu: false,
       allowNew: false,
       customMenuItemChildren: false,
       disabled: false,
@@ -50,6 +52,8 @@ const Example = React.createClass({
 
   render() {
     const {
+      align,
+      alignMenu,
       allowNew,
       customMenuItemChildren,
       disabled,
@@ -78,6 +82,7 @@ const Example = React.createClass({
         <div className="container">
           <Typeahead
             {...props}
+            align={align}
             labelKey="name"
             onChange={(selected) => this.setState({selected})}
             onInputChange={(text) => this.setState({text})}
@@ -123,6 +128,12 @@ const Example = React.createClass({
                 onChange={this._handleChange}>
                 Paginate large data sets
               </Checkbox>
+              <Checkbox
+                checked={alignMenu}
+                name="alignMenu"
+                onChange={this._handleChange}>
+                Align menu: {this._renderAlignmentSelector()}
+              </Checkbox>
             </div>
           </ExampleSection>
           <ExampleSection title="Selected Items">
@@ -151,13 +162,33 @@ const Example = React.createClass({
       <div className="text-muted">No items selected.</div>;
   },
 
+  _renderAlignmentSelector() {
+    const {align, alignMenu} = this.state;
+
+    return (
+      <select
+        disabled={!alignMenu}
+        onChange={(e) => this.setState({align: e.target.value})}
+        value={align}>
+        <option value="justify">Justify (default)</option>
+        <option value="left">Left</option>
+        <option value="right">Right</option>
+      </select>
+    );
+  },
+
   _handleChange(e) {
     const {checked, name} = e.target;
 
     let newState = {};
     newState[name] = checked;
 
     switch (name) {
+      case 'alignMenu':
+        if (!checked) {
+          newState.align = this.getInitialState().align;
+        }
+        break;
       case 'largeDataSet':
         newState.customMenuItemChildren = false;
         break;

src/Typeahead.react.js

@@ -19,6 +19,13 @@ const Typeahead = React.createClass({
   displayName: 'Typeahead',
 
   propTypes: {
+    /**
+     * Specify menu alignment. The default value is `justify`, which makes the
+     * menu as wide as the input and truncates long values. Specifying `left`
+     * or `right` will align the menu to that side and the width will be
+     * determined by the length of menu item values.
+     */
+    align: PropTypes.oneOf(['justify', 'left', 'right']),
     /**
      * Allows the creation of new selections on the fly. Note that any new items
      * will be added to the list of selections, but not the list of original
@@ -171,6 +178,7 @@ const Typeahead = React.createClass({
       menu =
         <TypeaheadMenu
           activeIndex={activeIndex}
+          align={this.props.align}
           emptyLabel={this.props.emptyLabel}
           initialResultCount={this.props.paginateResults}
           labelKey={labelKey}
@@ -299,7 +307,7 @@ const Typeahead = React.createClass({
   },
 
   /**
-   * From `onClickOutside` mixin.
+   * From `listensToClickOutside` HOC.
    */
   handleClickOutside(e) {
     this._hideDropdown();

src/TypeaheadMenu.react.js

@@ -50,6 +50,7 @@ const TypeaheadMenu = React.createClass({
 
   propTypes: {
     activeIndex: PropTypes.number,
+    align: PropTypes.oneOf(['justify', 'left', 'right']),
     emptyLabel: PropTypes.string,
     initialResultCount: PropTypes.number,
     labelKey: PropTypes.string.isRequired,
@@ -62,6 +63,7 @@ const TypeaheadMenu = React.createClass({
 
   getDefaultProps() {
     return {
+      align: 'justify',
       emptyLabel: 'No matches found.',
       initialResultCount: 100,
       maxHeight: 300,
@@ -81,7 +83,7 @@ const TypeaheadMenu = React.createClass({
   },
 
   render() {
-    const {maxHeight, options} = this.props;
+    const {align, maxHeight, options} = this.props;
 
     // Render the max number of results or all results.
     let results = options.slice(0, this.state.resultCount || options.length);
@@ -104,11 +106,11 @@ const TypeaheadMenu = React.createClass({
 
     return (
       <Menu
-        className="bootstrap-typeahead-menu"
-        style={{
-          maxHeight: maxHeight + 'px',
-          right: 0,
-        }}>
+        className={cx('bootstrap-typeahead-menu', {
+          'dropdown-menu-justify': align === 'justify',
+          'dropdown-menu-right': align === 'right',
+        })}
+        style={{maxHeight: maxHeight + 'px'}}>
         {results}
         {separator}
         {paginationItem}