final-form / final-form/react-final-form-arrays
Loosing Focus While Typing On Custom Input Field
- Dominant language
- TypeScript
- Stars
- 210
- Forks
- 69
- PR merge metrics
- No merged PRs in 30d
Description
I'm using custom component to show the text input field nothing fancy just the basic component
```
const CustomTextField = ({ ...rest }) => {
return ;
};
```
When I'm trying to using this component inside *react-final-form-array* for some reason I'm loosing the focus when typing on the input field, I guess its because of the re-rendering.
```
{
return (
);
}}
placeholder="Last Name"
/>
```
here is the link to the full code on [codesandbox](https://codesandbox.io/s/react-final-form-field-arrays-forked-gguhd?file=/index.js:1961-2313)
As you can see the "First Name" works fine but the "Last Name" loosing focus while typing.
How can I fix this issue, any help is appreciated
Thanks
Contributor guide
Research direction
Start with the linked CodeSandbox, specifically index.js, and compare the working First Name field with the Last Name field inside react-final-form-array. Reproduce the focus loss while typing and identify what differs; done means the Last Name input retains focus and accepts successive keystrokes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 32/100