Disable spellcheck for PII fields (#2416)

src/auth/components/LoginPage/LoginPage.tsx

@@ -77,6 +77,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
             value={data.email}
             inputProps={{
               "data-test-id": "email",
+              spellCheck: false,
             }}
             disabled={disabled}
           />
@@ -95,6 +96,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
               value={data.password}
               inputProps={{
                 "data-test-id": "password",
+                spellCheck: false,
               }}
               disabled={disabled}
             />

src/auth/components/NewPasswordPage/NewPasswordPage.tsx

@@ -76,6 +76,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
               value={data.password}
               inputProps={{
                 "data-test-id": "password",
+                spellCheck: false,
               }}
               required
             />
@@ -102,6 +103,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
               }
               inputProps={{
                 "data-test-id": "confirm-password",
+                spellCheck: false,
               }}
               required
             />

src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx

@@ -61,6 +61,7 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
             value={data.email}
             inputProps={{
               "data-test-id": "email",
+              spellCheck: false,
             }}
           />
           <FormSpacer />

src/components/AddressEdit/AddressEdit.tsx

@@ -96,6 +96,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
               // Setting 'autoComplete: "new-password"' is the only way to
               // disable Chrome's autofill on forms as of early 2022
               autoComplete: "new-password",
+              spellCheck: false,
             }}
           />
         </div>
@@ -111,6 +112,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
             fullWidth
             InputProps={{
               autoComplete: "new-password",
+              spellCheck: false,
             }}
           />
         </div>
@@ -132,6 +134,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
             fullWidth
             InputProps={{
               autoComplete: "new-password",
+              spellCheck: false,
             }}
           />
         </div>
@@ -150,6 +153,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
             onChange={onChange}
             InputProps={{
               autoComplete: "new-password",
+              spellCheck: false,
             }}
           />
         </div>
@@ -169,6 +173,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
         fullWidth
         InputProps={{
           autoComplete: "new-password",
+          spellCheck: false,
         }}
       />
       <FormSpacer />
@@ -186,6 +191,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
         fullWidth
         InputProps={{
           autoComplete: "new-password",
+          spellCheck: false,
         }}
       />
       <FormSpacer />
@@ -205,6 +211,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
             fullWidth
             InputProps={{
               autoComplete: "new-password",
+              spellCheck: false,
             }}
           />
         </div>
@@ -223,6 +230,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
             fullWidth
             InputProps={{
               autoComplete: "new-password",
+              spellCheck: false,
             }}
           />
         </div>
@@ -245,6 +253,9 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
             onChange={onCountryChange}
             value={data.country}
             choices={countries}
+            InputProps={{
+              spellCheck: false,
+            }}
           />
         </div>
         <div>
@@ -262,6 +273,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
             fullWidth
             InputProps={{
               autoComplete: "new-password",
+              spellCheck: false,
             }}
           />
         </div>

src/components/CompanyAddressInput/CompanyAddressForm.tsx

@@ -95,6 +95,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
         fullWidth
         InputProps={{
           autoComplete: "organization",
+          spellCheck: false,
         }}
       />
       <FormSpacer />
@@ -112,6 +113,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
         fullWidth
         InputProps={{
           autoComplete: "address-line1",
+          spellCheck: false,
         }}
       />
       <FormSpacer />
@@ -129,6 +131,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
         fullWidth
         InputProps={{
           autoComplete: "address-line2",
+          spellCheck: false,
         }}
       />
       <FormSpacer />
@@ -147,6 +150,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
           fullWidth
           InputProps={{
             autoComplete: "address-level2",
+            spellCheck: false,
           }}
         />
         <TextField
@@ -163,6 +167,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
           fullWidth
           InputProps={{
             autoComplete: "postal-code",
+            spellCheck: false,
           }}
         />
       </Grid>
@@ -182,6 +187,9 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
           onChange={onCountryChange}
           value={data.country}
           choices={countries}
+          InputProps={{
+            spellCheck: false,
+          }}
         />
         <TextField
           disabled={disabled}
@@ -197,6 +205,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
           fullWidth
           InputProps={{
             autoComplete: "address-level1",
+            spellCheck: false,
           }}
         />
       </Grid>
@@ -215,6 +224,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
         onChange={onChange}
         InputProps={{
           autoComplete: "tel",
+          spellCheck: false,
         }}
       />
     </div>

src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx

@@ -64,6 +64,9 @@ const CustomerCreateDetails: React.FC<CustomerCreateDetailsProps> = props => {
             type="text"
             value={data.customerFirstName}
             onChange={onChange}
+            inputProps={{
+              spellCheck: false,
+            }}
           />
           <TextField
             disabled={disabled}
@@ -78,6 +81,9 @@ const CustomerCreateDetails: React.FC<CustomerCreateDetailsProps> = props => {
             type="text"
             value={data.customerLastName}
             onChange={onChange}
+            inputProps={{
+              spellCheck: false,
+            }}
           />
           <TextField
             disabled={disabled}
@@ -89,6 +95,9 @@ const CustomerCreateDetails: React.FC<CustomerCreateDetailsProps> = props => {
             type="email"
             value={data.email}
             onChange={onChange}
+            inputProps={{
+              spellCheck: false,
+            }}
           />
         </div>
       </CardContent>

src/customers/components/CustomerInfo/CustomerInfo.tsx

@@ -70,6 +70,9 @@ const CustomerInfo: React.FC<CustomerInfoProps> = props => {
             label={intl.formatMessage(commonMessages.firstName)}
             value={data.firstName}
             onChange={onChange}
+            inputProps={{
+              spellCheck: false,
+            }}
           />
           <TextField
             disabled={disabled}
@@ -81,6 +84,9 @@ const CustomerInfo: React.FC<CustomerInfoProps> = props => {
             label={intl.formatMessage(commonMessages.lastName)}
             value={data.lastName}
             onChange={onChange}
+            inputProps={{
+              spellCheck: false,
+            }}
           />
         </Grid>
         <Hr className={classes.hr} />
@@ -101,6 +107,9 @@ const CustomerInfo: React.FC<CustomerInfoProps> = props => {
           label={intl.formatMessage(commonMessages.email)}
           value={data.email}
           onChange={onChange}
+          inputProps={{
+            spellCheck: false,
+          }}
         />
       </CardContent>
     </Card>

src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx

@@ -78,6 +78,9 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
                 name="oldPassword"
                 type="password"
                 onChange={change}
+                inputProps={{
+                  spellCheck: false,
+                }}
               />
               <FormSpacer />
               <TextField
@@ -99,6 +102,9 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
                 name="newPassword"
                 type="password"
                 onChange={change}
+                inputProps={{
+                  spellCheck: false,
+                }}
               />
             </DialogContent>
             <DialogActions>

src/staff/components/StaffProperties/StaffProperties.tsx

@@ -212,6 +212,9 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
                   {...getFieldProps("firstName")}
                   onChange={onChange}
                   fullWidth
+                  inputProps={{
+                    spellCheck: false,
+                  }}
                 />
               </div>
               <div className={classes.prop}>
@@ -219,6 +222,9 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
                   {...getFieldProps("lastName")}
                   onChange={onChange}
                   fullWidth
+                  inputProps={{
+                    spellCheck: false,
+                  }}
                 />
               </div>
               <div className={classes.prop}>
@@ -226,6 +232,9 @@ const StaffProperties: React.FC<StaffPropertiesProps> = props => {
                   {...getFieldProps("email")}
                   onChange={onChange}
                   fullWidth
+                  inputProps={{
+                    spellCheck: false,
+                  }}
                 />
               </div>
             </div>