How to create fully controlled dropdown in semantic-ui-react

Question

I want to create a fully controlled dropdown in order to use react-window to show really long list of items in it.

I've checked docs, and there is no any example of controlled dropdown with Dropdown.Item specified.

This is how my component looks like:

<Dropdown
  placeholder="Filter Posts"
  clearable={true}
  search={true}
  onChange={this.handleChange}
  text={tagOptions[1].value}
  value={tagOptions[1].value}
  onSearchChange={this.handleChange}
>
  <Dropdown.Menu>
    {tagOptions.map(option => (
      <Dropdown.Item key={option.value} {...option} onClick={this.handleItemClick} />
    ))}
  </Dropdown.Menu>
</Dropdown>;

I've encounter with 2 issues:

1. Initial value is not appears, I dig into the code, and saw that if i don't pass options property it won't find the given value, therefore, it will not be shown. I can use the text property, but it seems like a hack.
2. I need to implement handleItemClick by myself, and I see that there is logic in the original handleItemClick.

Any suggestions? did I missed something here?

Answer 1

I've able to hack it around with using ref on the dropdown and passing the original handleItemClick method.

The only downside for now is that keyboard nav is not works :\

Seem like it was not designed to be fully controlled.

https://codesandbox.io/s/ql3q086l5q