Merge pull request #84 from Expensify/ionatan_more_combobox_fixes

Fix show selected on top for combobox
Expensify · Feb 15, 2018 · 940e711 · 940e711
2 parents ab0be2c + a63842c
commit 940e711
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/lib/components/form/element/combobox.js b/lib/components/form/element/combobox.js
@@ -120,7 +120,7 @@ module.exports = window.CreateClass({
         const value = _.isUndefined(this.props.value) ? this.props.defaultValue || '' : this.props.value;
         const currentValue = this.initialValue || value;
 
-        let defaultSelectedOption = _(this.options).findWhere({value: currentValue});
+        let defaultSelectedOption = _(this.options).find(o => o.value === currentValue && !o.isFake);
 
         // If no default was found and initialText was present then we can use initialText values
         if (!defaultSelectedOption && this.initialText) {
@@ -179,26 +179,39 @@ module.exports = window.CreateClass({
      */
     getTruncatedOptions(currentValue) {
         // Convert an array of strings into an array of objects for our dropdown
-        const truncatedOptions = _(this.options).first(this.props.maxItemsToShow).map(option => ({
+        const truncatedOptions = _.chain(this.options).map(option => ({
             text: option.text,
             children: option.children,
             value: option.value,
             disabled: option.disabled,
             focused: false,
             isSelected: _.isEqual(option.value, currentValue) || Boolean(_.findWhere(this.props.alreadySelectedOptions, {value: option.value}))
-        }));
+        }))
+            .sortBy((o) => {
+                // Fake entries go to the bottom and selected entries go to the top only if alwaysShowSelectedOnTop was passed
+                if (o.showLast) {
+                    return 2;
+                }
+                return o.isSelected && this.props.alwaysShowSelectedOnTop ? 0 : 1;
+            })
+            .first(this.props.maxItemsToShow)
+            .value();
 
         if (!truncatedOptions.length) {
             truncatedOptions.push({
                 text: 'No items',
                 value: '',
-                isSelectable: false
+                isSelectable: false,
+                isFake: true,
+                showLast: true,
             });
         } else if (this.options.length > this.props.maxItemsToShow) {
             truncatedOptions.push({
                 text: `Viewing first ${this.props.maxItemsToShow} items. Search to see more.`,
                 value: '',
-                isSelectable: false
+                isSelectable: false,
+                isFake: true,
+                showLast: true,
             });
         }
 
@@ -226,7 +239,7 @@ module.exports = window.CreateClass({
             const option = o;
             const isSelected = _.isEqual(option.value, val);
             option.isSelected = isSelected || Boolean(_.findWhere(this.props.alreadySelectedOptions, {value: option.value}));
-            if (isSelected) {
+            if (isSelected && !option.isFake) {
                 currentText = option.text;
             }
             return option;
@@ -624,14 +637,18 @@ module.exports = window.CreateClass({
                 options.push({
                     text: `Viewing first ${options.length} results`,
                     value: '',
-                    isSelectable: false
+                    isSelectable: false,
+                    isFake: true,
+                    showLast: true,
                 });
             }
         } else {
             options.push({
                 text: _.template(this.props.noResultsText)({value: e.target.value}),
                 value: '',
-                isSelectable: this.props.allowAnyValue
+                isSelectable: this.props.allowAnyValue,
+                isFake: true,
+                showLast: true,
             });
         }
 
@@ -683,7 +700,6 @@ module.exports = window.CreateClass({
             'input-group-btn': true,
             open: this.state.isDropdownOpen
         };
-        const options = this.props.alwaysShowSelectedOnTop ? _(this.state.options).sortBy(o => !o.isSelected) : this.state.options;
 
         return (
             <div
@@ -719,7 +735,7 @@ module.exports = window.CreateClass({
                         <span className="sr-only">Toggle Dropdown</span>
                     </button>
                     {this.state.isDropdownOpen && <React.c.Dropdown
-                        options={options}
+                        options={this.state.options}
                         extraClasses={['expensify-dropdown']}
                         onChange={this.handleClick}
                     />}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "js-libs",
-  "version": "1.8.21",
+  "version": "1.8.22",
   "description": "JavaScript libraries that are shared across different repos",
   "main": "index.js",
   "license": "UNLICENSED",