bug(Field.PostalCodeAndCity): postalcode field doesn't display a red error border when error

[langz]

🐛 Bug Report

PostalCodeAndCity's postalcode field doesn't display a red error border when error

To Reproduce

Steps to reproduce the behavior:

https://codesandbox.io/p/sandbox/empty-firefly-7ppx4n?file=%2Fsrc%2FApp.tsx

Type in "1" in the postal code field, and tab to the next field.
You'll be presented with an error message, but no red/error border around the postal code field, to indicate which field that causes the error. Looking like:

Expected behavior

Reason for expecting a red/error border around the field that has the error is because all/most other <Field.X />-components behaves this way, having an error/red border, like:

• NationalIdentityNumber

• OrganizationNumber

• Email

[joakbjerk]

The culprit seems to be a check, inside the useDataValue hook, that sees if the component/hook is used inside a FieldBlock component, so any component inside a field block will not receive the red border-color on error. This affects the PhoneNumber component too.

Not sure about what the best approach to fix this would be 🙏

[snorrekim]

This has since been solved for some of the Field.Date and Field.String (https://github.com/dnbexperience/eufemia/pull/3081/files#diff-82c0dcb982ee31d1da123e9178b9a9b8a595e5278293b79374ebba6e3a35cbdb). But we will have to do so for all the Field types if we want to solve this issue for good.

And hasError is a bit of an odd name, it basically means, "this field has an error but you don't have an error message to show, so only add the red border". I think a better solution would be to either:

• Rename the error prop to errorMessage, and make hasError the main property used for deciding visuals.
• Send in an false as error to activate the styling, but not show a message
• Send in the error, but change hasError to isInFieldBlock and let the Field handle the visuals based on that info

[snorrekim]

I think I'll go for "Send in an false as error to activate the styling, but not show a message". That solves it for all Fields without needing to make any changes to their code.

[snorrekim]

It works, but technically the error prop is not supposed typed as a boolean.