AutocompleteInput no property inputValueMatcher

[wmwart]

What you were expecting:
Expected that inputValueMatcher would work as in documentation.

What happened instead:
Does not work. There is no inputValueMatcher property in the AutocompleteInput.js code

Steps to reproduce:
Add inputValueMatcher = {(input, suggestion, getOptionText) => {}} to AutocompleteInput. Does not work.

Other information:
Please add the custom property onSuggestionSelected = suggestion => {}, which callback to this.onSuggestionSelected AutocompleteInput component.
If there is already a way to get selected suggestion, please share it.

Is it possible, when using the shouldRenderSuggestions property, to make requests to the server, only when shouldRenderSuggestions => true? This would help optimize not only the render suggestions, but also the responses from the server. What do you think?

Environment

• React-admin version: 2.7.0
• Last version that did not exhibit the issue (if applicable): 2.6.3

[djhi]

Sorry we actually removed this prop but did not update the documentation accordingly. Will do!

[wmwart]

what do you think about:

Please add the custom property onSuggestionSelected = suggestion => {}, which callback to this.onSuggestionSelected AutocompleteInput component.
If there is already a way to get selected suggestion, please share it.

Is it possible, when using the shouldRenderSuggestions property, to make requests to the server, only when shouldRenderSuggestions => true? This would help optimize not only the render suggestions, but also the responses from the server. What do you think?

[djhi]

You're describing solutions, not the actual issues you're having. Can you explain why you need that?

[wmwart]

Please add the custom property onSuggestionSelected = suggestion => {}, which callback to this.onSuggestionSelected AutocompleteInput component.

Real life example: address entry form.
The form consists of three fields (for simplicity): regionId, districtIdOrCityId, fullAdress. The regionIdOrCityId field filter must contain regionId, and the fullAdress is the sum of the regionId.name and districtIdOrCityId.name.

...
<ReferenceInput source="regionId" allowEmpty reference="Location" filter={{ type: 'REGION'}} onChange={this.changeAddress} {...props} >
    <RegionAutocompleteInput />     
</ReferenceInput>
<ReferenceInput source="districtIdOrCityId" allowEmpty reference="Location" filter={{ type: 'DISTRICT', regionId: formData.regionId}} onChange={this.changeAddress} {...props} >
    <DistrictAutocompleteInput />     
</ReferenceInput>
<DisabledInput source="fullAdress " validate={required()} fullWidth {...props} /> 
...

Since when choosing a regionId or districtIdOrCityId, nothing except id is available to me, I have to use a crutch.

type Location{
    id: ID!
    name: String
    shortType: String
}

I wrap the ReferenceInput component with a custom component, since inside ReferenceInput there are choices property, and save it to the global array, so that later onChange action can be done by regionsArr.find () to find the record I just selected and take its name.

...
const RegionAutocompleteInput = ( props ) => {
    const { choices } = props
    regionsArr= choices;
    
    return <AutocompleteInput optionText={"name"} suggestionComponent={AddressSuggestionComponent} shouldRenderSuggestions={(val) => { return val.trim().length > 2 }} {...props}/>

}
...

 changeAddress = (e, value, prev, prop) => {
      ...
        switch( prop ){
            case 'regionId':
                const regionChoise = regionsArr.find(choice => choice.id === value);

                change(REDUX_FORM_NAME, 'streetId', null);
                change(REDUX_FORM_NAME, 'houseNum', null);
                change(REDUX_FORM_NAME, 'houseCorp', null);
                change(REDUX_FORM_NAME, 'houseFlat', null);
                change(REDUX_FORM_NAME, 'regionId', cityChoise.regionId);
                change(REDUX_FORM_NAME, 'districtIdOrCityId', cityChoise.districtIdOrCityId);
                change(REDUX_FORM_NAME, 'addrManual', addressGenerate(value, null, null, null, null));
            break;
...

Why do I do all this if I just need onSuggestionSelected = suggestion => ()?

Is it possible, when using the shouldRenderSuggestions property, to make requests to the server, only when shouldRenderSuggestions => true?

To determine the correct addresses, the api of the federal address system is used. There are ALL addresses. For a suggestionComponent render with shouldRenderSuggestions = {(val) => {return val.trim (). Length> 2} everything works fine, but ...
always requests data from api. What affects the speed of work for the user.

[wmwart]

What is about: #2836 (comment) ?

[fzaninotto]

@wmwart I don't understand your last comment, please rephrase and be more specific. As for your own use case, if AutocompleteInput isn't the right component for the job, don't hesitate to write your own input component. React-admin won't handle all the use cases.

[wmwart]

#2836. The problem is not solved.

I am not hesitate. I believe that the proposed improvements fit your concept of a convenient and fast user interface.

[fzaninotto]

AutocompleteInput already does too many things - it's a pain to maintain. We won't add more features to it. For your use case, using Autosuggest directly and writing your own component is probably the best solution.

[djhi]

Fixed as we updated the documentation in V3