Default / Initial value for downshift

[rjuszkiewicz]

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>

[silviuaavram]

Hello @rjuszkiewicz have you tried using the initialSelectedItem prop?

[rjuszkiewicz]

@silviuavram , I've tried defaultSelectedItem as Downshift prop. <Downshift itemToString={item => (item ? item.value : '')} onSelect={this.props.onChange} defaultSelectedItem={} > But it's not working. I've seen initialSelectedItemprop in documentation, but I don't know how to use it. DownshiftProps doesn't contain initialSelectedItem.

Could you add an example how to use iinitialSelectedItem?

[silviuaavram]

can you please read our documentation? it's the reason why it is there. and it has all the information you needed to fix your problem in less than 5 minutes.

there is no defaultSelectedItem so no point in using that. you can use that as <Downshift onChange={this.handleChange} initialSelectedItem='Blue'> . I copied this line from our example in combobox.js. It will add Blue as the default selected item in the dropdown, and it will also add the value to the edit text.

Is it clear now? :)

[mglaman]

I know this is closed, but defaultSelectedItem is in your types.

https://github.com/downshift-js/downshift/blob/master/flow-typed/npm/downshift_v2.x.x.js.flow#L51

[silviuaavram]

Both defaultSelectedItem and initialSelectedItem are. They provide slightly different behaviours.

[angusd3v]

Hi @silviuaavram, I think you might have been mistaken here. defaultSelectedItem is in your typings and is set in some of your tests, but from the looks of it isn't actually made use of in the code anywhere. Might be confusing for consumers to see that the prop is available in the types but doesn't do anything

[silviuaavram]

Then it should probably be removed from the types. However, it is used in useCombobox and if you want that behaviour, then you can switch to using the hook, instead of Downshift.

Thanks for pointing this out!

[ks-himanshub]

In case if someone is looking to set initial value for input field you get use

initialInputValue regardless of available option in items

heres a code example

const {
    isOpen,
    getMenuProps,
    getInputProps,
    highlightedIndex,
    getItemProps,
    setInputValue,
  } = useCombobox({
    onInputValueChange({ inputValue }) {
      setSearchInputText(inputValue as string);
    },
    items
    itemToString(item) {
      return item ? item.title : "";
    },
    initialInputValue: "Hello World", // here it is
  });

[Shelagh-Lewins]

I can't see any mention of initialSelectedItem or defaultSelectedItem in the docs? It'd be very useful to know what is the difference between them and how to use them in useSelect, which has both. https://www.downshift-js.com/

[silviuaavram]

https://github.com/downshift-js/downshift/tree/master/src/hooks/useSelect#advanced-props

Initial means the value is used at initial render. Default means the value is used at initial render + after each selection / reset.

@Shelagh-Lewins

[Shelagh-Lewins]

Ah thanks! BTW I was looking at the docs that come up in a web search for Downshift: https://www.downshift-js.com/use-select/ Perhaps they should be removed or at least contain a link to the real docs? Or if they already contain a link, I didn't see it? When there is a special docs website I tend not to think of hunting up the READMEs in the source code.

[silviuaavram]

We can add links to the github page labelled as full documentation. Will keep this issue open. It needs to land in https://github.com/downshift-js