react-select-input

A simple combination of traditional HTML5 input and select.

v2 underway!

I've left this project inactive for way too long (v1.0.0 was launched a year after initial release!). Going through the code, there are a lot of stuff that could be improved. For all the users, the entire project will undergo a complete rewrite. Many of these changes will be breaking, leading up to the release of v2.

Head over to the Version 2 thread to know more and discuss!

Props Overview

InputSelect.defaultProps = {
  uniqueKey: 'react-select-input', //String
  style: null, //Object
  value: '', //String
  valueKey: 'value', //String
  labelKey: 'label', //String
  placeholder: 'Enter text', //String
  className: '', //String
  openUp: false, //Boolean
  disableEnter: true, //Boolean
  collapseOnBlur: true, //Boolean
  collapseOnEscape: true, //Boolean
  collapseOnSelect: true, //Boolean
  autoFocus: true, //Boolean
  clearable: true, //Boolean - NO EFFECT
  options: [], //Array
  onSelect: undefined, //Function (option)
  onClear: undefined, // Function
  onChange: undefined, //Function (event)
  onFocus: undefined, //Function (event)
  onBlur: undefined, //Function (event)
  onKeyUp: undefined, //Function (event)
  onKeyDown: undefined, //Function (event)
  noOptions: undefined //JSX
};

Options

| Prop | Type | Default | | ---------------- | :-----: | --------------------------------------------------------------------------------------------- | | uniqueKey | String | "react-select-input" Unique key for the component. | | style | Object | null Any custom inline styles that need to be passed. | | value | String | "" The value to either populate or control the component. | | valueKey | String | "value" The key from your options which you want to use as the value key. Should be unique. | | labelKey | String | "label" The key from your options for pretty display of options. | | placeholder | String | "Enter text" Placeholder for input. | | className | String | "" Custom classes apart from the default classes to the wrapper. | | openUp | Boolean | false Whether the select should work as a dropup or dropdown. | | disableEnter | Boolean | true If the default return key behaviour should be preserved. | | collapseOnBlur | Boolean | true Clicking outside the ref should collapse the select. | | collapseOnEscape | Boolean | true While focused, hitting Escape collapse the select. | | collapseOnSelect | Boolean | true Upon selection collapses the select. | | autoFocus | Boolean | true On mount, focus the input field. | | clearable | Boolean | true Show an icon to clear the entire select. | | options | Array | [ ] Array of options to use while rendering the list. | | noOptions | JSX | undefined JSX to render when no option matches search. |

Methods

| Prop | Parameters | Description | | --------- | :--------: | --------------------------------------------------------------------------------------------- | | onChange | event | Synthetic event of the input upon change. | | onSelect | option | The selected option.Gets triggered during both clicking and arrow navigation selection. | | onFocus | event | Synthetic event of the input upon focus. | | onBlur | event | Synthetic event of the input upon blur. Native function passed. | | onKeyUp | event | Synthetic event of the input upon keyUp. | | onKeyDown | event | Synthetic event of the input upon keyDown. | | onClear | none | A callback after clear if clearable. |

Copyright © 2018.