patternfly / patternfly-design

Use this repo to file all new feature or design change requests for the PatternFly project
114 stars 103 forks source link

[Enhancement Request] [DatePicker] Chance to decide the event for showing hidding validation #1336

Open Ginxo opened 2 months ago

Ginxo commented 2 months ago

Since errors from DatePicker validations are just shown after bluring:

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}
    </>
  );