react-super-select.js

import { bindAll,
         extend,
         filter,
         find,
         forIn,
         groupBy,
         head,
         includes,
         isArray,
         isEmpty,
         isEqual,
         isFunction,
         isNull,
         isNumber,
         isObject,
         isString,
         isUndefined,
         last,
         map,
         noop,
         omit,
         reduce,
         reject,
         uniqueId,
         values } from 'lodash';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

class ReactSuperSelect extends React.Component {
  constructor(props) {

    super(props);

    this.SEARCH_FOCUS_ID = -1;

    this.SELECTED_OPTION_REGEX = /r-ss-selected/;

    this.keymap = {
      down: 40,
      end: 35, // goto last option ?
      enter: 13,
      esc: 27,
      home: 36, // go to first option ?
      space: 32,
      tab: 9,
      up: 38
    };

    this.ariaRelevantKeydownCodes = values(this.keymap);

    this.lastUserSelectedOption = undefined;

    this._rssDOM = {};

    this.state = {

      ajaxError: false,

      controlId: this.props.controlId || uniqueId('rss_'),

      data: this._configureDataSource(this.props.dataSource),

      rawDataSource: this.props.dataSource,

      isOpen: false,

      focusedId: undefined,

      labelKey: this.props.optionLabelKey,

      lastOptionId: (isArray(this.props.dataSource) && (this.props.dataSource.length > 0)) ? this.props.dataSource.length - 1 : undefined,

      searchString: "",

      value: this._buildInitialValue(),

      valueKey: this.props.optionValueKey
    };

    bindAll(this, [
      'toggleDropdown',
      '_ariaGetActiveDescendentId',
      '_ariaGetListId',
      '_arrestScroll',
      '_broadcastChange',
      '_buildInitialValue',
      '_clearSearchString',
      '_clearSelection',
      '_closeOnKeypress',
      '_configureDataSource',
      '_defaultSearchFilter',
      '_deselectAction',
      '_fetchDataViaAjax',
      '_fetchNextPage',
      '_filterDataBySearchString',
      '_findArrayOfOptionDataObjectsByValue',
      '_focusCurrentFocusedId',
      '_focusDOMOption',
      '_focusRemovalButtons',
      '_focusTrigger',
      '_generateValueDisplay',
      '_getAjaxErrorMarkup',
      '_getDataSource',
      '_getDropdownContent',
      '_getFocusedOptionKey',
      '_getGroupHeadingMarkup',
      '_getNoResultsMarkup',
      '_getNormalDisplayMarkup',
      '_getLoadingMarkup',
      '_getOptionIndexFromTarget',
      '_getOptionsMarkup',
      '_getOptionValueFromDataAttr',
      '_getPagingLi',
      '_getSearchContent',
      '_getTagsDisplayMarkup',
      '_getTagMarkup',
      '_getTagRemoveIndex',
      '_getTemplatedOptions',
      '_getTypeSafeOptionValue',
      '_handleDocumentClick',
      '_handleKeyDown',
      '_handleSearch',
      '_isCurrentlySelected',
      '_isMultiSelect',
      '_isUserSearchTypingEvent',
      '_mapDataToOptionsMarkup',
      '_moveFocusDown',
      '_moveFocusUp',
      '_needsAjaxFetch',
      '_onDownKey',
      '_onEndKey',
      '_onEnterKey',
      '_onEscKey',
      '_onHomeKey',
      '_onMouseMove',
      '_onUpKey',
      '_pageFetchingComplete',
      '_removeAllOptionsInOptionIdRange',
      '_removeSelectedOptionByValue',
      '_removeTagKeyPress',
      '_removeTagClick',
      '_selectAllOptionsInOptionIdRange',
      '_selectAllOptionsToLastUserSelectedOption',
      '_selectFocusedOption',
      '_selectItemByValues',
      '_selectItemOnOptionClick',
      '_setFocusIdToSearch',
      '_setFocusOnOpen',
      '_setFocusToTagRemovalIfPresent',
      '_updateFocusedId'
    ]);
  }

  componentDidMount() {
    document.addEventListener('click', this._handleDocumentClick);
    document.addEventListener('touchstart', this._handleDocumentClick);

    if (!this.props.disabled && this.props.openOnMount) {
      this.setState({
        isOpen: true
      }, () => {
        if (this.props.focusOnMount && !isFunction(this.props.ajaxDataFetch)) {
          this._moveFocusDown();
        }
      });
    }
  }

  componentWillUnmount() {
    document.removeEventListener('click', this._handleDocumentClick);
    document.removeEventListener('touchstart', this._handleDocumentClick);
  }

  componentWillReceiveProps(nextProps) {
    let newState = {};

    if (!isUndefined(nextProps.optionLabelKey) && (nextProps.optionLabelKey !== this.props.optionLabelKey)) {
      newState.labelKey = nextProps.optionLabelKey;
    }

    if (!isUndefined(nextProps.optionValueKey) && (nextProps.optionValueKey !== this.props.optionValueKey)) {
      newState.valueKey = nextProps.optionValueKey;
    }

    if (!isEqual(this.props.dataSource, nextProps.dataSource)) {
      this.lastUserSelectedOption = undefined;

      const newValue = this.props.clearSelectedValueOnDataSourceChange ? [] : this.state.value;

      newState = extend(newState, {
        data: this._configureDataSource(nextProps.dataSource),
        rawDataSource: nextProps.dataSource,
        focusedId: undefined,
        value: newValue,
        lastOptionId: (isArray(nextProps.dataSource) && (nextProps.dataSource.length > 0)) ? nextProps.dataSource.length - 1 : undefined
      });
    }

    if (!isEqual(nextProps.initialValue, this.props.initialValue)) {
      newState.value = this._buildInitialValue(nextProps);
    }

    if (!isEmpty(newState)) {
      this.setState(newState, this._broadcastChange);
    }
  }

