saas-js/saas-ui

Field: isInvalid prop not respected

bhainesva opened this issue · 1 comments

bhainesva commented

Description

When I passed isInvalid={true} to a <Field /> component I expected the form element to have aria-invalid set to true and the label to have data-invalid set to true as described in the documentation: https://saas-ui.dev/docs/components/forms/field/props#props.

Instead, nothing seemed to happen.
image

The properties are handled correctly when the input becomes invalid by violating a validation rule.

Link to Reproduction

https://codesandbox.io/p/sandbox/saas-field-isinvalid-9md4t9?file=%2Fsrc%2Findex.tsx%3A18%2C27

Steps to reproduce

  1. Go to https://codesandbox.io/p/sandbox/saas-field-isinvalid-9md4t9?file=%2Fsrc%2Findex.tsx%3A18%2C27
  2. Open inspector
  3. See that data-invalid/aria-invalid attributes are not set on the elements rendered using the Field component. Compare to the raw Chakra <Input /> element which does correctly set the attribute.

Saas UI Version

2.8.1

Chakra UI Version

2.8.2

Browser

Firefox 124.0.2 (64-bit)

Operating System

  • macOS
  • Windows
  • Linux

Additional Information

No response