Merge pull request #1819 from pmyers88/autocomplete-handle-falsy-keys

Handle Falsy Keys in Autocomplete Component
old
Rubén Moya 2018-03-03 12:02:22 +01:00 committed by GitHub
commit 5ec952ad1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 9 deletions

View File

@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
import { isValuePresent } from '../utils/utils';
import { AUTOCOMPLETE } from '../identifiers.js';
import InjectChip from '../chip/Chip.js';
import InjectInput from '../input/Input.js';
@ -184,7 +185,7 @@ const factory = (Chip, Input) => {
query(key) {
let query_value = '';
if (!this.props.multiple && key) {
if (!this.props.multiple && isValuePresent(key)) {
const source_value = this.source().get(`${key}`);
query_value = source_value || key;
}

View File

@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
import { isValuePresent } from '../utils/utils';
import { INPUT } from '../identifiers';
import InjectedFontIcon from '../font_icon/FontIcon';
@ -159,13 +160,6 @@ const factory = (FontIcon) => {
this.inputNode.focus();
}
valuePresent = value => (
value !== null
&& value !== undefined
&& value !== ''
&& !(typeof value === 'number' && isNaN(value))
)
render() {
const { children, defaultValue, disabled, error, floating, hint, icon,
name, label: labelText, maxLength, multiline, required, role,
@ -180,7 +174,7 @@ const factory = (FontIcon) => {
[theme.withIcon]: icon,
}, this.props.className);
const valuePresent = this.valuePresent(value) || this.valuePresent(defaultValue);
const valuePresent = isValuePresent(value) || isValuePresent(defaultValue);
const inputElementProps = {
...others,

View File

@ -74,3 +74,10 @@ export const getAnimationModule = (animation, theme) => compose(
transformKeys(removeNamespace(animation)),
pickBy((v, k) => k.startsWith(animation)),
)(theme);
export const isValuePresent = value => (
value !== null
&& value !== undefined
&& value !== ''
&& !(typeof value === 'number' && isNaN(value))
);

View File

@ -13,6 +13,21 @@ class AutocompleteTest extends React.Component {
'EN-en': 'United States of America',
'EN-nz': 'New Zealand',
},
simpleMonth: 0,
monthsObject: {
0: 'January',
1: 'February',
2: 'March',
3: 'April',
4: 'May',
5: 'June',
6: 'July',
7: 'August',
8: 'September',
9: 'October',
10: 'November',
11: 'December',
}
};
handleFocus = (event) => {
@ -44,6 +59,10 @@ class AutocompleteTest extends React.Component {
this.setState({ simpleShowAll: value });
};
handleSimpleMonthChange = (value) => {
this.setState({ simpleMonth: parseInt(value, 10) });
};
render() {
return (
<section>
@ -89,6 +108,16 @@ class AutocompleteTest extends React.Component {
source={this.state.countriesArray}
value={this.state.simpleShowAll}
/>
<Autocomplete
hint="Months (Falsy object key example)"
label="Months (Falsy object key example)"
multiple={false}
onChange={this.handleSimpleMonthChange}
showSuggestionsWhenValueIsSet
source={this.state.monthsObject}
value={this.state.simpleMonth}
/>
</section>
);
}