[RFR] Fix AutocompleteInput

src/i18n/messages.js

@@ -27,6 +27,9 @@ export default {
             not_found: 'Not Found',
         },
         input: {
+            autocomplete: {
+                none: 'None',
+            },
             file: {
                 upload_several:
                     'Drop some files to upload, or click to select one.',

src/mui/input/AutocompleteInput.js

@@ -81,29 +81,37 @@ export class AutocompleteInput extends Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        if (
-            this.props.input.value !== nextProps.input.value ||
-            !isEqual(this.props.choices, nextProps.choices)
-        ) {
+        if (!isEqual(this.props.choices, nextProps.choices)) {
+            return;
+        }
+
+        if (this.props.input.value !== nextProps.input.value) {
             this.setSearchText(nextProps);
         }
     }
 
     setSearchText(props) {
-        const { choices, input, optionValue } = props;
+        const { choices, input, optionValue, translate } = props;
 
         const selectedSource = choices.find(
             choice => get(choice, optionValue) === input.value
         );
-        const searchText = selectedSource && this.getSuggestion(selectedSource);
+        const searchText =
+            (selectedSource && this.getSuggestion(selectedSource)) ||
+            translate('aor.input.autocomplete.none');
         this.setState({ searchText });
     }
 
     handleNewRequest = (chosenRequest, index) => {
-        if (index !== -1) {
-            const { choices, input, optionValue } = this.props;
-            input.onChange(choices[index][optionValue]);
+        const { allowEmpty, choices, input, optionValue } = this.props;
+        let choiceIndex = allowEmpty ? index - 1 : index;
+
+        // The empty item is always at first position
+        if (allowEmpty && index === 0) {
+            return input.onChange('');
         }
+
+        input.onChange(choices[choiceIndex][optionValue]);
     };
 
     handleUpdateInput = searchText => {
@@ -123,6 +131,22 @@ export class AutocompleteInput extends Component {
             : choiceName;
     }
 
+    addAllowEmpty = choices => {
+        const { allowEmpty, translate } = this.props;
+
+        if (allowEmpty) {
+            return [
+                {
+                    value: '',
+                    text: translate('aor.input.autocomplete.none'),
+                },
+                ...choices,
+            ];
+        }
+
+        return choices;
+    };
+
     render() {
         const {
             choices,
@@ -143,10 +167,13 @@ export class AutocompleteInput extends Component {
         }
         const { touched, error } = meta;
 
-        const dataSource = choices.map(choice => ({
-            value: get(choice, optionValue),
-            text: this.getSuggestion(choice),
-        }));
+        const dataSource = this.addAllowEmpty(
+            choices.map(choice => ({
+                value: get(choice, optionValue),
+                text: this.getSuggestion(choice),
+            }))
+        );
+
         return (
             <AutoComplete
                 searchText={this.state.searchText}
@@ -173,6 +200,7 @@ export class AutocompleteInput extends Component {
 
 AutocompleteInput.propTypes = {
     addField: PropTypes.bool.isRequired,
+    allowEmpty: PropTypes.bool.isRequired,
     choices: PropTypes.arrayOf(PropTypes.object),
     elStyle: PropTypes.object,
     filter: PropTypes.func.isRequired,

src/mui/input/AutocompleteInput.spec.js

@@ -44,6 +44,26 @@ describe('<AutocompleteInput />', () => {
         assert.equal(wrapper.state('searchText'), 'foo');
     });
 
+    it('should use the input parameter value as the initial state and input searchText when value is empty', () => {
+        const wrapper = shallow(
+            <AutocompleteInput
+                {...defaultProps}
+                allowEmpty
+                input={{ value: '' }}
+                choices={[{ id: 2, name: 'foo' }]}
+            />
+        );
+        const AutoCompleteElement = wrapper.find('AutoComplete').first();
+        assert.equal(
+            AutoCompleteElement.prop('searchText'),
+            'aor.input.autocomplete.none'
+        );
+        assert.equal(
+            wrapper.state('searchText'),
+            'aor.input.autocomplete.none'
+        );
+    });
+
     it('should pass choices as dataSource', () => {
         const wrapper = shallow(
             <AutocompleteInput
@@ -62,6 +82,26 @@ describe('<AutocompleteInput />', () => {
         ]);
     });
 
+    it('should add an empty choice when allowEmpty is true', () => {
+        const wrapper = shallow(
+            <AutocompleteInput
+                allowEmpty
+                {...defaultProps}
+                choices={[
+                    { id: 'M', name: 'Male' },
+                    { id: 'F', name: 'Female' },
+                ]}
+                options={{ open: true }}
+            />
+        );
+        const AutoCompleteElement = wrapper.find('AutoComplete').first();
+        assert.deepEqual(AutoCompleteElement.prop('dataSource'), [
+            { value: '', text: 'aor.input.autocomplete.none' },
+            { value: 'M', text: 'Male' },
+            { value: 'F', text: 'Female' },
+        ]);
+    });
+
     it('should use optionValue as value identifier', () => {
         const wrapper = shallow(
             <AutocompleteInput