Merge pull request #69 from deriv-com/aizad/password-input-fix-2

Aizad/Password Input Fix
deriv-com · Feb 9, 2024 · db9dbf3 · db9dbf3
2 parents 5462574 + 969e3e5
commit db9dbf3
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/lib/components/PasswordInput/PasswordInput.scss b/lib/components/PasswordInput/PasswordInput.scss
@@ -6,13 +6,17 @@ $ERROR: #ec3f3f;
   position: relative;
   display: inline-block;
 
+  &__wrapper {
+    z-index: 2;
+  }
+
   &--full {
     width: 100%;
   }
 
   &__meter {
     position: absolute;
-    z-index: -1;
+    z-index: 1;
     border-radius: 0px 0px 4px 4px;
     width: 100%;
     height: 4px;

diff --git a/lib/components/PasswordInput/index.tsx b/lib/components/PasswordInput/index.tsx
@@ -56,11 +56,11 @@ const PasswordVariant: Record<TScore, InputProps["variant"]> = {
 };
 
 export const PasswordInput = ({
-  value,
+  hidePasswordMeter,
+  hint,
   onBlur,
   onChange,
-  hint,
-  hidePasswordMeter,
+  value,
   ...rest
 }: PasswordInputProps) => {
   const [isTouched, setIsTouched] = useState(false);
@@ -98,6 +98,7 @@ export const PasswordInput = ({
       })}
     >
       <Input
+        wrapperClassName="deriv-password__wrapper"
         value={value}
         type={showPassword ? "text" : "password"}
         message={isTouched ? errorMessage : "" || hint}

diff --git a/src/stories/PasswordInput.stories.tsx b/src/stories/PasswordInput.stories.tsx
@@ -104,7 +104,7 @@ export const HidePasswordMeter: Story = {
     hint: "This is a hint message",
   },
   render: (args) => {
-    const [value, setValue] = useState("");
+    const [value, setValue] = useState(args.value);
 
     return (
       <PasswordInput