Spied input value as a state variable in EuiFieldSearch

[anishagg17]

Summary

Fixes: #2860

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile
- [ ] Checked in IE11 and Firefox

• Props have proper autodocs
  - [ ] Added documentation examples
  - [ ] Added or updated jest tests
  - [ ] Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[thompsongl]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3270/

[thompsongl]

After clicking the 'x' clear button, the text does get removed, but the button remains. The button should also hide after it is clicked.

[anishagg17]

fixed the issue

[thompsongl]

Two more cases where the clear button gets out of sync with the input value:

1. When an empty input has its value set dynamically, no clear button is shown
2. When an input with a value set, and that value is then set to '' dynamically, the clear button remains visible.

[anishagg17]

I tried both the cases that you mentioned

by changing this to set the value to 'search' and '' respectively for both the cases without the regard of input e.target.value and both worked fine.

eui/src-docs/src/views/form_controls/field_search.js

Line 11 in 02d5a4c

setValue(e.target.value);

Can you give a code overview and let me know if i am doing something wrong?

[thompsongl]

The value updates I mentioned happen when the value prop is changed from outside the component. For example:

export default () => {
  const [value, setValue] = useState('');

  const onChange = e => {
    setValue(e.target.value);
  };

  return (
    <>
    <button onClick={() => setValue('outside')>Set to outside</button>
    <EuiFieldSearch
      value={value}
      onChange={onChange}
      isClearable={true}
    />
    </>
  )
}

Clicking the button will result in the prop value and state value of EuiFieldSearch to be out of sync.

[anishagg17]

Sir, since the problem arises when no value prop is supplied to the component, I managed to utilize the state variable in that case to fix the issue,

[thompsongl]

jenkins test this

The latest update appears to fix the issue case and the regressions introduced moving from props to state.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3270/

[thompsongl]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3270/

[thompsongl]

Thanks for working through this, @anishagg17!