Rerender component after change value and lost focus

[Dobroeutro1]

Describe the issue and the actual behavior

Hello. I faced such problem. After entering the value in the input, my focus disappears. As a result of debugging, I found that the reason is the re-rendering of the input component after entering one character. Could you tell me what is the reason for this behavior.

I also noticed that this behavior appears if you build the project in webpack production mode. There is no such problem in development mode.

Describe the expected behavior

I expect focus to be saved when entering a value in an input

Provide steps to reproduce this issue

Please check the browsers where the issue is seen

• Chrome
• Chrome (Android)
• Safari (OSX)
• Safari (iOS)
• Firefox
• Firefox (Android)

[s-yadav]

I suspect some additional thing is happening on your parent component. most likely you are breaking rule of reconciliation, can't say to confirm with the provided code.

[Dobroeutro1]

Nothing else happens in my parent component. It simply renders the PatternFormat, sets up the state, and handles the state change.

[s-yadav]

It would be easy for me to tell the reason if you can provide some repro link.

• Also can you confirm, if something similar is not happening in your case.
  Losing focus on input when using a Bootstrap input label #785

Also, can you tell which version are you using?

[hemantgogia09]

Same thing is happening with me only in webpack production. I am using 5.3.1.