Read-only Masked Text Fields

[hvilander]

Masked text fields are awesome, but can lead to this use case.

I have a SQForm that is a read only view, it has all SQFormReadOnlyTextFields. I also have an edit modal, where I am using SQFormMaskedTextFields for things like phone, zip, etc.

With the ability and in many cases preference to strip the non-numeric characters from the value, we should also provide a way to display the masked value in a readonly style field

Example, a phone number field and use the stripNonNumeric prop. The value will have (, ), and, - removed and saved into the data base. If I want to show that value in a read only form it would be really nice to use an SQFormMaskedTextField.

Proposal, expose a readOnly boolean prop.

As a consumer of the current component I can do this:

<SQFormMaskedTextField
  label="Fax"
  name="fax"
   mask={MASKS.phone}
  size={4}
  InputProps={{ readOnly: true, disableUnderline: true }}
  muiFieldProps={{ helperText: '' }} // Disables the validation icon
/>

Which is hacky and not ideal. It does work. The ugliest part to me is disabling the validation icon.

If this is a reasonable addition, I would be happy to do this work. Didn't want to waste time one it if we thought it was a bad idea.