samrith-s/react-select-input

A component to work as a combination of free-form input and a select.

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.

react-select-input's Issues

Not able to fetch the css files on installing the module.

I did not see the css file in the node modules folder for react-select-input upon installation.

🚸 React Select Input - v2.0.0

The release of v1.0.0 of this package has been very delayed, apologies for that.

Considering the package is still being used by some people and is getting regular downloads, getting a head-start on the second version is only necessary.

Why?

The second version will be a complete rewrite of the package. In the current version, the package was written very casually. Simple stuff like PropTypes were ignored in order to get the package out as quick as possible.

Version 2 aims to rectify these discrepancies, and make the component compatible with future versions of React.

What's in the new version?

There will be some breaking changes in terms of methods and properties both. Right now, the entire functionality is written in one file. The focus on maintainability and scalability, coupled with better documentation and warnings in dev mode.

• onKeyUp and onKeyDown methods will be deprecated in favour of onKeyPress
• Custom rendering for options
• openUp improvements
• disableEnter to be removed
• inputProps to add props directly to the input tag
• Native support for debouncing/throttling
• Asynchronous options support

Additionally

In v1.0.1, ESLint, Prettier and lint rules were added. v2.0.0 plans to build the entire code-base on it, something which should have been done from the start.

There will be tests written using Enzyme, and proper coverage provided.

The docs are also going to be written from scratch. That being said, the entire code will be documented, to enable contributors to easily understand the code. A lot more usage and code examples will be created.