final-form / final-form/react-final-form-arrays

Loosing Focus While Typing On Custom Input Field

Open
#154 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.