Semantic-ui-react: Controlled Dropdown component does not clear selection when value is undefined

[Shooshte]

Bug Report

When using a Dropdown component setting value to undefined does not clear the dropdown menu.

Steps

import React, { Component } from "react";
import { render } from "react-dom";

import { Dropdown } from "semantic-ui-react";

const options = [
  {
    key: 1,
    text: 1,
    value: 1
  },
  {
    key: 2,
    text: 2,
    value: 2
  }
];

class DropdownExample extends Component {
  state = {
    selection: undefined
  };

  selectOption = (event, data) => {
    this.setState({
      selection: data.value
    });
  };

  clearOption = () => {
    this.setState({
      selection: undefined
    });
  };

  render() {
    return (
      <div style={{ padding: "10px" }}>
        <div>
          <Dropdown
            options={options}
            selection
            search
            onChange={this.selectOption}
          />
          <button onClick={() => this.clearOption()}>Clear</button>
        </div>
        <div>{`selection: ${this.state.selection}`}</div>
      </div>
    );
  }
}

render(<DropdownExample />, document.getElementById("root"));

1.) Mount the component
2.) Select one of the options
3.) Click the Clear button

(can be reproduced in the codesandbox linked below)

Expected Result

Clicking the button should default to an empty selection (the same thing that happens when the Component is first mounted).

Actual Result

The previously selected value is still rendered as dropdown text.

Version

"semantic-ui-react": "0.84.0",

Testcase

https://codesandbox.io/s/x9bzc?fontsize=14

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[Shooshte]

Another bug related to this - not sure if I should open a separate issue:

When you clear the value to undefined, then select the value showin in the dropdown the onChange callback does not trigger.

[thedeadferryman]

I think it is a kind of correct behaviour because passing undefined to a prop is equal to not passing that prop, what forces component to act as uncontrolled. Going further I need to note that any type of input presented in framework acts absolutely the same way.

If I thing in the right way, this issue

When you clear the value to undefined, then select the value showin in the dropdown the onChange callback does not trigger.

seems to be a consequence of first one because onChange is probably triggered only if component is controlled.

[Shooshte]

@thedeadferryman
Thanks for the clarification. When I think about it that way it makes sense 😎 .

As a workaround for this issue I have started passing a key for an option that does not exist - which works without errors, but seems like a hack/code smell. Is there another better practice?

Anyway since this is not a bug but expected behavior the issue can be close.

[thedeadferryman]

@Shooshte
No problem :metal:
It seems that there is no soluiton except this one. At least, passing null as prop what seems to be a solution also causes component to work as uncotrolled.

[layershifter]

When you're are passing undefined after defined value, the value should persist, see #3303 for more context.

It's how React does, https://codesandbox.io/s/l20mjn74zz

[badunius]

So there's no proper way to clear a Dropdown?

[MOTORIST]

value={filterValue || ''}