When clearing via "Backspace" the mask stays and is send as part of the value

[solenoo]

Environment

Tech	Version
@material-ui/pickers	v3.1.0
material-ui	v4.1.1
React	v16.8.6
Browser	Chrome: v74.0.3729.169
Peer library	moment

Steps to reproduce

1. Use KeyboardDatePicker
2. Start typing a date
3. Start clearing date via Backspace on the keyboard

Expected behavior

When I don't have a value, the mask shouldn't stay. It should just go to initial state, which is no value.

Actual behavior

The mask stays and my input is marked as invalid. Even if I use Ctrl + A + Backspace I still get an Invalid field

Live example

You can see it in your docks

[DZapdos]

In addition, or possibly as a workaround can we get a prop that allows the visual mask to be optional?

This would also fix the issue of having the maskChar appear in the input field when typing, which can be annoying when you want to edit an incomplete entry and the cursor is placed at the end of the string, including the mask, and you have to move the cursor to before the mask characters before being able to type.

[DZapdos]

The way i'm currently working around this is by using onBlur to set the value to null when only the mask is showing.

const maskChar = '_';
const dateFormat = 'dd-MM-yyyy';

export const InlineDatePicker: React.FC<any> = props => {
  const {
    id,
    value,
    onChange,
    label,
    ...restInput
  } = props;

  return (
    <KeyboardDatePicker
      id={id}
      variant="inline"
      margin="normal"
      label={label}
      value={value}
      {...restInput}
      format={dateFormat}
      maskChar={maskChar}
      onBlur={e => handleBlur(e, props)}
    />
  );
};

const handleBlur = (e, props) => {
  const displayValue: string = e.target.value;

  const maskOnly = maskChar.repeat(dateFormat.length);

  // if the field is completely empty, only the mask is showing
  if (displayValue === maskOnly) {
    if (props.onBlur) {
      props.onBlur();
    }

    props.onChange(null);
  }
};