Custom base field + Validation rules causes focus lost upon input

[vlad-tkachenko]

Description

When custom form with custom base field is used in conjunction with validation rules then field focus can get lost upon field error highlighting.

Link to Reproduction

https://codesandbox.io/p/sandbox/spring-cache-r9tk99?workspaceId=19bea74b-e53f-4ef9-935c-654638886526

Steps to reproduce

Given

Given custom form with custom base field is used
  And field has validation rules, such as `required: true`

Scenario 1

When user enters a value
 And uses backspace to clear the value

Then validation triggers
 And red border appears around invalid field
 And field immediately loses the focus

Scenario 2

When user clicks on the field again
 And start typing

Then after first entered character field loses focus again
 And red border disappears around the field

Expected result

Focus should stay on the field, regardless of the validation result.

Saas UI Version

2.8.8

Chakra UI Version

2.8.2

Browser

Google Chrome 127.0.6533.100

Operating System

• [ ] macOS
• [X] Windows
• [ ] Linux

Additional Information

Base field used in the reproduction is taken from the official documentation https://saas-ui.dev/docs/components/forms/form

Issue can also be reproduced with resolvers, though I haven't created a specific repro for that.

[linear[bot]]

SUI-516 Custom base field + Validation rules causes focus lost upon input

[Pagebakers]

This is really weird, I looked into it but can't pin point why its happening yet. Any idea?

[Pagebakers]

OK my suspicion was correct, an extra useMemo was required to prevent re-rendering the base field.