Dropdown: allowAdditions: Can't type in Dropdown after removing an item

mrigdon-zz commented 6 years ago

✖ CSS ISSUES → Post on https://github.com/Semantic-Org/Semantic-UI

✖ USAGE QUESTIONS → Use these dedicated resources: Docs - http://react.semantic-ui.com Chat - https://gitter.im/Semantic-Org/Semantic-UI-React SO - https://stackoverflow.com/questions/tagged/semantic-ui-react?sort=votes

✔ BUGS → This form is required:

Steps

Create dropdown:

class TagsField extends React.PureComponent {
state = { tags: [] }; 

handleChange = (e, { value }) => {
this.setState({ tags: value });
};

render() {
const { tags } = this.state;
const { label, placeholder } = this.props;

return (
  <div className="field tags-field">
    <label>{label}</label>
    <Dropdown
      options={tags.map(t => ({ text: t, value: t }))}
      multiple
      fluid
      placeholder={placeholder}
      search
      selection
      allowAdditions
      value={tags}
      onChange={this.handleChange}
    />
  </div>
)
}
}

Add a few items
When you delete an item by hitting backspace, the cursor is still in the input and I can still type (this is the intended behavior)
When you delete an item by clicking the x icon, the cursor disappears from the input, and I can no longer type to add more tags (this is the unwanted behavior).

Expected Result

When I click to remove an item, I want to maintain the ability to keep typing and add more. It should be the exact same behavior as hitting backspace for my app.

Actual Result

I can't type and add more tags unless I click out of the Dropdown and back in it.

Version

0.77.0

Testcase

[Fork, update, and replace this pen to show the bug]: https://codesandbox.io/s/2l3n74j9y

welcome[bot] commented 6 years ago

👋 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.

layershifter commented 6 years ago

Please add test case on codesandbox. As I see, you're using PureComponent, it will not handle state updates.

Semantic-Org / Semantic-UI-React