MultiSelectFilterField.js

import React from 'react';
import PropTypes from 'prop-types';
import css from './MultiSelect.css';

class MultiSelectFilterField extends React.Component {
  static propTypes = {
    ariaLabelledBy: PropTypes.string,
    atSmallMedia: PropTypes.bool,
    backspaceDeletes: PropTypes.bool,
    disabled: PropTypes.bool,
    getInputProps: PropTypes.func,
    inputRef: PropTypes.object,
    internalChangeCallback: PropTypes.func,
    onBlur: PropTypes.func,
    onFocus: PropTypes.func,
    onRemove: PropTypes.func,
    optionsLength: PropTypes.number,
    placeholder: PropTypes.string,
    removeItem: PropTypes.func,
    selectedItems: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.arrayOf(PropTypes.string),
      PropTypes.arrayOf(PropTypes.object)
    ]),
    setHighlightedIndex: PropTypes.func,
  }

  handleInputKeyDown = (event) => {
    const {
      atSmallMedia,
      internalChangeCallback,
      removeItem,
      onRemove,
      optionsLength,
      selectedItems,
    } = this.props;

    if (event.keyCode === 8 && event.target.value.length === 0) { // backspace
      if (this.props.backspaceDeletes && !atSmallMedia) {
        removeItem(selectedItems[selectedItems.length - 1], internalChangeCallback);
        onRemove(selectedItems[selectedItems.length - 1]);
      }
    }
    if (event.keyCode === 36) { // Home
      this.props.setHighlightedIndex(0);
    }
    if (event.keyCode === 35) { // End
      this.props.setHighlightedIndex(optionsLength - 1);
    }
  }

  render() {
    const {
      ariaLabelledBy,
      getInputProps,
      onFocus,
      onBlur,
      placeholder,
      inputRef,
      disabled,
      ...rest
    } = this.props;

    return (
      <input
        {...getInputProps({
          'aria-labelledby': rest['aria-labelledby'] || ariaLabelledBy,
          'type': 'text',
          'ref': inputRef,
          'onKeyDown': this.handleInputKeyDown,
          onFocus,
          onBlur,
          placeholder,
          'className': css.multiSelectFilterField,
          disabled,
        })}
      />
    );
  }
}

export default MultiSelectFilterField;