  componentDidUpdate(prevProps, prevState) {
	if (this.props.focusToSelectedValue && this.state.isOpen) {
		this._focusCurrentFocusedId();
	}

    if (this.state.isOpen !== prevState.isOpen) {
      var openStateCallback = this.state.isOpen ? this.props.onOpenDropdown : this.props.onCloseDropdown;
      openStateCallback();
    }
  }

  render() {
    const caratClass = classNames('carat', {
            'down': !this.state.isOpen,
            'up': this.state.isOpen
          }),
          clearSelectionLabelString = this.props.clearSelectionLabelString ? this.props.clearSelectionLabelString : this.props.clearSelectionLabelString,
          dropdownContent = this._getDropdownContent(),
          placeholderString = this.props.placeholder ? this.props.placeholder : this.props.placeholder,
          triggerClasses = classNames('r-ss-trigger', {
            'r-ss-open': this.state.isOpen,
            'r-ss-disabled': this.props.disabled,
            'r-ss-placeholder': this.state.value.length < 1
          }),
          triggerDisplayContent = this.state.value.length ? this._generateValueDisplay() : placeholderString,
          wrapClasses = classNames("r-ss-wrap", this.props.customClass, {
            'r-ss-expanded': this.state.isOpen
          });

    let clearSelectionButton = null;
    if (!isEmpty(this.state.value) && (this.props.clearable !== false)) {
      clearSelectionButton = (<button aria-label={clearSelectionLabelString} ref={(c) => {this._rssDOM.selectionClear = c }} name="clearSelection" type="button" className="r-ss-selection-clear" onClick={this._clearSelection} onKeyDown={this._clearSelection}>
                                <span />
                             </button>);
    }

    const overridableInputProps = omit(this.props.inputProps, [
      "className",
      "onBlur",
      "onKeyDown",
      "role",
      "aria-activedescendant",
      "aria-disabled",
      "aria-haspopup",
      "aria-controls",
      "aria-multiselectable",
      "tabIndex"
    ]);

    return (
      <div ref={(c) => {this._rssDOM.rssControl = c }} id={this.state.controlId} className={wrapClasses}>
        <div ref={(c) => {this._rssDOM.triggerDiv = c }}
           className={classNames(triggerClasses, this.props.inputProps.className)}
           onBlur={this.props.onBlur}
           onClick={this.toggleDropdown}
           onKeyDown={this._handleKeyDown}
           role="combobox"
           aria-activedescendant={this._ariaGetActiveDescendentId()}
           aria-disabled={this.props.disabled}
           aria-haspopup={true}
           aria-controls={this._ariaGetListId()}
           aria-label={placeholderString}
           aria-multiselectable={this._isMultiSelect()}
           tabIndex="0"
           {...overridableInputProps}>
            {triggerDisplayContent}
            {clearSelectionButton}
            <span ref={(c) => {this._rssDOM.carat = c }} className={caratClass}> </span>
        </div>
        {dropdownContent}
      </div>);
  }

  toggleDropdown() {
    if (this.props.disabled) {
      return;
    }

    const newState = {
          isOpen: !this.state.isOpen
        };

    if (this.state.isOpen) {
      extend(newState, {
        focusedId: undefined
      });
    }

    const wasClosed = !this.state.isOpen;

    this.setState(newState, () => {
      if (wasClosed) {
        this._setFocusOnOpen();
      }
    });
  }

  _ariaGetActiveDescendentId() {
    let ariaActiveDescendantId = null;
    const optionRef = this._getFocusedOptionKey();
    if (this._rssDOM[optionRef]) {
      ariaActiveDescendantId = this._rssDOM[optionRef].id;
    }
    return ariaActiveDescendantId;
  }

  _ariaGetListId() {
    return this.state.controlId + '_list';
  }

  _arrestEvent(event) {
    event.stopPropagation();
    event.preventDefault();
  }

  _arrestScroll(event) {
    if (this.props.forceDefaultBrowserScrolling) {
      return true;
    }

    let arrestScroll = false;
    const adjustedHeight = this._rssDOM.scrollWrap.scrollTop + this._rssDOM.scrollWrap.clientHeight;

    if (event.deltaY > 0) {
      if (adjustedHeight >= this._rssDOM.scrollWrap.scrollHeight) {
        arrestScroll = true;
      }
    } else if (this._rssDOM.scrollWrap.scrollTop <= 0) {
      arrestScroll = true;
    }

    if (arrestScroll) {
      this._arrestEvent(event);
    }
  }

  _broadcastChange() {
    let outputValue = this._isMultiSelect() ? this.state.value : head(this.state.value);
    outputValue = isEmpty(outputValue) ? undefined : outputValue;
    this.props.onChange(outputValue);
  }

