patternfly-design
patternfly-design copied to clipboard
[Enhancement Request] [DatePicker] Chance to decide the event for showing hidding validation
Since errors from DatePicker validations are just shown after bluring:
- See onTextInput
- See onInputBlur
I would like to have the way for showing the validation errors during onTextInput event. For now I'm work-arounding this by
const [value, setValue] = useState(initialValue);
const [invalidDateError, setInvalidateError] = useState<string>();
// Not to duplicate error messages and display error during onChange
const [showInvalidDateError, setShowInvalidDateError] = useState(true);
const dateValidators = ...
return (
<>
<DatePicker
onChange={(_, dateStr) => {
setValue(dateStr);
setShowInvalidDateError(true); // To show errors during typing
}}
onBlur={(_, dateStr) => {
setValue(dateStr);
setShowInvalidDateError(false); // To not duplicate errors coming either from invalidDateError and the ones from the component
}}
value={value}
validators={dateValidators}
/>
{invalidDateError && showInvalidDateError ? (
<HelperText>
<HelperTextItem variant="error">{invalidDateError}</HelperTextItem>
</HelperText>
) : undefined}
</>
);