saas-ui icon indicating copy to clipboard operation
saas-ui copied to clipboard

Custom base field + Validation rules causes focus lost upon input

Open vlad-tkachenko opened this issue 1 year ago • 1 comments

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.

vlad-tkachenko avatar Aug 14 '24 14:08 vlad-tkachenko