  _buildInitialValue(props) {
    props = props || this.props;
    let initialValue = [];

    if (!isNull(props.initialValue) && !isUndefined(props.initialValue)) {
      initialValue = isArray(props.initialValue) ? props.initialValue : [props.initialValue];

      if (!this._isMultiSelect()) {
        initialValue = [head(initialValue)];
      }
    }

    return initialValue;
  }

  _clearSearchString() {
    this.setState({
      searchString: ""
    }, () => {
      this.props.onSearchInputChange(this.state.searchString);
      this._setFocusIdToSearch();
    });
  }

  _clearSelection(event) {
    if ((event.which === this.keymap.enter) || (event.which === this.keymap.space) || (event.type === "click")) {
      event.stopPropagation();
      this.setState({
        value: []
      }, () => {
        if (this.state.isOpen) {
          this._setFocusOnOpen();
        }
        this.lastUserSelectedOption = undefined;
        this._focusTrigger();
        this._broadcastChange();
        this.props.onClear();
      });
    }
  }

  _closeOnKeypress() {
    if (this.state.isOpen) {
      this.setState({
        isOpen: false,
        focusedId: undefined
      }, this._focusTrigger);
    }
  }

  _configureDataSource(dataSource) {
    if (isArray(dataSource)) {
     return dataSource;
    }

    if (isObject(dataSource)) {
      if (isArray(dataSource.collection)) {
        return dataSource.collection;
      }

      if (isFunction(dataSource.get)) {
        const collection = dataSource.get('collection');
        if (isArray(collection)) {
          return collection;
        }
      }
    }

    return [];
  }

  _deselectAction(value, keepControlOpen = false) {
    const shouldClose = (this.props.closeOnSelectedOptionClick && !keepControlOpen);
    if (!this.props.deselectOnSelectedOptionClick) {
      if (shouldClose) {
        this._closeOnKeypress();
      }
      return false;
    }
    const callback = shouldClose ? this._closeOnKeypress : noop;
    this._removeSelectedOptionByValue(value, callback);
  }

  _defaultSearchFilter(option) {
    const search = this.state.searchString.toLowerCase(),
          labelAsString = isString(option[this.state.labelKey]) ? option[this.state.labelKey] : option[this.state.labelKey].toString();

    return labelAsString.toLowerCase().indexOf(search) > -1;
  }

  _fetchDataViaAjax() {
    const self = this;

    if (this.IS_FETCHING_AJAX) {
        return;
    }
    this.IS_FETCHING_AJAX = true;
    this.props.ajaxDataFetch(this.state.rawDataSource).then((dataSourceFromAjax) => {
      this.IS_FETCHING_AJAX = false;
      self.setState({
        ajaxError: false,
        data: self._configureDataSource(dataSourceFromAjax),
        rawDataSource: dataSourceFromAjax
      }, () => {
        if (self.props.openOnMount && self.props.focusOnMount) {
          self._moveFocusDown();
        }
      });
    }, () => {
      this.IS_FETCHING_AJAX = false;
      self.setState({
        ajaxError: true,

        rawDataSource: []
      });
    });
  }

  _fetchNextPage() {
    if (this._needsAjaxFetch()) {
        return;
    }
    const self = this;
    this.props.pageDataFetch(this.state.rawDataSource).then((dataSourceFromPageFetch) => {
      self.setState({
        ajaxError: false,
        data: self._configureDataSource(dataSourceFromPageFetch),
        rawDataSource: dataSourceFromPageFetch,
        isFetchingPage: false
      });
    }, () => {
        self.setState({
          ajaxError: true
        });
    });
  }

  _filterDataBySearchString(data) {
    const self = this;

    let filterFunction = this._defaultSearchFilter;
    if (isFunction(this.props.customFilterFunction)) {
      filterFunction = (value, index, collection) => {
        return self.props.customFilterFunction.apply(self, [value, index, collection, self.state.searchString.toLowerCase()]);
      };
    }
    return filter(data, filterFunction);
  }

  _findArrayOfOptionDataObjectsByValue(value) {
    const valuesArray = isArray(value) ? map(value, this.state.valueKey) : [value];
    return reject(this.state.data, (item) => {
      return !includes(valuesArray, item[this.state.valueKey]) && !includes(valuesArray, parseInt(item[this.state.valueKey],10));
    });
  }

  _focusCurrentFocusedId() {
    if (this.state.focusedId < 0) {
      this._focusSearch();
      return;
    }

    this._focusDOMOption();
  }

  _focusDOMOption() {
    const optionRef = this._getFocusedOptionKey();
    if (this._rssDOM[optionRef]) {
      if (isFunction(this._rssDOM[optionRef].focus)) {
        this._rssDOM[optionRef].focus();
      }
    }
  }

  _focusSearch() {
    if (this._rssDOM.searchInput) {
      this._rssDOM.searchInput.focus();
    }
  }

  _focusRemovalButtons(event) {
    const triggerContainer = this._rssDOM.triggerDiv,
          buttons = triggerContainer.getElementsByTagName('button');

    let currentlyFocusedRemoveButtonIndex,
        nextButtonIndexToFocus;

    if (buttons.length) {
      for (let i=0; i< buttons.length; i++) {
        if (buttons[i] === document.activeElement) {
          currentlyFocusedRemoveButtonIndex = i;
          nextButtonIndexToFocus = event.shiftKey ? i-1 : i+1;
        }
      }
    }

    if (buttons[nextButtonIndexToFocus]) {
      this._arrestEvent(event);
      buttons[nextButtonIndexToFocus].focus();
    } else if(nextButtonIndexToFocus && (nextButtonIndexToFocus < 0)) {
      this._focusTrigger();
    } else if(buttons[0] && !isNumber(currentlyFocusedRemoveButtonIndex)) {
      this._arrestEvent(event);
      buttons[0].focus();
    }
  }

