combo-box
v1.0.1arrow_drop_downUpdate 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:
- If menu is not open hint is undefined
- If menu is open but there are no filteredOptions hint is undefined
- If if some option is highlighted hint is equal to its value
- 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):
- ComboBox is closed and ArrowDown/ ArrowUp is pressed -> open the ComboBox
- ComboBox is opened and ArrowDown is pressed -> highlight next option
- ComboBox is opened and ArrowUp is pressed -> highlight previous option
- ComboBox is opened and ArrowRight is pressed -> value of hint is copied over to inputBox
- ComboBox is opened and Enter/ Tab is pressed -> update input value to value of option
- 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:
- Close the options
- Change value of input depending on whether its has value, defaultValue or valueLink property
- 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:
- typing/ pasting value into input box
- pressing arrowRight key when there is some hint in the input box
Function will do following:
- Open the options
- Change value of input depending on whether its has value, defaultValue or valueLink property
- Call onUpdate props function
Function to filter options using input value.