Fix(autocomplete) fixes onPick bug

[#138427681] Signed-off-by: Jean de Klerk <jadekler@gmail.com>
pivotal-cf · Jan 26, 2017 · 4f0110a · 4f0110a
1 parent feb9acc
commit 4f0110a
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 29 deletions.
diff --git a/library/src/pivotal-ui-react/autocomplete/autocomplete-list.js b/library/src/pivotal-ui-react/autocomplete/autocomplete-list.js
@@ -1,18 +1,13 @@
-import classnames from 'classnames';
 import React from 'react';
+import classnames from 'classnames';
 
 const types = React.PropTypes;
 
-const onClick = (value, e) => {
-  e.preventDefault();
-  this.props.onPick(value);
-};
-
 export class AutocompleteList extends React.Component {
   static propTypes = {
     $autocomplete: types.object,
     children(props, name) {
-      if (props[name] && props[name].length) return new Error('AutocompleteList can only wrap one element');
+      if(props[name] && props[name].length) return new Error('AutocompleteList can only wrap one element');
     },
     className: types.string,
     minSearchTerm: types.number,
@@ -24,42 +19,47 @@ export class AutocompleteList extends React.Component {
     minSearchTerm: 0
   }
 
+  onClick = (value, e) => {
+    e.preventDefault();
+    this.props.onPick(value);
+  }
+
   renderSuggestionList() {
     const {className} = this.props;
     const suggestedValues = this.props.$autocomplete.get('suggestedValues');
     const suggestions = suggestedValues.map((suggestion, key) => {
       const value = '_key_' in suggestion ? suggestion._key_ : suggestion.value;
       const className = classnames('autocomplete-item', {highlighted: key === this.props.$autocomplete.get('highlightedSuggestion')}, {selected: value === this.props.selectedSuggestion});
       return (<li key={key}>
-        <a href="#" onClick={onClick.bind(this, suggestion)} role="button" title={value}
+        <a href="#" onClick={this.onClick.bind(this, suggestion)} role="button" title={value}
            className={className}>{value}</a>
       </li>);
     });
-    if (!suggestions.length) return null;
+    if(!suggestions.length) return null;
     return (<ul className={classnames('autocomplete-list', className)}>{suggestions}</ul>);
   }
 
   renderDefault = () => {
     const {$autocomplete, minSearchTerm} = this.props;
     const {hidden, value} = $autocomplete.get();
-    if (hidden || (value.length < minSearchTerm)) return null;
+    if(hidden || (value.length < minSearchTerm)) return null;
     return this.renderSuggestionList();
   }
 
   render() {
     let {children, $autocomplete, ...props} = this.props;
-    if (!$autocomplete) return null;
-    if (!children) return this.renderDefault();
+    if(!$autocomplete) return null;
+    if(!children) return this.renderDefault();
     const {hidden, value, highlightedSuggestion, suggestedValues} = $autocomplete.get();
-    if (hidden) return null;
-    
+    if(hidden) return null;
+
     children = React.Children.map(children, e => React.cloneElement(e, {
       value,
       suggestedValues,
       highlightedSuggestion,
-      onClick, ...props
+      ...props
     }));
-    
+
     return <div>{children}</div>;
   }
 }
diff --git a/styleguide/docs/react/autocomplete.js b/styleguide/docs/react/autocomplete.js
@@ -16,19 +16,19 @@ npm install pui-react-autocomplete --save
 
 Property | Required | Type | Default | Description
 ---------|----------|------|---------|------------
-className         | no | String   |    | `className` to add to autocomplete
-disabled          | no | Boolean  |    | whether the input is disabled
-input             | no | Object   |    | overrides the input for autocomplete
-maxItems          | no | Number   | 50 | the maximum number of items in the autocomplete list
-onClick           | no | Function |    | `onClick` to add to the input
-onFilter          | no | Function |    | lets you apply an additional filter to the autocomplete list
-onFocus           | no | Function |    | `onFocus` to add to the input
-onInitializeItems | no | Function |    | returns the values to initially populate the autocomplete list
-onPick            | no | Function |    | callback when something is picked from the list
-onSearch          | no | Function |    | To override the default search algorithm, pass your custom function to the autocomplete as the prop onSearch.
-placeholder       | no | String   |    | placeholder text for the input
-trieOptions       | no | Object   |    | Options for the default TrieSearch algorithm (e.g. `ignoreCase`: a boolean is set to true by default, `splitOnRegEx`: a RegEx)
-value             | no | String   |    | used when the input is a controlled input
+className         | no | String   |                   | `className` to add to autocomplete
+disabled          | no | Boolean  |                   | whether the input is disabled
+input             | no | Object   | autocompleteinput | overrides the input for autocomplete
+maxItems          | no | Number   | 50                | the maximum number of items in the autocomplete list
+onClick           | no | Function |                   | `onClick` to add to the input
+onFilter          | no | Function |                   | lets you apply an additional filter to the autocomplete list
+onFocus           | no | Function |                   | `onFocus` to add to the input
+onInitializeItems | no | Function | done => done([])  | returns the values to initially populate the autocomplete list
+onPick            | no | Function |                   | callback when something is picked from the list
+onSearch          | no | Function |                   | To override the default search algorithm, pass your custom function to the autocomplete as the prop onSearch.
+placeholder       | no | String   | 'search'          | placeholder text for the input
+trieOptions       | no | Object   |                   | Options for the default TrieSearch algorithm (e.g. `ignoreCase`: a boolean is set to true by default, `splitOnRegEx`: a RegEx)
+value             | no | String   |                   | used when the input is a controlled input
 
 ## Basic usage