  _focusTrigger() {
    this._rssDOM.triggerDiv.focus();
  }

  _generateValueDisplay() {
    if (this.props.customSelectedValueTemplateFunction) {
      return this.props.customSelectedValueTemplateFunction(this.state.value);
    }

    if (!this.props.tags) {
      return this._getNormalDisplayMarkup();
    }
    return this._getTagsDisplayMarkup();
  }

  _getAjaxErrorMarkup() {
    const errorString = this.props.ajaxErrorString ? this.props.ajaxErrorString : this.ajaxErrorString;
    return (<li className="r-ss-dropdown-option error">
              <i ref={(c) => {this._rssDOM.errorDisplay = c }}>
                {errorString}
              </i>
            </li>);
  }

  _getDataSource() {
    let data = isArray(this.state.data) ? this.state.data : [];
    if (isString(this.state.searchString) && !isEmpty(this.state.searchString)) {
      data = this._filterDataBySearchString(data);
    }

    if (this.props.groupBy) {
      data = groupBy(data, this.props.groupBy);
    }

    return data;
  }

  _getDropdownContent() {
    if (!this.state.isOpen) {
      return null;
    }

    const searchContent = this._getSearchContent(),
          mouseMoveHandler = (this.props.pageDataFetch) ? this._onMouseMove : null,
          pagingLi = this.state.isFetchingPage ? this._getPagingLi() : null;

    return(
      <div ref={(c) => {this._rssDOM.dropdownContent = c }} className="r-ss-dropdown" onKeyDown={this._handleKeyDown}>
        {searchContent}
        <div ref={(c) => {this._rssDOM.scrollWrap = c }} className="r-ss-options-wrap" onMouseMove={mouseMoveHandler}>
          <ul className="r-ss-dropdown-options"
              ref={(c) => {this._rssDOM.dropdownOptionsList = c }}
              tabIndex="-1"
              id={this._ariaGetListId()}
              role="listbox"
              aria-expanded={this.state.isOpen}
              onWheel={this._arrestScroll}>
            {this._getOptionsMarkup()}
          </ul>
          {pagingLi}
        </div>
      </div>
    );
  }

  _getFocusedOptionKey() {
    return 'option_' + this.state.focusedId;
  }

  _getGroupHeadingMarkup(heading) {
    if (!heading) {
      return null;
    }

    const headingClasses = classNames("r-ss-option-group-heading", this.props.customGroupHeadingClass),
          headingKey = "heading_" + heading,
          headingMarkup = this.props.customGroupHeadingTemplateFunction ? this.props.customGroupHeadingTemplateFunction(heading) : heading;

    return(
      <li tabIndex="-1" className={headingClasses} key={headingKey} role="separator" aria-label={heading} aria-hidden={true}>
        {headingMarkup}
      </li>);
  }

  _getNoResultsMarkup() {
    let noResultsMarkup = (<i ref={(c) => {this._rssDOM.noResults = c; }}>{this.props.noResultsString}</i>);

    if (!isString(this.props.noResultsString)) {
      noResultsMarkup = (
        <div ref={(c) => {this._rssDOM.noResults = c; }}>
          {this.props.noResultsString}
        </div>
      );
    }

    return (<li className="r-ss-dropdown-option" tabIndex="-1">{noResultsMarkup}</li>);
  }

  _getNormalDisplayMarkup() {
    return map(this.state.value, (value, index) => {
      const selectedKey = "r_ss_selected_" + value[this.state.labelKey];
      if (this.props.customOptionTemplateFunction) {
        const valueDisplayKey = "value_display_" + index;
        return (
            <span key={valueDisplayKey}>
                {this.props.customOptionTemplateFunction(value)}
            </span>
        );
      }
      return (<span key={selectedKey} className="r-ss-selected-label">{value[this.state.labelKey]}</span>);
    });
  }

  _getLoadingMarkup() {
    const loaderClasses = this.props.customLoaderClass ? "r-ss-loader " + this.props.customLoaderClass : "r-ss-loader";
    return (<span ref={(c) => {this._rssDOM.loader = c }} className={loaderClasses}></span>);
  }

  _getOptionIndexFromTarget(targetLi) {
    return parseInt(targetLi.getAttribute('data-option-index'), 10);
  }

  _getOptionsMarkup() {
    if (this._needsAjaxFetch()) {
      this._fetchDataViaAjax();
      return this._getPagingLi();
    }

    if (this.state.ajaxError) {
      return this._getAjaxErrorMarkup();
    }

    const data = this._getDataSource();

    let options = [],
        optionsCount = 0;

    if (!isArray(data) && !isEmpty(data)) {
      forIn(data, (groupedOptions, heading) => {
        options.push(this._getGroupHeadingMarkup(heading));
        options = options.concat(this._getTemplatedOptions(groupedOptions, optionsCount));
        optionsCount = optionsCount + groupedOptions.length;
      });
    } else {
      options = this._getTemplatedOptions(data);
    }

    return options;
  }

