[docs] Prevent password field blur when adornment clicked (#16672)

* [docs] Prevent password field blur when adornment clicked * codecov doesnt care about merge commits
mui · Jul 25, 2019 · d4c7c05 · d4c7c05
1 parent 5860ca2
commit d4c7c05
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 2 deletions.
diff --git a/docs/src/pages/components/text-fields/FilledInputAdornments.js b/docs/src/pages/components/text-fields/FilledInputAdornments.js
@@ -54,6 +54,10 @@ export default function FilledInputAdornments() {
     setValues({ ...values, showPassword: !values.showPassword });
   };
 
+  const handleMouseDownPassword = event => {
+    event.preventDefault();
+  };
+
   return (
     <div className={classes.root}>
       <TextField
@@ -120,6 +124,7 @@ export default function FilledInputAdornments() {
                 edge="end"
                 aria-label="toggle password visibility"
                 onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
               >
                 {values.showPassword ? <VisibilityOff /> : <Visibility />}
               </IconButton>

diff --git a/docs/src/pages/components/text-fields/FilledInputAdornments.tsx b/docs/src/pages/components/text-fields/FilledInputAdornments.tsx
@@ -64,6 +64,10 @@ export default function FilledInputAdornments() {
     setValues({ ...values, showPassword: !values.showPassword });
   };
 
+  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+  };
+
   return (
     <div className={classes.root}>
       <TextField
@@ -130,6 +134,7 @@ export default function FilledInputAdornments() {
                 edge="end"
                 aria-label="toggle password visibility"
                 onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
               >
                 {values.showPassword ? <VisibilityOff /> : <Visibility />}
               </IconButton>

diff --git a/docs/src/pages/components/text-fields/InputAdornments.js b/docs/src/pages/components/text-fields/InputAdornments.js
@@ -61,6 +61,10 @@ export default function InputAdornments() {
     setValues({ ...values, showPassword: !values.showPassword });
   };
 
+  const handleMouseDownPassword = event => {
+    event.preventDefault();
+  };
+
   return (
     <div className={classes.root}>
       <TextField
@@ -118,7 +122,11 @@ export default function InputAdornments() {
           onChange={handleChange('password')}
           endAdornment={
             <InputAdornment position="end">
-              <IconButton aria-label="toggle password visibility" onClick={handleClickShowPassword}>
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+              >
                 {values.showPassword ? <Visibility /> : <VisibilityOff />}
               </IconButton>
             </InputAdornment>

diff --git a/docs/src/pages/components/text-fields/InputAdornments.tsx b/docs/src/pages/components/text-fields/InputAdornments.tsx
@@ -71,6 +71,10 @@ export default function InputAdornments() {
     setValues({ ...values, showPassword: !values.showPassword });
   };
 
+  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+  };
+
   return (
     <div className={classes.root}>
       <TextField
@@ -128,7 +132,11 @@ export default function InputAdornments() {
           onChange={handleChange('password')}
           endAdornment={
             <InputAdornment position="end">
-              <IconButton aria-label="toggle password visibility" onClick={handleClickShowPassword}>
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+              >
                 {values.showPassword ? <Visibility /> : <VisibilityOff />}
               </IconButton>
             </InputAdornment>

diff --git a/docs/src/pages/components/text-fields/OutlinedInputAdornments.js b/docs/src/pages/components/text-fields/OutlinedInputAdornments.js
@@ -54,6 +54,10 @@ export default function OutlinedInputAdornments() {
     setValues({ ...values, showPassword: !values.showPassword });
   };
 
+  const handleMouseDownPassword = event => {
+    event.preventDefault();
+  };
+
   return (
     <div className={classes.root}>
       <TextField
@@ -120,6 +124,7 @@ export default function OutlinedInputAdornments() {
                 edge="end"
                 aria-label="toggle password visibility"
                 onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
               >
                 {values.showPassword ? <VisibilityOff /> : <Visibility />}
               </IconButton>

diff --git a/docs/src/pages/components/text-fields/OutlinedInputAdornments.tsx b/docs/src/pages/components/text-fields/OutlinedInputAdornments.tsx
@@ -64,6 +64,10 @@ export default function OutlinedInputAdornments() {
     setValues({ ...values, showPassword: !values.showPassword });
   };
 
+  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+  };
+
   return (
     <div className={classes.root}>
       <TextField
@@ -130,6 +134,7 @@ export default function OutlinedInputAdornments() {
                 edge="end"
                 aria-label="toggle password visibility"
                 onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
               >
                 {values.showPassword ? <VisibilityOff /> : <Visibility />}
               </IconButton>