Downshift in Reactjs - Menu dropdown only displaying selected item

Question

Im having trouble using Downshift, Initially I have all the menu options but once I select one option, thats the only one that shows in the menu the next time I click on it.

This is my current code, any feedback on whats causing that?

const dropdownItems = [
  { value: 'All' },
  { value: 'Database A' },
  { value: 'Database B' },
  { value: 'Database C' },
  { value: 'Database D' },
];
return (
  <Downshift itemToString={item => (item ? item.value : '')}>
    {({
      getMenuProps,
      getItemProps,
      getToggleButtonProps,
      getRootProps,
      isOpen,
      inputValue,
      selectedItem,
      highlightedIndex,
    }) => console.log(
      selectedItem === null ? dropdownItems[0].value : selectedItem.value,
    ) || (
        <Container {...getRootProps()}>
          <button {...getToggleButtonProps()}>
            {isOpen
              ? selectedItem === null
                ? dropdownItems[0].value
                : selectedItem.value
              : selectedItem === null
                ? dropdownItems[0].value
                : selectedItem.value}
          </button>
          {isOpen ? (
            <Menu {...getMenuProps()}>
              {dropdownItems
                .filter(
                  item => !inputValue || item.value.includes(inputValue),
                )
                .map((item, index) => (
                  <Item
                    {...getItemProps({
                      key: item.value,
                      index,
                      item,
                      style: {
                        fontWeight:
                          index === highlightedIndex
                            ? 'bold'
                            : null,
                      },
                    })}
                  >
                    {item.value}
                  </Item>
                ))}
            </Menu>
          ) : null}
        </Container>
      )
    }
  </Downshift>
);

it is your button tag, specifically the selectedItem === null conditional which is causing it. As soon as you select dbB once, selectedItem is not null anymore and it displays its value in the dropdown — Shivam Gupta, May 14 '19 at 17:28
@ShivamGupta , No that 'if else' statement is to fill the button with the last selected option so the user knows what database they're in, has nothing to do with the menu display — CatGirl19, May 14 '19 at 17:33
I removed the .filter , it was causing this problem. Thanks for the help, appreciate it! @ShivamGupta — CatGirl19, May 14 '19 at 17:42

score 0 · Accepted Answer · answered May 14 '19 at 17:41

.filter(item => !inputValue || item.value.includes(inputValue),)

To fix this problem, I removed the .filter, It was causing only the selected value to show in the dropdown.

This is the updated menu tag

 <Menu {...getMenuProps()}>
     {dropdownItems.map((item, index) => (
        <Item
            {...getItemProps({
                  key: item.value,
                 index,
                   item,
                      style: {
                  fontWeight:
                   index === highlightedIndex
                    ? 'bold'
                    : null,
                       },
                        })}
              >
          {item.value}
         </Item>
         ))}
          </Menu>

Downshift in Reactjs - Menu dropdown only displaying selected item

1 Answers1