  _getOptionValueFromDataAttr(optionNode) {
    let optionValue = optionNode.getAttribute('data-option-value');

    return this._getTypeSafeOptionValue(optionValue);
  }

  _getPagingLi() {
    return(<li key="page_loading" className="r-ss-page-fetch-indicator" tabIndex="-1">
            {this._getLoadingMarkup()}
          </li>);
  }

  _getSearchContent() {
    if (!this.props.searchable) {
      return null;
    }

    const clearSearchLabelString = this.props.clearSearchLabelString ? this.props.clearSearchLabelString : this.props.clearSearchLabelString,
          magnifierClass = this.props.customSearchIconClass ? this.props.customSearchIconClass : "r-ss-magnifier",
          searchPlaceholderString = this.props.searchPlaceholder ? this.props.searchPlaceholder : this.props.searchPlaceholder,
          searchAriaId = this.state.controlId + '_search',
          searchAriaIdLabel = searchAriaId + '_label';

    let clearSearch = null;
    if (isString(this.state.searchString) && !isEmpty(this.state.searchString)) {
      clearSearch = (<button aria-label={clearSearchLabelString} ref={(c) => {this._rssDOM.searchClear = c }} name="clearSearch" type="button" className="r-ss-search-clear" onClick={this._clearSearchString} onKeyDown={this._clearSearchString}>
                       <span />
                     </button>);
    }

    return(
      <div className="r-ss-search-wrap">
        <div className="r-ss-search-inner">
          <label ref={(c) => {this._rssDOM.searchInputLabel = c }} id={searchAriaIdLabel} className="r-ss-search-aria-label" htmlFor={searchAriaId}>{searchPlaceholderString}</label>
          <input ref={(c) => {this._rssDOM.searchInput = c }}
                 placeholder={searchPlaceholderString}
                 onClick={this._setFocusIdToSearch}
                 onBlur={this.props.onSearchInputBlur}
                 onChange={this._handleSearch}
                 value={this.state.searchString}
                 name={searchAriaId}
                 id={searchAriaId}
                 aria-labelledby={searchAriaIdLabel}
                 aria-autocomplete="list" />
          {clearSearch}
          <i className={magnifierClass}>search</i>
        </div>
      </div>
    );
  }

  _getTagsDisplayMarkup() {
    return map(this.state.value, (value) => {
      return this._getTagMarkup(value);
    });
  }

  _getTagMarkup(value) {
    const displayValue = value[this.state.valueKey],
          tagRemoveIndex = this._getTagRemoveIndex(displayValue);

    const label = value[this.state.labelKey],
          tagKey = 'tag_' + displayValue,
          buttonName = "RemoveTag_" + displayValue,
          tagWrapClass = this.props.customTagClass ? "r-ss-tag " + this.props.customTagClass : "r-ss-tag";

    let tagRemoveButtonLabelString = this.props.tagRemoveLabelString ? this.props.tagRemoveLabelString : this.props.tagRemoveLabelString;
    tagRemoveButtonLabelString = tagRemoveButtonLabelString + " " + label;

    return (
      <span className={tagWrapClass} key={tagKey}>
        <span className="r-ss-tag-label">{label}</span>
        <button aria-label={tagRemoveButtonLabelString} ref={(c) => {this._rssDOM[tagRemoveIndex] = c }} name={buttonName} type="button" className="r-ss-tag-remove" onClick={this._removeTagClick.bind(null, value)} onKeyDown={this._removeTagKeyPress.bind(null, value)}>
          <span />
        </button>
      </span>);
  }

  _getTagRemoveIndex(identifier) {
    return "tag_remove_" + identifier;
  }

  _getTemplatedOptions(data, indexStart) {

    indexStart = indexStart || 0;
    let options = this._mapDataToOptionsMarkup(data, indexStart);

    if (options.length === 0) {
      options = this._getNoResultsMarkup();
    }

    return options;
  }

  _getTypeSafeOptionValue(optionValue) {
    return (+optionValue + "" === optionValue) ? +optionValue : optionValue;
  }

  _handleDocumentClick() {
    const event = Array.prototype.slice.call(arguments)[0],
          isTargetStillInDOM = document.body.contains(event.target);

    if (!this._rssDOM.rssControl || (isTargetStillInDOM && !this._rssDOM.rssControl.contains(event.target))) {
      if (this.state.isOpen) {
        this.setState({
          isOpen: false,
          focusedId: undefined
        });
      }
    }
  }

  _handleKeyDown(event) {
    if (this._isUserSearchTypingEvent(event)) {
      return;
    }
    if (this.state.isOpen) {

      if (includes(this.ariaRelevantKeydownCodes, event.which)) {
        this._arrestEvent(event);
      }
    }

    switch(event.which) {
      case this.keymap.down:
        this._onDownKey(event);
        break;
      case this.keymap.end:
        this._onEndKey();
        break;
      case this.keymap.enter:
        this._onEnterKey(event);
        break;
      case this.keymap.esc:
        this._onEscKey();
        break;
      case this.keymap.home:
        this._onHomeKey();
        break;
      case this.keymap.space:
        this._onEnterKey(event); // delegate to enter
        break;
      case this.keymap.tab: // delegate to enter (selection) handler
        if (this.state.isOpen) {
          this._onEnterKey(event);
        } else {
          this._focusRemovalButtons(event);
        }
        break;
      case this.keymap.up:
        this._onUpKey(event);
        break;
    }
  }

