Merge pull request #1819 from pmyers88/autocomplete-handle-falsy-keys
Handle Falsy Keys in Autocomplete Componentold
commit
5ec952ad1d
|
@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { themr } from 'react-css-themr';
|
import { themr } from 'react-css-themr';
|
||||||
|
import { isValuePresent } from '../utils/utils';
|
||||||
import { AUTOCOMPLETE } from '../identifiers.js';
|
import { AUTOCOMPLETE } from '../identifiers.js';
|
||||||
import InjectChip from '../chip/Chip.js';
|
import InjectChip from '../chip/Chip.js';
|
||||||
import InjectInput from '../input/Input.js';
|
import InjectInput from '../input/Input.js';
|
||||||
|
@ -184,7 +185,7 @@ const factory = (Chip, Input) => {
|
||||||
|
|
||||||
query(key) {
|
query(key) {
|
||||||
let query_value = '';
|
let query_value = '';
|
||||||
if (!this.props.multiple && key) {
|
if (!this.props.multiple && isValuePresent(key)) {
|
||||||
const source_value = this.source().get(`${key}`);
|
const source_value = this.source().get(`${key}`);
|
||||||
query_value = source_value || key;
|
query_value = source_value || key;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { themr } from 'react-css-themr';
|
import { themr } from 'react-css-themr';
|
||||||
|
import { isValuePresent } from '../utils/utils';
|
||||||
import { INPUT } from '../identifiers';
|
import { INPUT } from '../identifiers';
|
||||||
import InjectedFontIcon from '../font_icon/FontIcon';
|
import InjectedFontIcon from '../font_icon/FontIcon';
|
||||||
|
|
||||||
|
@ -159,13 +160,6 @@ const factory = (FontIcon) => {
|
||||||
this.inputNode.focus();
|
this.inputNode.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
valuePresent = value => (
|
|
||||||
value !== null
|
|
||||||
&& value !== undefined
|
|
||||||
&& value !== ''
|
|
||||||
&& !(typeof value === 'number' && isNaN(value))
|
|
||||||
)
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { children, defaultValue, disabled, error, floating, hint, icon,
|
const { children, defaultValue, disabled, error, floating, hint, icon,
|
||||||
name, label: labelText, maxLength, multiline, required, role,
|
name, label: labelText, maxLength, multiline, required, role,
|
||||||
|
@ -180,7 +174,7 @@ const factory = (FontIcon) => {
|
||||||
[theme.withIcon]: icon,
|
[theme.withIcon]: icon,
|
||||||
}, this.props.className);
|
}, this.props.className);
|
||||||
|
|
||||||
const valuePresent = this.valuePresent(value) || this.valuePresent(defaultValue);
|
const valuePresent = isValuePresent(value) || isValuePresent(defaultValue);
|
||||||
|
|
||||||
const inputElementProps = {
|
const inputElementProps = {
|
||||||
...others,
|
...others,
|
||||||
|
|
|
@ -74,3 +74,10 @@ export const getAnimationModule = (animation, theme) => compose(
|
||||||
transformKeys(removeNamespace(animation)),
|
transformKeys(removeNamespace(animation)),
|
||||||
pickBy((v, k) => k.startsWith(animation)),
|
pickBy((v, k) => k.startsWith(animation)),
|
||||||
)(theme);
|
)(theme);
|
||||||
|
|
||||||
|
export const isValuePresent = value => (
|
||||||
|
value !== null
|
||||||
|
&& value !== undefined
|
||||||
|
&& value !== ''
|
||||||
|
&& !(typeof value === 'number' && isNaN(value))
|
||||||
|
);
|
||||||
|
|
|
@ -13,6 +13,21 @@ class AutocompleteTest extends React.Component {
|
||||||
'EN-en': 'United States of America',
|
'EN-en': 'United States of America',
|
||||||
'EN-nz': 'New Zealand',
|
'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) => {
|
handleFocus = (event) => {
|
||||||
|
@ -44,6 +59,10 @@ class AutocompleteTest extends React.Component {
|
||||||
this.setState({ simpleShowAll: value });
|
this.setState({ simpleShowAll: value });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
handleSimpleMonthChange = (value) => {
|
||||||
|
this.setState({ simpleMonth: parseInt(value, 10) });
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<section>
|
<section>
|
||||||
|
@ -89,6 +108,16 @@ class AutocompleteTest extends React.Component {
|
||||||
source={this.state.countriesArray}
|
source={this.state.countriesArray}
|
||||||
value={this.state.simpleShowAll}
|
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>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue