downshift-js/downshift

Default / Initial value for downshift

Open

#665 opened on Feb 11, 2019

View on GitHub
 (12 comments) (1 reaction) (0 assignees)JavaScript (11,761 stars) (980 forks)batch import
docshelp wanted

Description

I'm using downshift 3.0.0

How to set the initial default value ?

My code:

            <Downshift
                itemToString={item => (item ? item.value : '')}
                onSelect={this.props.onChange}
            >
                {({
                      getInputProps,
                      getItemProps,
                      getMenuProps,
                      isOpen,
                      inputValue,
                      highlightedIndex,
                      selectedItem
                  }) => (
                    <div className="max-width-252">
                        <CustomInput getInputProps={getInputProps} labelText={labelText}/>
                        <div>
                            {isOpen
                                ? items
                                    .filter(item => !inputValue || item.value.includes(inputValue))
                                    .map((item, index) => (
                                        <option
                                            {...getItemProps({
                                                key: item.value,
                                                index,
                                                item,
                                                style: {
                                                    backgroundColor:
                                                        highlightedIndex === index ? 'lightgray' : 'white',
                                                    fontWeight: selectedItem === item ? 'bold' : 'normal',
                                                },
                                            })}
                                        >
                                            {item.value}
                                        </option>
                                    ))
                                : null}
                        </div>
                    </div>
                )}
            </Downshift>

Contributor guide