  _handleSearch(event) {
    this._arrestEvent(event);
    this.setState({
      searchString: event.target.value
    }, () => {
      this.props.onSearchInputChange(this.state.searchString);
    });
  }

  _isCurrentlySelected(dataItem) {
    if (!isArray(this.state.value)) {
      return isEqual(this.state.value, dataItem);
    }
    return !!(find(this.state.value, dataItem));
  }

  _isMultiSelect() {
    return this.props.multiple || this.props.tags;
  }

  _isUserSearchTypingEvent(event) {
    if (!this._rssDOM.searchInput || (event.which === this.keymap.down) || ((event.which === this.keymap.up) && event.altKey) || (event.which === this.keymap.esc)) {
      return false;
    }
    return (event.target === this._rssDOM.searchInput);
  }

  _mapDataToOptionsMarkup(data, indexStart) {
    return map(data, (dataOption, index) => {
      index = indexStart + index;

      const indexRef = 'option_' + index,
            isDisabled = !!dataOption.disabled,
            isCurrentlySelected = this._isCurrentlySelected(dataOption),
            itemKey = "drop_li_" + dataOption[this.state.valueKey],
            ariaDescendantId = this.state.controlId + '_aria_' + indexRef,
            clickHandler = isDisabled ? noop : this._selectItemOnOptionClick.bind(null, dataOption),
            optionMarkup = isFunction(this.props.customOptionTemplateFunction) ? this.props.customOptionTemplateFunction(dataOption, this.state.searchString) : dataOption[this.state.labelKey],
            classes = classNames('r-ss-dropdown-option', {
              'r-ss-selected': isCurrentlySelected,
              'r-ss-disabled': isDisabled
            });

      return (
        <li ref={(c) => {this._rssDOM[indexRef] = c }}
            disabled={isDisabled}
            aria-disabled={isDisabled}
            id={ariaDescendantId}
            tabIndex="0"
            data-option-index={index}
            className={classes}
            aria-selected={isCurrentlySelected}
            key={itemKey}
            data-option-value={dataOption[this.state.valueKey]}
            onClick={clickHandler}
            role="option">
          {optionMarkup}
        </li>);
    });
  }

  _moveFocusDown() {
    if (this._needsAjaxFetch() && !this.props.searchable) {
      return;
    }
    let nextId;

    if (isUndefined(this.state.focusedId)) {
      if (this.props.searchable) {
        nextId = this.SEARCH_FOCUS_ID;
      } else {
        nextId = 0;
      }
    } else {
      nextId = (this.state.lastOptionId === this.state.focusedId) ? this.state.lastOptionId : this.state.focusedId + 1;
    }

    this._updateFocusedId(nextId);
  }

  _moveFocusUp() {
    let previousId;

    if (!isUndefined(this.state.focusedId) && (this.state.focusedId !== this.SEARCH_FOCUS_ID)) {
      if (this.state.focusedId === 0) {
        if (this.props.searchable) {
          previousId = this.SEARCH_FOCUS_ID;
        }
      } else {
        previousId = this.state.focusedId - 1;
      }
    }
    this._updateFocusedId(previousId);
  }

  _needsAjaxFetch() {
    return (isUndefined(this.state.rawDataSource) && isFunction(this.props.ajaxDataFetch));
  }

  _onDownKey(event) {
    if (!this.state.isOpen) {
      this.toggleDropdown();
      return;
    }

    this._moveFocusDown();
    if (this._isMultiSelect() && event.shiftKey) {
      this._selectFocusedOption(event.target, true);
    }
  }

  _onEndKey() {
    if (this.state.lastOptionId) {
      this._updateFocusedId(this.state.lastOptionId);
    }
  }

  _onEnterKey(event) {
    if (!this.state.isOpen) {
      this.toggleDropdown();
      return;
    }

    if (this._isMultiSelect() && event.shiftKey) {
      this._selectAllOptionsToLastUserSelectedOption(event.target);
      return;
    }

    const keepControlOpen = (this._isMultiSelect() && (event.ctrlKey || event.metaKey));

    this._selectFocusedOption(event.target, keepControlOpen);
  }

  _onEscKey() {
    this._closeOnKeypress();
  }

  _onHomeKey() {
    this._updateFocusedId(0);
  }

  _onMouseMove() {

    if (this._rssDOM.loader || !isEmpty(this.state.searchString) || !this._pageFetchingComplete()) {
      return;
    }

    const wrap = this._rssDOM.scrollWrap;

    if ((wrap.scrollTop + wrap.offsetHeight) >= wrap.scrollHeight) {
      this.setState({
        isFetchingPage: true
      }, this._fetchNextPage);
    }
  }

  _onUpKey(event) {
    if (event.altKey) {
      this._closeOnKeypress();
      return;
    }

    if (this.state.isOpen) {
      this._moveFocusUp();
      if (this._isMultiSelect() && event.shiftKey) {
        this._selectFocusedOption(event.target, true);
      }
    }
  }

  _pageFetchingComplete() {
    if (!isFunction(this.props.hasMorePages)) {
      return false;
    }
    return this.props.hasMorePages(this.state.rawDataSource);
  }

