expensify-common 1.0.1 → 2.0.2

package/{lib → dist}/components/form/element/combobox.js

@@ -1,149 +1,100 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
-import _ from 'underscore';
-import get from 'lodash/get';
-import has from 'lodash/has';
-import Str from '../../../str';
-import DropDown from './dropdown';
-
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const classnames_1 = __importDefault(require("classnames"));
+const underscore_1 = __importDefault(require("underscore"));
+const get_1 = __importDefault(require("lodash/get"));
+const has_1 = __importDefault(require("lodash/has"));
+const uniqBy_1 = __importDefault(require("lodash/uniqBy"));
+const str_1 = __importDefault(require("../../../str"));
+const dropdown_1 = __importDefault(require("./dropdown"));
 const propTypes = {
     // These are the elements to show in the dropdown
-    options: PropTypes.arrayOf(
-        PropTypes.shape({
-            // The value of the option, should be unique
-            value: PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.number
-            ]),
-
-            // The human readable text of the option
-            text: PropTypes.string,
-
-            // If we need more than text to style more
-            children: PropTypes.element,
-
-            // Whether or not this tag has an error (like out of policy)
-            hasError: PropTypes.bool,
-
-            // If this option is disabled, then it can't be selected and needs styled differently
-            disabled: PropTypes.bool,
-
-            // An id to use when checking if the options changed. It's used to avoid triggering changes when passing
-            // children to it, if the id didn't change we assume no other properties changed either.
-            id: PropTypes.any,
-
-            // Whether or not the object should be displayed as a divider
-            // Used to identify the divider in some UI elements that need a separation between listed options
-            divider: PropTypes.bool,
-
-            // Whether or not the option is represented more than once in the list of options and should be selected
-            // Used in some UI elements that may display the same user details multiple times to identify which ones
-            // are duplicates
-            selected: PropTypes.bool
-        })
-    ).isRequired,
-
+    options: prop_types_1.default.arrayOf(prop_types_1.default.shape({
+        // The value of the option, should be unique
+        value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
+        // The human readable text of the option
+        text: prop_types_1.default.string,
+        // If we need more than text to style more
+        children: prop_types_1.default.element,
+        // Whether or not this tag has an error (like out of policy)
+        hasError: prop_types_1.default.bool,
+        // If this option is disabled, then it can't be selected and needs styled differently
+        disabled: prop_types_1.default.bool,
+        // An id to use when checking if the options changed. It's used to avoid triggering changes when passing
+        // children to it, if the id didn't change we assume no other properties changed either.
+        id: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
+        // Whether or not the object should be displayed as a divider
+        // Used to identify the divider in some UI elements that need a separation between listed options
+        divider: prop_types_1.default.bool,
+        // Whether or not the option is represented more than once in the list of options and should be selected
+        // Used in some UI elements that may display the same user details multiple times to identify which ones
+        // are duplicates
+        selected: prop_types_1.default.bool,
+    })).isRequired,
     // A default value to have selected
-    defaultValue: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number
-    ]),
-
+    defaultValue: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
     // A default value to have selected - Use this one rather than defaultValue when the parent view might change the value passed.
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number
-    ]),
-
+    value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
     // A list of options to show as selected too. This is used when we are using this component to implement a multi
     // select, where another component holds all the selected options and this component only has to show the ones
     // that are already selected with the check mark.
-    alreadySelectedOptions: PropTypes.arrayOf(
-        PropTypes.shape({
-            value: PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.number
-            ]),
-            text: PropTypes.string,
-        })
-    ),
-
+    alreadySelectedOptions: prop_types_1.default.arrayOf(prop_types_1.default.shape({
+        value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
+        text: prop_types_1.default.string,
+    })),
     // A callback that is fired when the value of the selector has changed
-    onChange: PropTypes.func,
-
+    onChange: prop_types_1.default.func,
     // A callback that is fired when the value is cleared out by deleting text in the input
-    onClear: PropTypes.func,
-
+    onClear: prop_types_1.default.func,
     // Callback fired when the dropdown is open/closed. It will pass a boolean param with true if it's open
-    onDropdownStateChange: PropTypes.func,
-
+    onDropdownStateChange: prop_types_1.default.func,
     // Maximum amount of items to show
-    maxItemsToShow: PropTypes.number,
-
+    maxItemsToShow: prop_types_1.default.number,
     // Maximum amount of search results
-    maxSearchResults: PropTypes.number,
-
+    maxSearchResults: prop_types_1.default.number,
     // By default we show the selected option's value
     // You can overwrite it to display a different property (like 'text')
-    propertyToDisplay: PropTypes.oneOf(['text', 'value']),
-
+    propertyToDisplay: prop_types_1.default.oneOf(['text', 'value']),
     // Whether or not the combobox should be open when we initialize it
-    openOnInit: PropTypes.bool,
-
+    openOnInit: prop_types_1.default.bool,
     // A property to allow the combobox set to any manual entry the user chooses
-    allowAnyValue: PropTypes.bool,
-
+    allowAnyValue: prop_types_1.default.bool,
     // What text should we show when the text entered doesn't match any of the results. It's an underscore template
     // that will be passed `value` as the current entered text.
-    noResultsText: PropTypes.string,
-
+    noResultsText: prop_types_1.default.string,
     // A property to determine if the selector is user editable
-    isReadOnly: PropTypes.bool,
-
+    isReadOnly: prop_types_1.default.bool,
     // Text to use for the placeholder, defaults to "Type to search..."
-    placeholder: PropTypes.string,
-
+    placeholder: prop_types_1.default.string,
     // An array of extra classes to put on the combobox
-    extraClasses: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.array,
-        PropTypes.object,
-    ]),
-
+    extraClasses: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.array, prop_types_1.default.object]),
     // This makes this component hidden till someone manually calls openDropdown
