Using parse/format with AutoCompleteArrayInput and ReferenceArrayInput

[estephan]

I'm using a ReferenceArrayInput with AutocompleteArrayInput as its child and using parse and format on the ReferenceArrayInput.
If the field already has a value, I cannot type into the autocomplete input for it to filter my results.
It seems to just take my first character and then just clear the filter value, meaning I cannot search on a string with more than one character.

Steps to reproduce:

Using this code sandbox:

1. Head to the post list page and to the edit page of the "Fusce massa lorem, pulvinar a posuere ut, accumsan ac nisi" post.
2. Go to the tags field on the "Miscellaneous" tab.
3. Try search for the "Rock" tag by typing "Roc" into the AutocompleteArrayInput.
4. Notice how the suggestions change to support your "R" filter value, but then quickly chnage back as if the filter value is cleared.

https://codesandbox.io/s/billowing-fire-zqytt

Other information:

There exists this other issue that happens to use the exact same components with the parse/format props. While that issue has been resolved, I feel that I might be missing something otherwise @Bnaya would have noticed this exact issue I'm reporting here.

I feel this issue could have to do with this line which clears the filter when input.value changes. And considering input.value is an array and it changes in my example format function (format={v => v && v.map(x => x._id)}) as I always return a new array, I think handleFilterChange(''); always gets called. But I haven't looked too much into this. Just a guess.

Environment

• React-admin version: 3.2.3
• React version: 16.13.0
• Browser: Chrome Version 79.0.3945.130

[ttlong3103]

Same issue here. Move format() to AutocompleteArrayInput may fix your problem

[estephan]

Not sure I understood exactly what you meant.

I removed the format prop from ReferenceArrayInput and added it to the child AutocompleteArrayInput.

As shown in the "Tags" input in the attached image, the input can't render the tag name.

[ttlong3103]

Oh, does each tag is an object rather than just the id. If so, you and I have the exact problem. My solution is this:

         <ReferenceArrayInput
          label='Taggings'
          source='labels'
          reference='labels'
          // map candidate's labels to ids string
          format={v => {
            for (let i = 0; i < v.length; i++) {
              if (typeof v[i] == 'object') {
                v[i] = v[i].id;
              }
            }
            return v; // return same reference
          }}
        >
          <AutocompleteArrayInput
            optionText='value'
            optionValue='id'
            translateChoice={false}
          />
        </ReferenceArrayInput>

Since v.map() will return a new reference which causes re-render and lose the filter (or I think so), you should return the same reference in format

[estephan]

When I saw this line I tried to change just the values of the elements in the array and not the reference of the array but that meant by the end of it, the value in the form was never the "parsed" value and always the "formatted" one.

If I simply load a ReferenceArrayInput and select the first option, this is the order that parse and format get called. And considering format changes the array (which I believe is input.value, the forms value changes and is no longer the parsed one.

[ttlong3103]

Did you try putting parse() in AutocompleteArrayInput instead of ReferenceArrayInput?
https://codesandbox.io/s/nifty-galois-cwr3d

[estephan]

@ttlong3103 I did try it. No luck.

[Kmaschta]

@estephan Your intuition was good, it was an issue with the dependency array of the filter reset effect.
I fixed it with #4653, it should be good for the next release :)