chore: wrap password input in form element to avoid warning in chrome

microsoft · Nov 9, 2023 · 0f2264b · 0f2264b
1 parent f500d2b
commit 0f2264b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 23 deletions.
diff --git a/packages/react-components/react-input/stories/Input/InputType.stories.tsx b/packages/react-components/react-input/stories/Input/InputType.stories.tsx
@@ -19,7 +19,7 @@ export const Type = () => {
   const styles = useStyles();
 
   return (
-    <div className={styles.root}>
+    <form noValidate autoComplete="off" className={styles.root}>
       <div>
         <Label htmlFor={emailId}>Email input</Label>
         <Input type="email" id={emailId} />
@@ -34,7 +34,7 @@ export const Type = () => {
         <Label htmlFor={passwordId}>Password input</Label>
         <Input type="password" defaultValue="password" id={passwordId} />
       </div>
-    </div>
+    </form>
   );
 };
 

diff --git a/packages/react-examples/src/react/TextField/TextField.Basic.Example.tsx b/packages/react-examples/src/react/TextField/TextField.Basic.Example.tsx
@@ -12,27 +12,30 @@ const columnProps: Partial<IStackProps> = {
 
 export const TextFieldBasicExample: React.FunctionComponent = () => {
   return (
-    <Stack horizontal tokens={stackTokens} styles={stackStyles}>
-      <Stack {...columnProps}>
-        <TextField label="Standard" />
-        <TextField label="Disabled" disabled defaultValue="I am disabled" />
-        <TextField label="Read-only" readOnly defaultValue="I am read-only" />
-        <TextField label="Required " required />
-        <TextField ariaLabel="Required without visible label" required />
-        <TextField label="With error message" errorMessage="Error message" />
+    <form noValidate autoComplete="off">
+      <Stack horizontal tokens={stackTokens} styles={stackStyles}>
+        <Stack {...columnProps}>
+          <TextField label="Standard" />
+          <TextField label="Disabled" disabled defaultValue="I am disabled" />
+          <TextField label="Read-only" readOnly defaultValue="I am read-only" />
+          <TextField label="Required " required />
+          <TextField ariaLabel="Required without visible label" required />
+          <TextField label="With error message" errorMessage="Error message" />
+        </Stack>
+        <Stack {...columnProps}>
+          <MaskedTextField label="With input mask" mask="m\ask: (999) 999 - 9999" title="A 10 digit number" />
+          <TextField label="With an icon" iconProps={iconProps} />
+          <TextField label="With placeholder" placeholder="Please enter text here" />
+          <TextField label="Disabled with placeholder" disabled placeholder="I am disabled" />
+          {/* All password fields should be rendered inside of a form */}
+          <TextField
+            label="Password with reveal button"
+            type="password"
+            canRevealPassword
+            revealPasswordAriaLabel="Show password"
+          />
+        </Stack>
       </Stack>
-      <Stack {...columnProps}>
-        <MaskedTextField label="With input mask" mask="m\ask: (999) 999 - 9999" title="A 10 digit number" />
-        <TextField label="With an icon" iconProps={iconProps} />
-        <TextField label="With placeholder" placeholder="Please enter text here" />
-        <TextField label="Disabled with placeholder" disabled placeholder="I am disabled" />
-        <TextField
-          label="Password with reveal button"
-          type="password"
-          canRevealPassword
-          revealPasswordAriaLabel="Show password"
-        />
-      </Stack>
-    </Stack>
+    </form>
   );
 };