Semantic-ui-react: Input: when both `value` and `onChange` are set, will produce the `uncontrolled/controlled input` error

[wyemun]

Steps

Setting up an <Input/> as such

<Input
              fluid
              placeholder="Search by keywords. Press `Enter` to search."
              icon="search"
              disabled={isDisabled}
              value={query}
              onChange={this.onSearchFieldChange}
              onKeyDown={this.onSearchKeyDown}
              label={
                <Dropdown basic
                  value={queryColumn}
                  options={searchColumns}
                  onChange={this.onQueryColumnChange}
                />
              }
              labelPosition="right"
            />

Expected Result

Expected no react error thrown.

Actual Result

Console is logging the following error:

proxyConsole.js:56 Warning: Input is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

If anything at all, this should be the correct way of implementing both onChange and value according to https://fb.me/react-controlled-components

Version

0.71.3

[layershifter]

Please make a minimal codepen. I understand that the codepen uses production versions, but I want simply to copy-paste the code that causes warning.

Input has a state managed by AutoControlledComponent and I don't see cases when it pass wrong value.

[layershifter]

Closing for housekeeping.

[levithomason]

With a controlled component, the value must always be a string otherwise React will complain. Your query is likely not defined on the first render.

Note the default string in the docs you've linked:

this.state = {value: ''};