ArrayInput: Adding a line doesn't focus the first inputs if it's an AutocompleteInput #7643

fzaninotto · 2022-05-05T10:30:43Z

What you were expecting:

When a user presses the AddItemButton on a SimpleFormIterator inside an ArrayInput, the first input of the new line is focused

What happened instead:

The first input is focused only if it's a TextInput. For an AutocompleteInput, the focus goes on the second input.

Enregistrement.de.l.ecran.2022-05-05.a.12.32.31.mov

Steps to reproduce:

I added a story to demonstrate the problem:

react-admin/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx

Lines 66 to 92 in 77b526a

    
           const BookEditWithAutocomplete = () => { 
        
               return ( 
        
                   <Edit 
        
                       mutationMode="pessimistic" 
        
                       mutationOptions={{ 
        
                           onSuccess: data => { 
        
                               console.log(data); 
        
                           }, 
        
                       }} 
        
                   > 
        
                       <SimpleForm> 
        
                           <ArrayInput source="authors" fullWidth> 
        
                               <SimpleFormIterator> 
        
                                   <AutocompleteInput 
        
                                       source="role" 
        
                                       choices={[ 
        
                                           { id: 'head_writer', name: 'Head Writer' }, 
        
                                           { id: 'co_writer', name: 'Co-Writer' }, 
        
                                       ]} 
        
                                   /> 
        
                                   <TextInput source="name" /> 
        
                               </SimpleFormIterator> 
        
                           </ArrayInput> 
        
                       </SimpleForm> 
        
                   </Edit> 
        
               ); 
        
           };

test it online at https://react-admin-storybook-plcbp0yhi-marmelab.vercel.app/?path=/story/ra-ui-materialui-input-arrayinput--autocomplete-first

Environment

React-admin version: v4
Last version that did not exhibit the issue (if applicable): v3
React version: 17
Browser: Chrome

djhi · 2022-05-23T15:20:40Z

Actually, we have the same issue with some other components such as the DateInput. That can be seen on the simple example (create a post, add a backlink)

fzaninotto added the bug label May 5, 2022

fzaninotto assigned fzaninotto and unassigned fzaninotto May 5, 2022

djhi mentioned this issue May 6, 2022

Fix SimpleFormIterator Should Focus Its First Input #7650

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ArrayInput: Adding a line doesn't focus the first inputs if it's an AutocompleteInput #7643

ArrayInput: Adding a line doesn't focus the first inputs if it's an AutocompleteInput #7643

ArrayInput: Adding a line doesn't focus the first inputs if it's an AutocompleteInput #7643

ArrayInput: Adding a line doesn't focus the first inputs if it's an AutocompleteInput #7643

Comments