Show only an attribute, but save entire object (React Final Form + Downshift)

Question

this problem may have already been solved but the examples that I found did not help me much.

• downshift version:6.1.0
• node version:14.15.4
• npm version:6.14.10
• react version: 17.0.1

What you did: Tried to show an object attribute on input field, but i want save entire object

What happened: The object is saved well but I can't show only one property in the input

<Field
  name={`${name}.product`}
  items={productList}
  index={index}
  component={DownShiftInput}
  placeholder="Name"
/>;

const itemToString = item => {
  return item ? item : '';
};

const DownShiftInput = ({
  input,
  meta,
  placeholder,
  items,
  index,
  ...rest
}) => (
  <Control name={placeholder} my={4}>
    <FormLabel htmlFor={placeholder}>{placeholder}</FormLabel>
    <Downshift
      {...input}
      onInputValueChange={inputValue => {
        input.onChange(inputValue);
      }}
      itemToString={itemToString}
      selectedItem={input.value}
    >
      {({
        getInputProps,
        getItemProps,
        getLabelProps,
        isOpen,
        inputValue,
        highlightedIndex,
        selectedItem,
      }) => {
        const filteredItems = matchSorter(items, inputValue, {
          keys: ['name'],
          maxRanking: matchSorter.rankings.STARTS_WITH,
        });
        return (
          <div className="downshift" style={{ position: 'relative' }}>
            <Input
              {...getInputProps({
                name: input.name,
                placeholder,
              })}
            />
            {isOpen && !!filteredItems.length && (
              <div
                className="downshift-options"
                style={{
                  background: 'white',
                  position: 'absolute',
                  top: '100%',
                  left: 15,
                  right: 0,
                  zIndex: 4,
                }}
              >
                {filteredItems.map((item, index) => {
                  return (
                    <div
                      {...getItemProps({
                        key: item.id,
                        index,
                        item,
                        style: {
                          backgroundColor:
                            highlightedIndex === index ? 'lightgray' : 'white',
                          fontWeight: selectedItem === item ? 'bold' : 'normal',
                        },
                      })}
                    >
                      {item.name}
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        );
      }}
    </Downshift>
    <Error name={placeholder} />
  </Control>
);

Thanks!

Answer 1

The solution for the user lcordier42 on downshift github:

<Input {...getInputProps({ name: input.name, placeholder, value: selectedItem.name, })} />