diff --git a/.changeset/spicy-waves-wave.md b/.changeset/spicy-waves-wave.md new file mode 100644 index 000000000000..f14b2254ff20 --- /dev/null +++ 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 index 67f7a99bb4b0..665278e8447f 100644 --- 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)` 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 index bd13c3b8533c..91409d2c9329 100644 --- 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 ( - {placeholder && } + {placeholder && ( + + )}