  _removeAllOptionsInOptionIdRange(from, to) {
    const valuePropsToReject = [],
          start = (from <= to) ? from : to,
          end = (to >= from) ? to : from;

    for (let i = start; i <= end; i++) {
      const refString = 'option_' + i,
            option = this._rssDOM[refString];
      if (this.SELECTED_OPTION_REGEX.test(option.getAttribute("class"))) {

        if (this.lastUserSelectedOption.getAttribute('data-option-value') !== option.getAttribute('data-option-value')) {
          valuePropsToReject.push(this._getOptionValueFromDataAttr(option));
        }
      }
    }

    const remainingSelected = reject(this.state.value, (opt) => {
        return includes(valuePropsToReject, opt[this.state.valueKey]);
      });

    this.setState({
      value: remainingSelected
    }, this._broadcastChange);
  }

  _removeSelectedOptionByValue(value, callback = noop) {
    const SelectedAfterRemoval = reject(this.state.value, (option) => {
                                 return option[this.state.valueKey] === value[this.state.valueKey];
                               });

    this.setState({
      value: SelectedAfterRemoval
    }, () => {
      callback();
      this._broadcastChange();
    });
  }

  _removeTagKeyPress(value, event) {
    const isEnterKey = event.which === this.keymap.enter,
          isSpaceKey = event.which === this.keymap.space;

    if (isEnterKey || isSpaceKey) {
      this._arrestEvent(event);
      this._removeSelectedOptionByValue(value, this._setFocusToTagRemovalIfPresent); // delegate to removal handler
    }
  }

  _removeTagClick(value, event) {
    this._arrestEvent(event);

    this._removeSelectedOptionByValue(value);
  }

  _selectAllOptionsInOptionIdRange(from, to) {
    const valuePropsToSelect = [],
          start = (from <= to) ? from : to,
          end = (to >= from) ? to : from;

    for (let i = start; i <= end; i++) {
      const refString = 'option_' + i,
            option = this._rssDOM[refString];
      if (!this.SELECTED_OPTION_REGEX.test(option.getAttribute("class"))) {
        valuePropsToSelect.push(this._getOptionValueFromDataAttr(option));
      }
    }

    const optionsToSelect = reduce(this.state.data, (memo, opt) => {
          if (includes(valuePropsToSelect, this._getTypeSafeOptionValue(opt[this.state.valueKey]))) {
            if (!opt.disabled) {
              memo.push(opt);
            }
          }
          return memo;
        }, []);
    this._selectItemByValues(optionsToSelect, true);
  }

  _selectAllOptionsToLastUserSelectedOption(eventTargetLi) {
    if (!this.lastUserSelectedOption) {
      this.lastUserSelectedOption = eventTargetLi;

      this._selectAllOptionsInOptionIdRange(0, this._getOptionIndexFromTarget(eventTargetLi));
      return;
    }

    const fromVal = this._getOptionIndexFromTarget(this.lastUserSelectedOption),
          to = this._getOptionIndexFromTarget(eventTargetLi);

    this.lastUserSelectedOption = eventTargetLi;

    if (this.SELECTED_OPTION_REGEX.test(eventTargetLi.getAttribute('class'))) {
      if (!this.props.deselectOnSelectedOptionClick) {
        return false;
      }
      this._removeAllOptionsInOptionIdRange(fromVal, to);
    } else {
      this._selectAllOptionsInOptionIdRange(fromVal, to);
    }
  }

  _selectFocusedOption(eventTargetLi, keepControlOpen) {
    const focusedOptionKey = this._getFocusedOptionKey();

    if (this._rssDOM[focusedOptionKey]) {

      if (this._rssDOM[focusedOptionKey].getAttribute("aria-disabled") === "true") {
        return false;
      }

      const optionValue = this._getOptionValueFromDataAttr(this._rssDOM[focusedOptionKey]);

      this.lastUserSelectedOption = eventTargetLi;

      if (this.SELECTED_OPTION_REGEX.test(this._rssDOM[focusedOptionKey].className)) {
        const optionFullFromValueProp = head(this._findArrayOfOptionDataObjectsByValue(optionValue));
        this._deselectAction(optionFullFromValueProp, keepControlOpen);
      } else {
        keepControlOpen = keepControlOpen || false;
        this._selectItemByValues(optionValue, keepControlOpen);
      }
    }
  }

  _selectItemByValues(value, keepControlOpen) {
    let objectValues = this._findArrayOfOptionDataObjectsByValue(value);

    const remainOpenAfterSelection = keepControlOpen || this.props.keepOpenOnSelection;

    if (this._isMultiSelect() || (remainOpenAfterSelection && this.state.value)) {
      objectValues = this.state.value.concat(objectValues);
    }

    const newState = {
      value: this._isMultiSelect() ? objectValues : [last(objectValues)]
    };

    if (this.props.searchable && this.props.clearSearchOnSelection) {
      extend(newState, {
        searchString: ""
      });
    }

    this.setState(newState, () => {
      if (!remainOpenAfterSelection) {
        this._closeOnKeypress();
      } else {
        this._updateFocusedId(parseInt(this.lastUserSelectedOption.getAttribute('data-option-index'), 10));
      }
      if (this.props.searchable && this.props.clearSearchOnSelection) {
        this.props.onSearchInputChange(this.state.searchString);
      }
      this._broadcastChange();
    });
  }

  _selectItemOnOptionClick(value, event) {
    this._arrestEvent(event);

    if (this._isMultiSelect() && event.shiftKey) {
      this._selectAllOptionsToLastUserSelectedOption(event.currentTarget);
      return;
    }
    const keepControlOpen = (this._isMultiSelect() && (event.ctrlKey || event.metaKey)),
          alreadySelected = this.SELECTED_OPTION_REGEX.test(event.currentTarget.getAttribute('class'));

    this.lastUserSelectedOption = event.currentTarget;

    if (alreadySelected) {
      this._deselectAction(value, keepControlOpen);
    } else {
      this._selectItemByValues(value[this.state.valueKey], keepControlOpen);
    }
  }

  _setFocusIdToSearch() {
    this._updateFocusedId(this.SEARCH_FOCUS_ID);
  }

  _setFocusOnOpen() {
    if (this.lastUserSelectedOption) {
      this._updateFocusedId(parseInt(this.lastUserSelectedOption.getAttribute('data-option-index'), 10));
    } else {
      this._moveFocusDown();
    }
  }

  _setFocusToTagRemovalIfPresent() {
    if (!this.props.tags || (this.state.value.length === 0)) {
      return false;
    }

    const firstValue = head(this.state.value)[this.state.valueKey],
          firstTag = this._rssDOM[this._getTagRemoveIndex(firstValue)];

    if (firstTag) {
      if (isFunction(firstTag.focus)) {
        firstTag.focus();
        return true;
      }
    }
    return false;
  }

  _updateFocusedId(id) {
    this.setState({
      focusedId: id
    });
  }
}

ReactSuperSelect.defaultProps = {
  clearable: true,
  clearSelectedValueOnDataSourceChange: false,
  closeOnSelectedOptionClick: true,
  deselectOnSelectedOptionClick: true,
  disabled: false,
  keepOpenOnSelection: false,
  multiple: false,
  openOnMount: false,
  focusOnMount: false,
  focusToSelectedValue: true,
  forceDefaultBrowserScrolling: false,
  searchable: false,
  tags: false,
  clearSearchOnSelection: false,
  inputProps: {},
  onBlur: noop,
  onSearchInputBlur: noop,
  onClear: noop,
  onCloseDropdown: noop,
  onOpenDropdown: noop,
  onSearchInputChange: noop,
  optionLabelKey: 'name',
  optionValueKey: 'id', // value this maps to should be unique in data source
  ajaxErrorString: 'An Error occured while fetching options',
  clearSelectionLabelString: 'Clear Selection',
  clearSearchLabelString: 'Clear Search Field',
  noResultsString: 'No Results Available',
  placeholder: 'Select an Option',
  searchPlaceholder: 'Search',
  tagRemoveLabelString: 'Remove Tag'
};

ReactSuperSelect.propTypes = {

  clearable: PropTypes.bool,

  clearSelectedValueOnDataSourceChange: PropTypes.bool,

  closeOnSelectedOptionClick: PropTypes.bool,

  deselectOnSelectedOptionClick: PropTypes.bool,

  disabled: PropTypes.bool,

  keepOpenOnSelection: PropTypes.bool,

  multiple: PropTypes.bool,

  openOnMount: PropTypes.bool,

  focusOnMount: PropTypes.bool,

  focusToSelectedValue: PropTypes.bool,

  forceDefaultBrowserScrolling: PropTypes.bool,

  searchable: PropTypes.bool,

  tags: PropTypes.bool,

  clearSearchOnSelection: PropTypes.bool,

  inputProps: PropTypes.object,

  customClass: PropTypes.string,

  customGroupHeadingClass: PropTypes.string,

  customSearchIconClass: PropTypes.string,

  customLoaderClass: PropTypes.string,

  customTagClass: PropTypes.string,

  onChange: PropTypes.func.isRequired,

  onClear: PropTypes.func,

  onCloseDropdown: PropTypes.func,

  onSearchInputChange: PropTypes.func,

  onOpenDropdown: PropTypes.func,

  onBlur: PropTypes.func,

  onSearchInputBlur: PropTypes.func,

  ajaxDataFetch: PropTypes.func,

  controlId: PropTypes.string,

  dataSource: PropTypes.oneOfType([
            PropTypes.arrayOf(PropTypes.object),
            PropTypes.object
          ]),

  initialValue: PropTypes.oneOfType([
            PropTypes.arrayOf(PropTypes.object),
            PropTypes.object
          ]),

  optionLabelKey: PropTypes.string,

  optionValueKey: PropTypes.string, // value this maps to should be unique in data source

  pageDataFetch: PropTypes.func,

  hasMorePages: PropTypes.func,

  groupBy: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.func,
            PropTypes.object
          ]),

  customGroupHeadingTemplateFunction: PropTypes.func,

  customFilterFunction: PropTypes.func,

  customOptionTemplateFunction: PropTypes.func,

  customSelectedValueTemplateFunction: PropTypes.func,

  ajaxErrorString: PropTypes.string,

  clearSelectionLabelString: PropTypes.string,

  clearSearchLabelString: PropTypes.string,

  noResultsString: PropTypes.oneOfType([        // any
                      PropTypes.string,
                      PropTypes.element
                   ]),

  placeholder: PropTypes.string,

  searchPlaceholder: PropTypes.string,

  tagRemoveLabelString: PropTypes.string
};

module.exports = ReactSuperSelect;