Semantic-ui-react: Dropdown: searchInput onChange fires Dropdown onChange as well

[mic4ael]

Bug Report

Steps

1. Create a Dropdown component
2. Override its searchInput so that it provides a custom onChange callback.

Expected Result

Typing inside of Dropdown.SearchInput should only trigger its onChange.

Actual Result

Typing triggers input's onChange first and then dropdown's onChange callbacks.

Version

0.82.3

Testcase

https://codesandbox.io/s/40mx54ppr9

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

[layershifter]

Thanks, awesome report! PR is coming.

[mic4ael]

Amazing work! You guys rock :guitar:

[layershifter]

Fixed in #3123, will come with the next release.

[mic4ael]

Just a question, you have overrided onSearchChange in your test, whereas I mentioned that it's
onChange that causes the problem. Is that correct?

wrapperShallow(
    <Dropdown
        onSearchChange={onSearchChange}
        options={options}
        search
        searchInput={{ onChange: onInputChange }}
    />,
)

[layershifter]

Yes, it's a correct change.

  <Dropdown
    searchInput={{ onChange: (e, { value }) => console.log('input onChange: ' + value) }}
    onChange={(e, { value }) => console.log('dropdown onChange:' + value)}
    onSearchChange={(e, { searchQuery }) => console.log('dropdown onSearchChange: ' + searchQuery)}
    options={[
      { text: 'text1', value: '1' },
      { text: 'text2', value: '2' },
    ]}
    closeOnChange
    search
    multiple
    selection
  />

See result:

onChange will be called only when a value will be selected.

The same code on master: