Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EuiSuperSelect - check for empty string before setting defaultValue #1319

Merged
merged 4 commits into from
Nov 20, 2018

Conversation

nreese
Copy link
Contributor

@nreese nreese commented Nov 17, 2018

If you provide EuiSuperSelect with an empty value '', then a react warning is displayed

screen shot 2018-11-16 at 5 47 05 pm

This PR verifies that value is not '' before setting the defaultValue

Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

Thanks for tacking this!

@@ -56,7 +56,7 @@ export default class extends Component {
];

this.state = {
value: this.options[1].value,
value: '',
Copy link
Contributor

Choose a reason for hiding this comment

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

Probably didn't mean to commit changes to the example?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I figured having an example with an empty initial selection would not hurt but I can revert the change if you would like

Copy link
Contributor

Choose a reason for hiding this comment

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

Understandable, though I'd almost rather have an example specifically for empty initials instead of applying to a current example.

CHANGELOG.md Outdated
@@ -6,6 +6,7 @@

- `EuiBasicTable` now converts the `EuiTableRowCell` `header` into `undefined` if it's been provided as a non-string node, hiding the header and preventing the node from being rendered as `[object Object]` on narrow screens ([#1312](https://github.com/elastic/eui/pull/1312))
- Fixed `fullWidth` size of `EuiComboBox`, a regression introduced in `4.7.0` ([#1314](https://github.com/elastic/eui/pull/1314))
- `EuiSuperSelect`, do not set value and defaultValue on input when EuiSuperSelect is passed empty string for `valueOfSelected` prop ([#1319](https://github.com/elastic/eui/pull/1319))
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
- `EuiSuperSelect`, do not set value and defaultValue on input when EuiSuperSelect is passed empty string for `valueOfSelected` prop ([#1319](https://github.com/elastic/eui/pull/1319))
- Fixed error when passing empty string as `value` prop for `EuiSuperSelect` ([#1319](https://github.com/elastic/eui/pull/1319))

@@ -33,7 +33,7 @@ export const EuiSuperSelectControl = ({
// React HTML input can not have both value and defaultValue properties.
// https://reactjs.org/docs/uncontrolled-components.html#default-values
let selectDefaultValue;
if (!value) {
if (!value && value !== '') {
Copy link
Contributor

Choose a reason for hiding this comment

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

Instead, let's change that original !value to value == null to avoid JavaScript's truthiness weirdness. This solves this '' use case but also any other, as value can be any type of React node like false or 0

Suggested change
if (!value && value !== '') {
if (value == null) {

Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

LGTM!

@nreese nreese merged commit cbfc994 into elastic:master Nov 20, 2018
@snide snide mentioned this pull request Nov 30, 2018
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants