downshift-js/downshift

Default / Initial value for downshift

Ouverte

#665 ouverte le 11 févr. 2019

 (12 commentaires) (1 réaction) (0 personne assignée)JavaScript (980 forks)batch import
docshelp wanted

Métriques du dépôt

Stars
 (11 761 étoiles)
Métriques de merge PR
 (Métriques PR en attente)

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>

Guide contributeur