combo-box

v1.0.1arrow_drop_down
v1.0.1
v1.0.0
STATUS
Failing
DOWNLOADS
20
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
6 years ago
SIZE
N/A
Update hover style for the specified styleId.
1 contributor
Install combo-box as a package?
Copied
npm i @bit/tomlandau.belle.components.combo-box
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.cloud
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
chevron_left
chevron_right

Update hover style for the specified styleId.

Returns an object with properties that are relevant for the wrapper div.

Returns an object with properties that are relevant for the input box.

Returns an object with properties that are relevant for the wrapping div of the selected option.

Returns an object with properties that are relevant for the combo-box menu.

Default function used for filtering options.

ComboBox React Component.

This method will calculate the hint that should be present in comboBox at some point in time. Rules:

  1. If menu is not open hint is undefined
  2. If menu is open but there are no filteredOptions hint is undefined
  3. If if some option is highlighted hint is equal to its value
  4. If no option is highlighted but some value is present in input box hint is equal to value of first filteredOptions If user has typed some text in input box and there is a hint(according to above calculations), the starting of hint is replaced by the text input by user ( this is to make sure that case of letters in hint is same as that in input box value and overlap is perfect.) todo: simplify logic in method below

Generates the style-id & inject the focus & hover style.

Remove a component’s associated styles whenever it gets removed from the DOM.

Update focusedOptionIndex when an option is touched.

Triggers a change event after the user touched on an Option.

Update focusedOptionIndex to undefined on touch cancel.

Closed opened combo-box options and removed focusStyles on blur.

Set focused state when element is focused.

Open/ Close menu when create is clicked.

Update focusedOptionIndex for component when mouse enters an option.

Set focusedOptionIndex to undefined.

Update component value when an option is clicked.

Handle keyDown in input (when input is focused):

  1. ComboBox is closed and ArrowDown/ ArrowUp is pressed -> open the ComboBox
  2. ComboBox is opened and ArrowDown is pressed -> highlight next option
  3. ComboBox is opened and ArrowUp is pressed -> highlight previous option
  4. ComboBox is opened and ArrowRight is pressed -> value of hint is copied over to inputBox
  5. ComboBox is opened and Enter/ Tab is pressed -> update input value to value of option
  6. ComboBox is opened and Esc is pressed -> close ComboBox

Highlight next option when arrowDown key is pressed. Highlight first option if currently last option is focused.

Highlight previous option when arrowUp key is pressed. Highlight last option if currently first option is focused.

Update value of Input box to the value of highlighted option.

The function will return options (if any) who’s value is same as value of the combo-box input.

The function is called when user selects an option. Function will do following:

  1. Close the options
  2. Change value of input depending on whether its has value, defaultValue or valueLink property
  3. Call onUpdate props function

The function is called when user type/ paste value in the input box.

Returns the value of the child with a certain index.

The function is called when user inputs a value in the input box. This can be done by:

  1. typing/ pasting value into input box
  2. pressing arrowRight key when there is some hint in the input box

Function will do following:

  1. Open the options
  2. Change value of input depending on whether its has value, defaultValue or valueLink property
  3. Call onUpdate props function

Function to filter options using input value.

Help and resources