🐛fix(RN-UI): animated input didn't watch if there was a value entered

LedgerHQ · Jun 27, 2024 · f98ca2e · f98ca2e
1 parent 85b28fe
commit f98ca2e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/.changeset/spicy-waves-wave.md b/.changeset/spicy-waves-wave.md
@@ -0,0 +1,5 @@
+---
+"@ledgerhq/native-ui": patch
+---
+
+input animation triggers if there is any value entered
diff --git a/libs/ui/packages/native/src/components/Form/Input/AnimatedInput/AnimatedNotchedLabel.tsx b/libs/ui/packages/native/src/components/Form/Input/AnimatedInput/AnimatedNotchedLabel.tsx
@@ -64,11 +64,16 @@ const LineCutout = styled(Flex)<LineCutoutProps>`
 type AnimatedNotchedLabelProps = {
   placeholder: string;
   inputStatus: InputStatus;
+  value: string;
 };
 
-export const AnimatedNotchedLabel = ({ placeholder, inputStatus }: AnimatedNotchedLabelProps) => {
+export const AnimatedNotchedLabel = ({
+  placeholder,
+  inputStatus,
+  value,
+}: AnimatedNotchedLabelProps) => {
   const [labelWidth, setLabelWidth] = useState(0);
-  const notched = inputStatus !== "default";
+  const notched = inputStatus !== "default" || value.length > 0;
 
   const labelTop = useSharedValue(notched ? labelFinalPositions.top : labelInitialPositions.top);
   const labelLeft = useSharedValue(notched ? labelFinalPositions.left : labelInitialPositions.left);

diff --git a/libs/ui/packages/native/src/components/Form/Input/AnimatedInput/index.tsx b/libs/ui/packages/native/src/components/Form/Input/AnimatedInput/index.tsx
@@ -46,13 +46,15 @@ const AnimatedInput = (
 
   return (
     <InputContainer status={inputStatus} style={style}>
-      {placeholder && <AnimatedNotchedLabel placeholder={placeholder} inputStatus={inputStatus} />}
+      {placeholder && (
+        <AnimatedNotchedLabel placeholder={placeholder} inputStatus={inputStatus} value={value} />
+      )}
       <BaseInput
         ref={ref}
         onFocus={onFocus}
         onBlur={onBlur}
         error={error}
-        value={value as string}
+        value={value}
         color={theme ? inputTextColor[inputStatus]({ theme }) : "neutral.c100"}
         inputContainerStyle={{
           backgroundColor: "none",