Fluentui: No red border when a text field is invalid

[HeinPauwelyn]

Environment Information

• __Package version(s)__: @microsoft/sp-office-ui-fabric-core = 1.7.1
• __Browser and OS versions__: Chrome on Windows 10

Actual behavior

I've a required text field and a required date picker. See code below:

<TextField
    label="Text"
    required
    value=""
/>
<DatePicker
    isRequired
    label="Date"
    value=""
/>

Both got a difference way to show that there is an error on that field when the field has been unfocused: The text field don't has a red border in contract to the date picker that has a red border when it has been unfocused. See this code pen

Expected behavior

The same behavior for the text fields like the date pickers: A red border when the text field is invalid when unfocused.

Priorities and help requested:

• Are you willing to submit a PR to fix? No
• Requested priority: Low

[aftab-hassan]

@ecraig12345 DatePicker shows a red border for three scenarios - invalidInputErrorMessage, isOutOfBoundsErrorMessage and isRequiredErrorMessage.

TextField only shows the red border for errorMessage

Could you confirm if we would like to add a red border for TextField even if there is input missing, as the per the issue raised.

[aftab-hassan]

@HeinPauwelyn thank you for the codepen, and raising the issue. We are taking a look at it.

[ecraig12345]

This is probably a better question for a designer. @Jahnp Do you know which designer to ask about TextField?

[KevinTCoughlin]

@Vitalius1 is this in the design spec? We can discuss offline, but can I access that spec?

[Jahnp]

@aftab-hassan and I discussed this a bit offline. I don't think the specific _interaction_ discussed here (show an error on blur as the default behavior) is in the design spec, but the visual specs are already designed + implemented.

In fact, a close approximation of this behavior can be attained with some basic props and a onGetErrorMessage handler. See this CodePen, which modifies @HeinPauwelyn 's example (thank you for putting that together btw!): https://codepen.io/jahnp/pen/xBpabq

The pen isn't perfect--the validation will trigger after the first focus, vs first focus _after starting input_, which feels not quite right--but is close and might be suitable for @HeinPauwelyn 's scenario.

There is a UX/consistency question here, which is: "Should controls with required=true trigger validation on empty blur?" (e.g. DatePicker's behavior) I don't have the answer to that, though my gut says "probably not". Curious if @betrue-final-final has any thoughts here.

[aftab-hassan]

@Jahnp thanks for the comment here, and the discussion, and @KevinTCoughlin for checking in.

I have gone ahead and created a PR for the show an error on blur condition, if we'd like to have the behavior mentioned as expected in the issue.

@betrue-final-final @JasonGore, would like to get your thoughts on the behavior we'd like to have here.

[aftab-hassan]

@HeinPauwelyn, we have a pull request where the default behavior you would like to see as expected, is implemented.

While we are arriving at a decision on the ideal user experience for the default behavior, could you use @Jahnp's codepen where the desired behavior is achieved through a custom onGetErrorMessage handler ?

[aftab-hassan]

@betrue-final-final gentle ping.

EDIT: Just realized you are out of office at CSUN. Please get back whenever.

[ecraig12345]

Something else to keep in mind: if we change one component to display a red border when required is true and no value has been entered, we ought to do that on all the form components for consistency.

[aftab-hassan]

@HeinPauwelyn, this being the default behavior, and TextField being a widely used component, the change would require a lot of coordination across partners, and potentially break them.

To unblock your issue, we suggest using the onGetErrorMessage callback, as in the codepen. Please let us know if that does not help, and we can work with you.

[aftab-hassan]

Something else to keep in mind: if we change one component to display a red border when required is true and no value has been entered, we ought to do that on all the form components for consistency.

Noted. Thanks @ecraig12345

[HeinPauwelyn]

@aftab-hassan: Thanks for the onGetErrorMessage property but I find it strange that pickers and fields don't handle the errors on the same way. For a (not technical) user a field is a field and if there is a error message on a field there must be an error message on the pickers and vice versa. Same for the red borders. See this codepen where I added onGetErrorMessage on the DatePicker.

^{P.S.: I'm sorry that I didn't look at the PR.}

[aftab-hassan]

@HeinPauwelyn the codepen looks good.

For a (not technical) user a field is a field and if there is a error message on a field there must be an error message on the pickers and vice versa. Same for the red borders.

We understand. We will discuss this with the Design team and add this to the feature backlog. As several members of the team have pointed out, this might be a larger change across all components since we'd like to maintain consistency, and also would impact other products who are dependent on us.

But thanks for opening an issue on this, and making us aware.

[aftab-hassan]

@betrue-final-final would like to get your thoughts on this one.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!