Skip to main content

Simple Dropdown

Allows creating a simple dropdown with custom options list.

simple dropdown

Usage

In order to be used, the SimpleDropdown has to be imported:

import {SimpleDropdown} from 'sabre-ngv-UIComponents/advancedDropdown/components/SimpleDropdown';

Next you need to prepare list of dropdown options, a method for updating list with information which option was chosen and any other optional properties you need. Example options list:

import {Option} from 'sabre-ngv-UIComponents/advancedDropdown/interfaces/Option';

const dropdownOptions: Option[] = [
    {label: 'Option 1', value: 'option1'},
    {label: 'Option 2', value: 'option2'}
]

Then SelectWidget can be used as you want to:

<SimpleDropdown
    options={this.dropdownOptions}
    onChange={this.onSelectionChange}
/>

Properties

The following properties can be defined for simple dropdown component:

Property Description

isMulti (optional)

Controls if component can handle multiple or one option. Default set to false.

isSearchable (optional)

Decides if component will let search through its options content. Default set to false.

leftIcon (optional)

Sets left icon image.

rightIcon (optional)

Sets right icon image.

rightIconOpen (optional)

Sets right icon image when dropdown opened.

minCharactersForSearch (optional)

Minimum amount of characters required for search mechanism to trigger, default set to 9.

closeOnChange (optional)

Decides if chosen option closes dropdown, default set to true.

mandatory (optional)

Disables ability to unmark checked option, default set to true.

optionRenderer (optional)

Function responsible for displaying options in dropdown.

isFocusOnFirstOption (optional)

Sets focus on first option in dropdown.

simpleStyle (optional)

Switches between simple raw styled dropdown and advanced styled, default set to true.

isFocusOnMainInput (optional)

Sets focus on main input.

onChange (optional)

Function invoked when option gets changed.

placeholder (optional)

Placeholder text for SimpleDropdown input.

options

List of items shown in dropdown.

hideSearchPlaceholder (optional)

Decides if search placeholder should be hidden.

hideSearchIcon (optional)

Decides if search icon should be hidden.

onBlur (optional)

Handle blur events on the control.

onFocus (optional)

Handle focus events on the control.