From 969e3e5982b56f9267b00560572364552620cf88 Mon Sep 17 00:00:00 2001
From: aizad-deriv <aizad@deriv.com>
Date: Thu, 8 Feb 2024 16:42:34 +0800
Subject: [PATCH] fix: updated z index for password input component

---
 lib/components/PasswordInput/PasswordInput.scss | 6 +++++-
 lib/components/PasswordInput/index.tsx          | 7 ++++---
 src/stories/PasswordInput.stories.tsx           | 2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/lib/components/PasswordInput/PasswordInput.scss b/lib/components/PasswordInput/PasswordInput.scss
index c0183b1e..c21ecd17 100644
--- 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
index c14cff1c..ada992de 100644
--- 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
index 315dabbd..7d9fe424 100644
--- 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