How to set null value for AutocompleteInput/ReferenceInput? - admin-on-rest

Question

I AutocompleteInput wrapped ReferenceInput. In my case One Project has many Accounts. On edit account page I set project from available and save.
<ReferenceInput source="project_id" reference="projects" allowEmpty filterToQuery={searchText => ({ query_content: searchText })}>
<AutocompleteInput optionText="title" />
</ReferenceInput>
And now I need to set null for value project_id. It can even button which I could place near AutocompleteInput, but I don't know how set value straight to redux. Preferably I would like to avoid special http-request to API to reset this field.
Thanks!

Answer 1

i just took AutocompleteInput and append to it button to clear field. and call NullableAutocompleteInput. then also as earlier paste to ReferenceInput
<ReferenceInput source="field_id" reference="resources" allowEmpty filterToQuery={searchText => ({ query_title: searchText })}>
<NullableAutocompleteInput optionText={(choice) => optionRenderer(choice, 'Resource', 'title')} />
</ReferenceInput>
and whole code component
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AutoComplete from 'material-ui/AutoComplete';
import BackspaceIcon from 'material-ui/svg-icons/content/backspace';
import IconButton from 'material-ui/IconButton';
import {FieldTitle} from 'admin-on-rest';
import {translate} from 'admin-on-rest';
export class NullableAutocompleteInput extends Component {
handleNewRequest = (chosenRequest, index) => {
if (index !== -1) {
const { choices, input, optionValue } = this.props;
input.onChange(choices[index][optionValue]);
}
}
getSuggestion(choice) {
const { optionText, translate, translateChoice } = this.props;
const choiceName = typeof optionText === 'function' ? optionText(choice) : choice[optionText];
return translateChoice ? translate(choiceName, { _: choiceName }) : choiceName;
}
clearData() {
this.props.input.onChange(null);
}
render() {
const {
choices,
elStyle,
filter,
input,
isRequired,
label,
meta: { touched, error },
options,
optionValue,
resource,
setFilter,
source,
} = this.props;
const selectedSource = choices.find(choice => choice[optionValue] === input.value);
const dataSource = choices.map(choice => ({
value: choice[optionValue],
text: this.getSuggestion(choice),
}));
return (
<div>
<AutoComplete
searchText={selectedSource && this.getSuggestion(selectedSource)}
dataSource={dataSource}
floatingLabelText={<FieldTitle label={label} source={source} resource={resource} isRequired={isRequired} />}
filter={filter}
onNewRequest={this.handleNewRequest}
onUpdateInput={setFilter}
openOnFocus
style={elStyle}
errorText={touched && error}
{...options}
/>
<IconButton onTouchTap={this.clearData.bind(this)} tooltip="Clear Data" tooltipPosition="top-right">
<BackspaceIcon color='grey' hoverColor='black'/>
</IconButton>
</div>
);
}
}
NullableAutocompleteInput.propTypes = {
addField: PropTypes.bool.isRequired,
choices: PropTypes.arrayOf(PropTypes.object),
elStyle: PropTypes.object,
filter: PropTypes.func.isRequired,
input: PropTypes.object,
isRequired: PropTypes.bool,
label: PropTypes.string,
meta: PropTypes.object,
options: PropTypes.object,
optionElement: PropTypes.element,
optionText: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
]).isRequired,
optionValue: PropTypes.string.isRequired,
resource: PropTypes.string,
setFilter: PropTypes.func,
source: PropTypes.string,
translate: PropTypes.func.isRequired,
translateChoice: PropTypes.bool.isRequired,
};
NullableAutocompleteInput.defaultProps = {
addField: true,
choices: [],
filter: AutoComplete.fuzzyFilter,
options: {},
optionText: 'name',
optionValue: 'id',
translateChoice: true,
};
export default translate(NullableAutocompleteInput);