-    hideUntilManuallyOpened: PropTypes.bool,
-
+    hideUntilManuallyOpened: prop_types_1.default.bool,
     // Do we want to always show the selected options on top?
-    alwaysShowSelectedOnTop: PropTypes.bool,
-
+    alwaysShowSelectedOnTop: prop_types_1.default.bool,
     // Should this combobox have an error state on init?
-    hasInitialError: PropTypes.bool,
-
+    hasInitialError: prop_types_1.default.bool,
     // Bootstrap 4 compatibility flag
-    bs4: PropTypes.bool,
-
+    bs4: prop_types_1.default.bool,
     // Always include the disabled options in search results
-    showDisabledOptionsInResults: PropTypes.bool,
-
+    showDisabledOptionsInResults: prop_types_1.default.bool,
     // Do we want to autoscroll to the top of the selector on item selection
-    autoScrollToTop: PropTypes.bool,
-
+    autoScrollToTop: prop_types_1.default.bool,
     // Classes to apply to the dropdown in the combobox
-    dropDownClasses: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.array,
-        PropTypes.object,
-    ])
+    dropDownClasses: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.array, prop_types_1.default.object]),
 };
-
 const defaultProps = {
     defaultValue: '',
     value: '',
-    onChange: () => {},
-    onClear: () => {},
-    onDropdownStateChange: () => {},
+    onChange: () => { },
+    onClear: () => { },
+    onDropdownStateChange: () => { },
     maxItemsToShow: 500,
     maxSearchResults: 200,
     propertyToDisplay: 'value',
@@ -162,15 +113,13 @@ const defaultProps = {
     autoScrollToTop: true,
     dropDownClasses: [],
 };
-
 /**
  * A combobox useful for searching for values in a large list
  */
 // eslint-disable-next-line react/no-unsafe
-class Combobox extends React.Component {
+class Combobox extends react_1.default.Component {
     constructor(props) {
         super(props);
-
         // Bind to our private methods
         this.getStartState = this.getStartState.bind(this);
         this.getTruncatedOptions = this.getTruncatedOptions.bind(this);
@@ -194,64 +143,214 @@ class Combobox extends React.Component {
         this.handleKeyDown = this.handleKeyDown.bind(this);
         this.performSearch = this.performSearch.bind(this);
         this.handleClick = this.handleClick.bind(this);
-
         this.state = this.getStartState();
         this.scrollPosition = 0;
     }
-
     componentDidMount() {
-        if (this.props.openOnInit) {
-            // Our dropdown will be open, so we need to listen for our click away events
-            // and put focus on the input
-            _.defer(this.resetClickAwayHandler);
-            $(this.value).focus().select();
+        if (!this.props.openOnInit) {
+            return;
         }
+        // Our dropdown will be open, so we need to listen for our click away events
+        // and put focus on the input
+        underscore_1.default.defer(this.resetClickAwayHandler);
+        $(this.value).focus().select();
     }
-
+    // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(nextProps) {
-        if (!_.isUndefined(nextProps.value) && !_.isEmpty(nextProps.value) && !_.isEqual(nextProps.value, this.state.currentValue)) {
-            this.setValue(nextProps.value);
+        if (underscore_1.default.isUndefined(nextProps.value) || underscore_1.default.isEmpty(nextProps.value) || underscore_1.default.isEqual(nextProps.value, this.state.currentValue)) {
+            return;
         }
-
-        if (!_.isUndefined(nextProps.options)) {
+        this.setValue(nextProps.value);
+        if (!underscore_1.default.isUndefined(nextProps.options)) {
             // If the options have an id property, we use that to compare them and determine if they changed, if not
             // we'll use the whole options array.
-            if (has(nextProps.options, '0.id')) {
-                if (!_.isEqual(_.pluck(nextProps.options, 'id'), _.pluck(this.props.options, 'id')) || !_.isEqual(_.pluck(nextProps.alreadySelectedOptions, 'id'), _.pluck(this.props.alreadySelectedOptions, 'id'))) {
+            if ((0, has_1.default)(nextProps.options, '0.id')) {
+                if (!underscore_1.default.isEqual(underscore_1.default.pluck(nextProps.options, 'id'), underscore_1.default.pluck(this.props.options, 'id')) ||
+                    !underscore_1.default.isEqual(underscore_1.default.pluck(nextProps.alreadySelectedOptions, 'id'), underscore_1.default.pluck(this.props.alreadySelectedOptions, 'id'))) {
                     this.reset(false, nextProps.options, nextProps.alreadySelectedOptions);
                 }
-            } else if (!_.isEqual(nextProps.options, this.props.options) || !_.isEqual(nextProps.alreadySelectedOptions, this.props.alreadySelectedOptions)) {
+            }
+            else if (!underscore_1.default.isEqual(nextProps.options, this.props.options) || !underscore_1.default.isEqual(nextProps.alreadySelectedOptions, this.props.alreadySelectedOptions)) {
                 this.reset(false, nextProps.options, nextProps.alreadySelectedOptions);
             }
         }
-
-        if (!_.isUndefined(nextProps.openOnInit) && !_.isEqual(nextProps.openOnInit, this.props.openOnInit)) {
+        if (!underscore_1.default.isUndefined(nextProps.openOnInit) && !underscore_1.default.isEqual(nextProps.openOnInit, this.props.openOnInit)) {
             this.setState({
-                isDropdownOpen: nextProps.openOnInit
+                isDropdownOpen: nextProps.openOnInit,
             });
         }
-
-        if (!_.isUndefined(nextProps.isReadOnly) && !_.isEqual(nextProps.isReadOnly, this.props.isReadOnly)) {
+        if (!underscore_1.default.isUndefined(nextProps.isReadOnly) && !underscore_1.default.isEqual(nextProps.isReadOnly, this.props.isReadOnly)) {
             this.setState({
-                isDisabled: nextProps.isReadOnly
+                isDisabled: nextProps.isReadOnly,
             });
         }
     }
-
     componentDidUpdate() {
-        const dropDown = ReactDOM.findDOMNode(this.dropDown);
-
         // Set scroll position to the last known location when applicable
-        if (dropDown && !this.props.autoScrollToTop) {
-            dropDown.scrollTop = this.scrollPosition;
+        if (!this.dropDown || this.props.autoScrollToTop) {
+            return;
         }
+        this.dropDown.scrollTop = this.scrollPosition;
     }
-
     componentWillUnmount() {
         // Don't ever let this handler linger after unmounting
         $('body').off('click.clickaway', this.handleClickAway);
     }
-
+    /**
+     * Handle state changes for when a user clicks on an item in the dropdown
+     *
+     * @param  {String|Number} selectedValue
+     */
+    handleClick(selectedValue) {
+        this.deselectCurrentOption();
+        // Select the new item, set our new indexes, close the dropdown
+        // Unselect all other options
+        let newSelectedIndex = (0, underscore_1.default)(this.options).findIndex({ value: selectedValue });
+        let currentlySelectedOption = (0, underscore_1.default)(this.options).findWhere({ value: selectedValue });
+        // If allowAnyValue is true and currentValue is absent then set it manually to what the user has entered.
+        if (newSelectedIndex === -1 && this.props.allowAnyValue && selectedValue) {
+            newSelectedIndex = 0;
+            currentlySelectedOption = {
+                text: selectedValue,
+                value: selectedValue,
+            };
+        }
+        // Get the scroll position of the currently selected value
+        this.scrollPosition = this.dropDown.scrollTop;
+        const stateUpdateCallback = () => {
+            this.resetClickAwayHandler();
+            // Fire our onChange callback
+            this.initialValue = selectedValue;
+            this.props.onChange(selectedValue);
+        };
+        this.setState({
+            options: this.getTruncatedOptions(selectedValue),
+            selectedIndex: newSelectedIndex,
+            focusedIndex: newSelectedIndex,
+            currentValue: selectedValue,
+            currentText: (0, get_1.default)(currentlySelectedOption, 'text', ''),
+            isDropdownOpen: false,
+            hasError: (0, get_1.default)(currentlySelectedOption, 'hasError', false),
+        }, stateUpdateCallback);
+    }
+    /**
+     * Fired when we "click away" with the dropdown open
+     *
+     * @param {SyntheticEvent} e
+     */
+    handleClickAway(e) {
+        // Ignore the click away event if something within our combobox was clicked
+        // BIG HACK! I had to add the check for the support password click because it was causing a near
+        // unreproducible bug: https://github.com/Expensify/Expensify/issues/76745 that only I could reproduce.
+        // It is 100% unexplainable, but works for me
+        if ($(e.target).attr('id') === 'supportPassword' ||
+            ($(e.target).parents('.expensify-input-group').length && $(e.target).parents('.expensify-input-group')[0] === react_dom_1.default.findDOMNode(this)) // eslint-disable-line react/no-find-dom-node
+        ) {
+            return;
+        }
+        // If the dropdown is open then we don't really care and can do an early return
+        if (!this.state.isDropdownOpen) {
+            return;
+        }
+        this.reset(true);
+        // Trigger a change so that inline editor knows to cancel itself
+        this.props.onChange(this.initialValue || this.props.value || this.props.defaultValue);
+    }
+    /**
+     * This is triggered whenever there is a key up event in the text input
+     *
+     * @param {SyntheticEvent} e
+     */
+    handleKeyDown(e) {
+        let oldFocusedIndex;
+        let newFocusedIndex;
+        let currentValue;
+        let currentText;
+        const updateStateDownKey = (state) => ({
+            focusedIndex: newFocusedIndex,
+            options: state.options,
+            isDropdownOpen: true,
+        });
+        const updateStateUpKey = (state) => ({
+            focusedIndex: newFocusedIndex,
+            options: state.options,
+            isDropdownOpen: true,
+        });
+        const updateStateEnterKey = (state) => ({
+            options: this.getTruncatedOptions(currentValue),
+            selectedIndex: state.focusedIndex,
+            currentValue,
+            currentText,
+            isDropdownOpen: false,
+        });
+        const resetStateEnterKey = () => {
+            this.resetClickAwayHandler();
+            // Fire our onChange callback
+            this.props.onChange(currentValue);
+            this.initialValue = currentValue;
+        };
+        // Handle the arrow keys
+        switch (e.which) {
+            case 40:
+                // Down - move focused selection down
+                oldFocusedIndex = this.state.focusedIndex;
+                newFocusedIndex = oldFocusedIndex + 1;
+                // Wrap around to the top of the list
+                if (newFocusedIndex > this.state.options.length - 1) {
+                    newFocusedIndex = 0;
+                }
+                this.switchFocusedIndex(oldFocusedIndex, newFocusedIndex);
+                this.setState(updateStateDownKey, this.resetClickAwayHandler);
+                this.stopEvent(e);
+                break;
+            case 38:
+                // Up - move focused selection up
+                oldFocusedIndex = this.state.focusedIndex;
+                newFocusedIndex = oldFocusedIndex - 1;
+                // Wrap around to the bottom of the list
+                if (newFocusedIndex < 0) {
+                    newFocusedIndex = this.state.options.length - 1;
+                }
+                this.switchFocusedIndex(oldFocusedIndex, newFocusedIndex);
+                this.setState(updateStateUpKey, this.resetClickAwayHandler);
+                this.stopEvent(e);
+                break;
+            case 13: {
+                // Enter - set selection
+                if (!this.state.isDropdownOpen) {
+                    return;
+                }
+                // Don't select disabled things
+                if (this.state.options[this.state.focusedIndex].disabled) {
+                    break;
+                }
+                this.deselectCurrentOption();
+                currentValue = this.state.options[this.state.focusedIndex].value;
+                currentText = this.state.options[this.state.focusedIndex].text;
+                // if allowAnyValue is true and currentValue is absent then set it manually to what the user has entered
+                if (!currentValue && this.props.allowAnyValue) {
+                    currentValue = e.target.value;
+                    currentText = currentValue;
+                }
+                this.setState(updateStateEnterKey, resetStateEnterKey);
+                this.stopEvent(e);
+                break;
+            }
+            case 9:
+            case 27:
+                // Tab & Escape - clear selection
+                this.reset(true);
+                // Fire our onChange callback
+                this.props.onChange(this.initialValue || this.props.value || this.props.defaultValue);
+                // Stop the event from propagating if the escape key is pressed
+                if (e.which === 27) {
+                    this.stopEvent(e);
+                }
+                break;
+            default:
+                break;
+        }
+    }
     /**
      * @param {Boolean} noDefaultValue Overrides the default value to have '' as the currentValue
      * @param {Object[]} [newOptions] when resetting this component, we can specify new options to use
@@ -261,20 +360,16 @@ class Combobox extends React.Component {
      */
     getStartState(noDefaultValue, newOptions, newAlreadySelectedOptions) {
         this.options = newOptions || this.props.options;
-
         const value = this.props.value || this.props.defaultValue || '';
         const currentValue = this.initialValue || value;
-
+        const matchingOptionWithoutSMSDomain = (o) => (str_1.default.isString(o) ? str_1.default.removeSMSDomain(o.value) : o.value) === currentValue && !o.isFake;
         // We use removeSMSDomain here in case currentValue is a phone number
-        let defaultSelectedOption = _(this.options).find(o => (Str.isString(o) ? Str.removeSMSDomain(o.value) : o.value) === currentValue
-            && !o.isFake);
-
+        let defaultSelectedOption = (0, underscore_1.default)(this.options).find(matchingOptionWithoutSMSDomain);
         // If no default was found and initialText was present then we can use initialText values
         if (!defaultSelectedOption && this.initialText) {
             defaultSelectedOption = {};
             defaultSelectedOption.text = this.initialText;
         }
-
         return {
             isDropdownOpen: this.props.openOnInit,
             currentValue: noDefaultValue ? this.initialValue || '' : value,
@@ -283,10 +378,9 @@ class Combobox extends React.Component {
             focusedIndex: 0,
             selectedIndex: null,
             isDisabled: this.props.isReadOnly,
-            hasError: (defaultSelectedOption && defaultSelectedOption.hasError) || this.props.hasInitialError
+            hasError: (defaultSelectedOption && defaultSelectedOption.hasError) || this.props.hasInitialError,
         };
     }
-
     /**
      * Returns a set of our full options according to the maxItemsToShow
      *
@@ -296,34 +390,22 @@ class Combobox extends React.Component {
      */
     getTruncatedOptions(currentValue, newAlreadySelectedOptions) {
         const alreadySelected = newAlreadySelectedOptions || this.props.alreadySelectedOptions;
-
         // Get the divider index if we have one
-        const dividerIndex = _.findIndex(this.options, option => option.divider);
-
+        const findDivider = (option) => option.divider;
+        const dividerIndex = underscore_1.default.findIndex(this.options, findDivider);
         // Split into two arrays everything before and after the divider (if the divider does not exist then we'll return a single array)
         const splitOptions = dividerIndex ? [this.options.slice(0, dividerIndex + 1), this.options.slice(dividerIndex + 1)] : [this.options];
-
+        const formatOption = (option) => (Object.assign({ focused: false, isSelected: option.selected && (underscore_1.default.isEqual(option.value, currentValue) || Boolean(underscore_1.default.findWhere(alreadySelected, { value: option.value }))) }, option));
+        const sortByOption = (o) => {
+            // Unselectable text-only entries (isFake: true) 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;
+        };
         // Take each array and format it, sort it, and move selected items to top (if applicable)
-        const truncatedOptions = _.chain(splitOptions)
-            .map(array => (
-                _.chain(array)
-                    .map(option => ({
-                        focused: false,
-                        isSelected: option.selected && (_.isEqual(option.value, currentValue) || Boolean(_.findWhere(alreadySelected, {value: option.value}))),
-                        ...option
-                    }))
-                    .sortBy((o) => {
-                        // Unselectable text-only entries (isFake: true) 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()))
-            .flatten()
-            .value();
-
+        const formatOptions = (array) => underscore_1.default.chain(array).map(formatOption).sortBy(sortByOption).first(this.props.maxItemsToShow).value();
+        const truncatedOptions = underscore_1.default.chain(splitOptions).map(formatOptions).flatten().value();
         if (!truncatedOptions.length) {
             truncatedOptions.push({
                 text: 'No items',
@@ -332,7 +414,8 @@ class Combobox extends React.Component {
                 isFake: true,
                 showLast: true,
             });
-        } else if (this.options.length > this.props.maxItemsToShow) {
+        }
+        else if (this.options.length > this.props.maxItemsToShow) {
             truncatedOptions.push({
                 text: `Viewing first ${this.props.maxItemsToShow} items. Search to see more.`,
                 value: '',
@@ -341,10 +424,8 @@ class Combobox extends React.Component {
                 showLast: true,
             });
         }
-
         return truncatedOptions;
     }
-
     /**
      * Returns the selected value(s)
      *
@@ -353,7 +434,6 @@ class Combobox extends React.Component {
     getValue() {
         return this.state.currentValue;
     }
-
     /**
      * Sets the current value
      *
@@ -362,71 +442,71 @@ class Combobox extends React.Component {
     setValue(val) {
         // We need to look in `this.options` for the matching option because `this.state.options` is a truncated list
         // and might not have every option
-        const optionMatchingVal = _.findWhere(this.options, {value: val});
-        const currentText = get(optionMatchingVal, 'text', '');
-
-        this.initialValue = val;
-        this.setState(state => ({
+        const optionMatchingVal = underscore_1.default.findWhere(this.options, { value: val });
+        const currentText = (0, get_1.default)(optionMatchingVal, 'text', '');
+        const deselectOption = (initialOption) => {
+            const option = initialOption;
+            const isSelected = underscore_1.default.isEqual(option.value, val);
+            option.isSelected = isSelected || Boolean(underscore_1.default.findWhere(this.props.alreadySelectedOptions, { value: option.value }));
+            return option;
+        };
+        const deselectOptions = (options) => (0, underscore_1.default)(options).map(deselectOption);
+        const setValueState = (state) => ({
             currentValue: val,
             currentText,
-
             // Deselect all other options but the one matching our value
-            options: _(state.options).map((o) => {
-                const option = o;
-                const isSelected = _.isEqual(option.value, val);
-                option.isSelected = isSelected
-                    || Boolean(_.findWhere(this.props.alreadySelectedOptions, {value: option.value}));
-
-                return option;
-            })
-        }));
+            options: deselectOptions(state.options),
+        });
+        this.initialValue = val;
+        this.setState(setValueState);
     }
-
     /**
      * Hard sets the current text to what we want
      *
-     * @param {String} currentText
+     * @param {String} val
      */
-    setText(currentText) {
+    setText(val) {
+        // See if there is a value in the options that matches the text we want to set. If the option
+        // does exist, then use the text property of that option for the text to display. If the option
+        // does not exist, then just display whatever value was passed
+        const optionMatchingVal = underscore_1.default.findWhere(this.options, { value: val });
+        const currentText = (0, get_1.default)(optionMatchingVal, 'text', val);
         this.initialValue = currentText;
         this.initialText = currentText;
-        this.setState({currentText});
+        this.setState({ currentText });
     }
-
     /**
      * Sets the disabled state of this component
      *
      * @param {Boolean} isDisabled
      */
     setDisabled(isDisabled) {
-        this.setState({isDisabled});
+        this.setState({ isDisabled });
     }
-
     /**
      * Set an error for a specific tag
      */
     setError() {
         this.setState({
-            hasError: true
+            hasError: true,
         });
     }
-
     /**
      * Deselects any current option if it exists
      */
     deselectCurrentOption() {
-        if (this.state.selectedIndex !== null && this.state.options[this.state.selectedIndex]) {
-            this.setState((state) => {
-                const newOptions = [...state.options];
-                newOptions[state.selectedIndex].isSelected = false;
-
-                return {
-                    options: newOptions
-                };
-            });
+        if (this.state.selectedIndex === null || !this.state.options[this.state.selectedIndex]) {
+            return;
         }
+        const setValueState = (state) => {
+            const newOptions = [...state.options];
+            newOptions[state.selectedIndex].isSelected = false;
+            return {
+                options: newOptions,
+            };
+        };
+        this.setState(setValueState);
     }
-
     /**
      * Swaps the focused index from {oldFocusedIndex} to {newFocusedIndex}
      *
@@ -434,17 +514,16 @@ class Combobox extends React.Component {
      * @param {number} newFocusedIndex
      */
     switchFocusedIndex(oldFocusedIndex, newFocusedIndex) {
-        this.setState((state) => {
+        const setFocusedState = (state) => {
             const newOptions = [...state.options];
             newOptions[oldFocusedIndex].focused = false;
             newOptions[newFocusedIndex].focused = true;
-
             return {
-                options: newOptions
+                options: newOptions,
             };
-        });
+        };
+        this.setState(setFocusedState);
     }
-
     /**
      * Returns the selector to it's original state
      *
@@ -457,52 +536,25 @@ class Combobox extends React.Component {
             this.options = newOptions;
         }
         const state = this.getStartState(noDefaultValue, this.options, newAlreadySelectedOptions);
-        this.setState(state, () => this.props.onDropdownStateChange(Boolean(state.isDropdownOpen)));
+        const handleDropdownStateChange = () => {
+            this.props.onDropdownStateChange(Boolean(state.isDropdownOpen));
+        };
+        this.setState(state, handleDropdownStateChange);
     }
-
     /**
      * When the dropdown is closed, we reset the focused property of all of our options
      */
     resetFocusedElements() {
-        this.setState(state => ({
-            options: _(state.options).map((o) => {
-                const option = o;
-                option.focused = false;
-                return option;
-            })
-        }));
-    }
-
-    /**
-     * Fired when we "click away" with the dropdown open
-     *
-     * @param {SyntheticEvent} e
-     */
-    handleClickAway(e) {
-        // Ignore the click away event if something within our combobox was clicked
-        // BIG HACK! I had to add the check for the support password click because it was causing a near
-        // unreproducible bug: https://github.com/Expensify/Expensify/issues/76745 that only I could reproduce.
-        // It is 100% unexplainable, but works for me
-        if ($(e.target).attr('id') === 'supportPassword'
-            || (
-                $(e.target).parents('.expensify-input-group').length
-                && $(e.target).parents('.expensify-input-group')[0] === ReactDOM.findDOMNode(this)
-            )
-        ) {
-            return;
-        }
-
-        // If the dropdown is open then we don't really care and can do an early return
-        if (!this.state.isDropdownOpen) {
-            return;
-        }
-
-        this.reset(true);
-
-        // Trigger a change so that inline editor knows to cancel itself
-        this.props.onChange(this.initialValue || this.props.value || this.props.defaultValue);
+        const resetFocusedProperty = (o) => {
+            const option = o;
+            option.focused = false;
+            return option;
+        };
+        const setValueState = (state) => ({
+            options: (0, underscore_1.default)(state.options).map(resetFocusedProperty),
+        });
+        this.setState(setValueState);
     }
-
     /**
      * Sets a clicklistener to close the dropdown if it is currently open
      */
@@ -510,31 +562,30 @@ class Combobox extends React.Component {
         $('body').off('click.clickaway', this.handleClickAway);
         if (this.state.isDropdownOpen) {
             $('body').on('click.clickaway', this.handleClickAway);
-        } else {
+        }
+        else {
             this.resetFocusedElements();
         }
     }
-
     /**
      * Clear an error for a specific tag
      */
     clearError() {
         this.setState({
-            hasError: false
+            hasError: false,
         });
     }
-
     /**
      * Opens or closes the dropdown
      */
     toggleDropdown() {
         if (this.state.isDropdownOpen) {
             this.closeDropdown();
-        } else {
+        }
+        else {
             this.openDropdown();
         }
     }
-
     /**
      * Just open the dropdown (when the input gets focus)
      */
@@ -542,15 +593,16 @@ class Combobox extends React.Component {
         if (this.state.isDropdownOpen) {
             return;
         }
-        this.setState({
-            isDropdownOpen: true
-        }, () => {
+        const setValueState = () => ({
+            isDropdownOpen: true,
+        });
+        const resetState = () => {
             this.props.onDropdownStateChange(true);
             this.resetClickAwayHandler();
             $(this.value).focus().select();
-        });
+        };
+        this.setState(setValueState, resetState);
     }
-
     /**
      * Closes the dropdown and removes the click handler that calls this function after the dropdown is closed
      *
@@ -560,28 +612,26 @@ class Combobox extends React.Component {
         if (!this.state.isDropdownOpen) {
             return;
         }
-
         // If the dropdown is being closed from clicking on our input, then we actually don't close the dropdown. This
         // occurs because when first opening the dropdown when the input receives focus, it fires off the clickaway
         // event and I couldn't stop it. So this is the work around.
         if (e && ($(e.target)[0] === $(this.value)[0] || $(e.target).parent().hasClass('disabled'))) {
             return;
         }
-
-        this.setState({
-            isDropdownOpen: false
-        }, () => {
+        const setValueState = () => ({
+            isDropdownOpen: false,
+        });
+        const resetState = () => {
             this.props.onDropdownStateChange(false);
             this.resetClickAwayHandler();
-        });
-
+        };
+        this.setState(setValueState, resetState);
         // The value a user selects is set in state prior to this function running so we want to always treat this as if
         // it were just a blur event and reset the input to an empty value and then let onChange handle showing the proper value
         // This is because users who click the arrow used to be able to save incorrect values in the combobox: https://github.com/Expensify/Expensify/issues/75793#issuecomment-380260662
         this.reset(true);
         this.props.onChange(this.initialValue || this.props.value || this.props.defaultValue);
     }
-
     /**
      * If the user presses tab when the dropdown button is focused, then we close the dropdown
      * because they are trying to get to the next form components
@@ -589,11 +639,11 @@ class Combobox extends React.Component {
      * @param {SyntheticEvent} e
      */
     closeDropdownOnTabOut(e) {
-        if (e.which === 9) {
-            this.closeDropdown();
+        if (e.which !== 9) {
+            return;
         }
+        this.handleClick(this.state.currentValue);
     }
-
     /**
      * Stops events from doing anything outside of the current function (in theory).
      * This doesn't work between jquery and React events because React's event propagation is a separate system.
@@ -604,121 +654,12 @@ class Combobox extends React.Component {
         e.preventDefault();
         if (e.nativeEvent) {
             e.nativeEvent.stopImmediatePropagation();
-        } else {
+        }
+        else {
             e.stopImmediatePropagation();
         }
         e.stopPropagation();
     }
-
-    /**
-     * This is triggered whenever there is a key up event in the text input
-     *
-     * @param {SyntheticEvent} e
-     */
-    handleKeyDown(e) {
-        let oldFocusedIndex;
-        let newFocusedIndex;
-        let currentValue;
-        let currentText;
-
-        // Handle the arrow keys
-        switch (e.which) {
-            case 40:
-                // Down - move focused selection down
-                oldFocusedIndex = this.state.focusedIndex;
-                newFocusedIndex = oldFocusedIndex + 1;
-
-                // Wrap around to the top of the list
-                if (newFocusedIndex > this.state.options.length - 1) {
-                    newFocusedIndex = 0;
-                }
-
-                this.switchFocusedIndex(oldFocusedIndex, newFocusedIndex);
-                this.setState(state => ({
-                    focusedIndex: newFocusedIndex,
-                    options: state.options,
-                    isDropdownOpen: true
-                }), this.resetClickAwayHandler);
-                this.stopEvent(e);
-                break;
-
-            case 38:
-                // Up - move focused selection up
-                oldFocusedIndex = this.state.focusedIndex;
-                newFocusedIndex = oldFocusedIndex - 1;
-
-                // Wrap around to the bottom of the list
-                if (newFocusedIndex < 0) {
-                    newFocusedIndex = this.state.options.length - 1;
-                }
-
-                this.switchFocusedIndex(oldFocusedIndex, newFocusedIndex);
-                this.setState(state => ({
-                    focusedIndex: newFocusedIndex,
-                    options: state.options,
-                    isDropdownOpen: true
-                }), this.resetClickAwayHandler);
-                this.stopEvent(e);
-                break;
-
-            case 13: {
-                // Enter - set selection
-                if (!this.state.isDropdownOpen) {
-                    return;
-                }
-
-                // Don't select disabled things
-                if (this.state.options[this.state.focusedIndex].disabled) {
-                    break;
-                }
-                this.deselectCurrentOption();
-
-                currentValue = this.state.options[this.state.focusedIndex].value;
-                currentText = this.state.options[this.state.focusedIndex].text;
-
-                // if allowAnyValue is true and currentValue is absent then set it manually to what the user has entered
-                if (!currentValue && this.props.allowAnyValue) {
-                    currentValue = e.target.value;
-                    currentText = currentValue;
-                }
-
-                this.setState(state => ({
-                    options: this.getTruncatedOptions(currentValue),
-                    selectedIndex: state.focusedIndex,
-                    currentValue,
-                    currentText,
-                    isDropdownOpen: false
-                }), () => {
-                    this.resetClickAwayHandler();
-
-                    // Fire our onChange callback
-                    this.props.onChange(currentValue);
-                    this.initialValue = currentValue;
-                });
-
-                this.stopEvent(e);
-                break;
-            }
-
-            case 9:
-            case 27:
-                // Tab & Escape - clear selection
-                this.reset(true);
-
-                // Fire our onChange callback
-                this.props.onChange(this.initialValue || this.props.value || this.props.defaultValue);
-
-                // Stop the event from propagating if the escape key is pressed
-                if (e.which === 27) {
-                    this.stopEvent(e);
-                }
-                break;
-
-            default:
-                break;
-        }
-    }
-
     /**
      * This is triggered whenever there is a change event in the text input
      * (from any valid input that's not being handled from the keyUp event)
@@ -728,73 +669,56 @@ class Combobox extends React.Component {
     performSearch(e) {
         // If empty value, hide the dropdown, update the initial fields and show the original options.
         const value = e.target.value;
-
         if (value === '') {
             this.initialValue = '';
             this.initialText = '';
-
             // This will show all the original items while the input field stays empty. Also the dropdown will remain open.
             this.setState({
                 currentValue: '',
                 currentText: '',
                 isDropdownOpen: true,
-                options: this.getTruncatedOptions('')
+                options: this.getTruncatedOptions(''),
             }, this.resetClickAwayHandler);
-
             // Trigger the callback to clear out the value
             this.props.onClear();
             return;
         }
-
         // Search our original options. We want:
         // Exact matches first
         // beginning-of-string matches second
         // middle-of-string matches last
-        const matchRegexes = [
-            new RegExp(`^${Str.escapeForRegExp(value)}$`, 'i'),
-            new RegExp(`^${Str.escapeForRegExp(value)}`, 'i'),
-            new RegExp(Str.escapeForRegExp(value), 'i'),
-        ];
+        const matchRegexes = [new RegExp(`^${str_1.default.escapeForRegExp(value)}$`, 'i'), new RegExp(`^${str_1.default.escapeForRegExp(value)}`, 'i'), new RegExp(str_1.default.escapeForRegExp(value), 'i')];
         let hasMoreResults = false;
         let matches = new Set();
-        const searchOptions = _.uniq(this.options, 'value');
-
+        const searchOptions = (0, uniqBy_1.default)(this.options, 'value');
         for (let i = 0; i < matchRegexes.length; i++) {
             if (matches.size < this.props.maxSearchResults) {
                 for (let j = 0; j < searchOptions.length; j++) {
                     const option = searchOptions[j];
                     const isDisabled = option.disabled;
-                    const isMatch = matchRegexes[i].test(option.text.toString().replace(new RegExp(/&nbsp;/g), ''));
-
+                    const isMatch = matchRegexes[i].test(option.text.toString().replace(/&nbsp;/g, ''));
                     // Don't include the disabled options that match the regex unless we specified we want them to show.
                     // If we want them to show then add them whether they match the regex or not.
-                    if ((!isDisabled && isMatch)
-                        || (isDisabled && this.props.showDisabledOptionsInResults)) {
+                    if ((!isDisabled && isMatch) || (isDisabled && this.props.showDisabledOptionsInResults && isMatch)) {
                         matches.add(option);
                     }
-
                     if (matches.size === this.props.maxSearchResults) {
                         hasMoreResults = true;
                         break;
                     }
                 }
-            } else {
+            }
+            else {
                 hasMoreResults = true;
                 break;
             }
         }
         matches = Array.from(matches);
-
-        const options = _(matches).map(option => ({
-            focused: false,
-            isSelected: _.isEqual(option.value, value) || Boolean(_.findWhere(this.props.alreadySelectedOptions, {value: option.value})),
-            ...option
-        }));
-
+        const formatOption = (option) => (Object.assign({ focused: false, isSelected: underscore_1.default.isEqual(option.value ? option.value.toUpperCase : '', value.toUpperCase()) || Boolean(underscore_1.default.findWhere(this.props.alreadySelectedOptions, { value: option.value })) }, option));
+        const options = (0, underscore_1.default)(matches).map(formatOption);
         // Focus the first option if there is one and show a message dependent on what options are present
         if (options.length) {
             options[0].focused = true;
-
             if (hasMoreResults) {
                 options.push({
                     text: `Viewing first ${options.length} results`,
@@ -804,67 +728,32 @@ class Combobox extends React.Component {
                     showLast: true,
                 });
             }
-        } else {
+        }
+        else {
             options.push({
-                text: this.props.allowAnyValue ? value : _.template(this.props.noResultsText)({value}),
+                text: this.props.allowAnyValue ? value : underscore_1.default.template(this.props.noResultsText)({ value }),
                 value: this.props.allowAnyValue ? value : '',
                 isSelectable: this.props.allowAnyValue,
                 isFake: true,
                 showLast: true,
             });
         }
-
-        this.setState((state) => {
+        const setValueState = (state) => {
             let shouldShowDropdown = state.isDropdownOpen;
-
             // If we don't have an empty value, show the dropdown.
             if (value.trim() !== '' && !shouldShowDropdown) {
                 shouldShowDropdown = true;
             }
-
             return {
                 currentValue: value,
                 currentText: value,
                 isDropdownOpen: shouldShowDropdown,
                 focusedIndex: 0,
-                options
+                options,
             };
-        }, this.resetClickAwayHandler);
-    }
-
-    /**
-     * Handle state changes for when a user clicks on an item in the dropdown
-     *
-     * @param  {String|Number} selectedValue
-     */
-    handleClick(selectedValue) {
-        this.deselectCurrentOption();
-
-        // Select the new item, set our new indexes, close the dropdown
-        // Unselect all other options
-        const newSelectedIndex = _(this.options).findIndex({value: selectedValue});
-        const currentlySelectedOption = _(this.options).findWhere({value: selectedValue});
-
-        // Get the scroll position of the currently selected value
-        this.scrollPosition = ReactDOM.findDOMNode(this.dropDown).scrollTop;
-
-        this.setState({
-            options: this.getTruncatedOptions(selectedValue),
-            selectedIndex: newSelectedIndex,
-            focusedIndex: newSelectedIndex,
-            currentValue: selectedValue,
-            currentText: get(currentlySelectedOption, 'text', ''),
-            isDropdownOpen: false,
-            hasError: get(currentlySelectedOption, 'hasError', false)
-        }, () => {
-            this.resetClickAwayHandler();
-
-            // Fire our onChange callback
-            this.initialValue = selectedValue;
-            this.props.onChange(selectedValue);
-        });
+        };
+        this.setState(setValueState, this.resetClickAwayHandler);
     }
-
     render() {
         if (this.props.hideUntilManuallyOpened && !this.state.isDropdownOpen) {
             return null;
@@ -872,67 +761,23 @@ class Combobox extends React.Component {
         const inputGroupClasses = {
             'input-group': true,
             'expensify-input-group': true,
-            open: this.state.isDropdownOpen
+            open: this.state.isDropdownOpen,
         };
         const inputGroupBtnClasses = {
             'input-group-btn': !this.props.bs4,
             'input-group-append': this.props.bs4,
-            open: this.state.isDropdownOpen
+            open: this.state.isDropdownOpen,
         };
-        const toggleBtnClasses = this.props.bs4
-            ? 'dropdown-toggle dropdown-toggle-split btn btn-outline-primary'
-            : 'dropdown-toggle btn btn-default';
-
-        return (
-            <div
-                className={cn(inputGroupClasses, this.props.extraClasses)}
-                onKeyDown={this.handleKeyDown}
-                role="presentation"
-            >
-                <input
-                    ref={ref => this.value = ref}
-                    type="text"
-                    className={cn(['form-control', {error: this.state.hasError}])}
-                    disabled={this.state.isDisabled}
-                    aria-label="..."
-                    onChange={this.performSearch}
-                    onKeyDown={this.closeDropdownOnTabOut}
-                    value={this.props.propertyToDisplay === 'value'
-                        ? _.unescape(this.state.currentValue)
-                        : _.unescape(this.state.currentText.replace(new RegExp(/&nbsp;/g), ''))}
-                    onFocus={this.openDropdown}
-                    autoComplete="off"
-                    placeholder={this.props.placeholder}
-                    tabIndex="0"
-                />
-                <div className={cn(inputGroupBtnClasses)}>
-                    <button
-                        type="button"
-                        className={cn(toggleBtnClasses, {error: this.state.hasError})}
-                        disabled={this.state.isDisabled}
-                        onClick={this.toggleDropdown}
-                        onKeyDown={this.closeDropdownOnTabOut}
-                        tabIndex="-1"
-                    >
-                        {!this.props.bs4 && <span className="caret" />}
-                        <span className="sr-only">Toggle Dropdown</span>
-                    </button>
-                    {this.state.isDropdownOpen && (
-                        <DropDown
-                            ref={ref => this.dropDown = ref}
-                            options={this.state.options}
-                            bs4={this.props.bs4}
-                            extraClasses={cn({'expensify-dropdown': true, show: this.props.bs4 && this.state.isDropdownOpen}, this.props.dropDownClasses)}
-                            onChange={this.handleClick}
-                        />
-                    )}
-                </div>
-            </div>
-        );
+        const toggleBtnClasses = this.props.bs4 ? 'dropdown-toggle dropdown-toggle-split btn btn-outline-primary' : 'dropdown-toggle btn btn-default';
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(inputGroupClasses, this.props.extraClasses), onKeyDown: this.handleKeyDown, role: "presentation" },
+            react_1.default.createElement("input", { ref: (ref) => (this.value = ref), type: "text", className: (0, classnames_1.default)(['form-control', { error: this.state.hasError }]), disabled: this.state.isDisabled, "aria-label": "...", onChange: this.performSearch, onKeyDown: this.closeDropdownOnTabOut, value: this.props.propertyToDisplay === 'value' ? underscore_1.default.unescape(this.state.currentValue) : underscore_1.default.unescape(this.state.currentText.replace(/&nbsp;/g, '')), onFocus: this.openDropdown, autoComplete: "off", placeholder: this.props.placeholder, tabIndex: "0" }),
+            react_1.default.createElement("div", { className: (0, classnames_1.default)(inputGroupBtnClasses) },
+                react_1.default.createElement("button", { type: "button", className: (0, classnames_1.default)(toggleBtnClasses, { error: this.state.hasError }), disabled: this.state.isDisabled, onClick: this.toggleDropdown, onKeyDown: this.closeDropdownOnTabOut, tabIndex: "-1" },
+                    !this.props.bs4 && react_1.default.createElement("span", { className: "caret" }),
+                    react_1.default.createElement("span", { className: "sr-only" }, "Toggle Dropdown")),
+                this.state.isDropdownOpen && (react_1.default.createElement(dropdown_1.default, { ref: (ref) => (this.dropDown = ref), options: this.state.options, bs4: this.props.bs4, extraClasses: (0, classnames_1.default)({ 'expensify-dropdown': true, show: this.props.bs4 && this.state.isDropdownOpen }, this.props.dropDownClasses), onChange: this.handleClick })))));
     }
 }
-
 Combobox.propTypes = propTypes;
 Combobox.defaultProps = defaultProps;
-
-export default Combobox;
+exports.default = Combobox;