Skip to content

Fixed clear button not showing when external input value is passed.#3497

Merged
thompsongl merged 10 commits intoelastic:masterfrom
ashikmeerankutty:fix/searchbar
Jun 4, 2020
Merged

Fixed clear button not showing when external input value is passed.#3497
thompsongl merged 10 commits intoelastic:masterfrom
ashikmeerankutty:fix/searchbar

Conversation

@ashikmeerankutty
Copy link
Copy Markdown
Contributor

@ashikmeerankutty ashikmeerankutty commented May 17, 2020 •
edited
Loading

Summary

Fixes #3488

Replaced usage of displayValue with a new inputValue prop.

Before
Screen Cast 2020-05-17 at 7 08 10 PM

After
Screen Cast 2020-05-17 at 7 16 00 PM

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
Copy link
Copy Markdown

kibanamachine commented May 17, 2020

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 thompsongl self-requested a review May 26, 2020 21:59
thompsongl
thompsongl reviewed May 27, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@thompsongl thompsongl left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want to keep the ability of EuiFieldSearch to be an uncontrolled component, which means allowing consumers the option to provide defaultValue rather than value.

The code as it was was almost correct, but it needs to check props.value as well as the value of the actual input element here:
(https://github.com/elastic/eui/pull/3497/files#diff-8b595829e37edfabf542f269c6d7036aL222-L223)

I think it could be done using the ref

@ashikmeerankutty
Copy link
Copy Markdown
Contributor Author

ashikmeerankutty commented Jun 1, 2020

The code as it was was almost correct, but it needs to check props.value as well as the value of the actual input element here:

I tried this method but it was not working in case of the initial render as the input element doesn't have a value.

thompsongl
thompsongl suggested changes Jun 1, 2020
View reviewed changes
@ashikmeerankutty
Copy link
Copy Markdown
Contributor Author

ashikmeerankutty commented Jun 2, 2020

@thompsongl Thanks for the suggestion. Updated changes 👍

@thompsongl
Copy link
Copy Markdown
Contributor

thompsongl commented Jun 2, 2020

Thanks, @ashikmeerankutty. I'm going to do some more manual testing with this to make sure side effects were introduced.

@thompsongl
Copy link
Copy Markdown
Contributor

thompsongl commented Jun 3, 2020

jenkins test this

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jun 3, 2020

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

@thompsongl
Copy link
Copy Markdown
Contributor

thompsongl commented Jun 4, 2020

jenkins test this

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jun 4, 2020

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

@thompsongl thompsongl merged commit 33d87de into elastic:master Jun 4, 2020
@thompsongl thompsongl mentioned this pull request Jun 29, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@thompsongl thompsongl thompsongl approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

clear query button inconsistently displayed for search / EuiSearchBarProps

3 participants

@ashikmeerankutty @kibanamachine @thompsongl