Fix <AutocompleteInput> should not use matchSuggestion when in a <ReferenceInput>
#8956
Conversation
…`<ReferenceInput>`
|
This was something I was utilising, I'm using firestore as my db and fetching the data then filtering client side and it was very useful, is there some other way I should be achieving this using the reference input? |
|
@slax57 here's my code if it helps to know what I was trying to achieve import React from 'react';
import {AutocompleteInput} from 'react-admin';
const MyAutoCompleteInput = props => {
return (
<AutocompleteInput
{...props}
filterToQuery={() => ''}
matchSuggestion={(filter, suggestion) => {
return (
suggestion[props.optionText].toLowerCase().indexOf(filter) !== -1
);
}}
/>
);
};
export default MyAutoCompleteInput; |
|
@moulie415 Yes, if you'd like to enable client-side filtering, you need to provide |
|
@slax57 thank you for the help, in case anyone else happens to be in my scenario I achieved the functionality I wanted by removing the ReferenceInput, transferring the props I was using for the ReferenceInput to MyAutoCompleteInput and my code ended up looking like this import React from 'react';
import {AutocompleteInput, useGetList} from 'react-admin';
const MyAutoCompleteInput = props => {
const {data} = useGetList(props.reference, {
pagination: {perPage: props.perPage || 200, page: props.page || 1},
});
return (
<AutocompleteInput
{...props}
choices={data?.map(item => {
return {id: item.id, [props.optionText]: item[props.optionText]};
})}
filterToQuery={() => ''}
matchSuggestion={(filter, suggestion) => {
return (
suggestion[props.optionText]
?.toLowerCase()
.indexOf(filter?.toLowerCase()) !== -1
);
}}
/>
);
};
export default MyAutoCompleteInput; |
|
Hey team, I've a lot of ReferenceInput across my application using the AutocompleteInput component. Every single autocomplete stop work except for the ones that uses data={CHOICES}. I notice that using the package This is our dependecies list: "dependencies": { |
|
@wcmatheusoliveira it would probably be more helpful to see a code sample of how you're using ReferenceInput with AutoComplete input |
|
@wcmatheusoliveira I'm not sure about the structure of you customers data but if for example your customer object contained a "customerName" that you wanted to display in the drop down then if you wanted to use my example above then your could do use it like this <MyAutoCompleteInput
label="Customer"
source="customerId"
reference="customers"
optionText="customerName"
/>For your use case you may not want to do what I did with the filterToQuery and matchSuggestion props though |
|
@wcmatheusoliveira Since you are an Enterprise customer you have access to our dedicated support desk. |
Problem
When provided with a
matchSuggestionand used in a<ReferenceInput>,<AutocompleteInput>does actually do the filtering twice: once immediately client-side, and then once server-side.The client-side filtering does not make much sense because it's done only on a subset of the data, and besides it leads to UI flickering when the server-side results arrive.
Solution
Actually this is a bug, we shouldn't call
getSuggestions()when used inside a reference, at all.We already do this to disable MUI's Autocomplete default filtering fn, so I just extended this behavior to
getSuggestions().I also had to adapt the error message warning the user that they can't use
optionTextwithoutmatchSuggestion, to only trigger when not used in a reference. Indeed, in a reference,matchSuggestionshould never be called, as it is used for client-side filtering only.