Skip to content

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

@Ginxo

Description

@Ginxo

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    Needs triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions