From 8af048ef362e14153831af1ff16d11c164c35bc3 Mon Sep 17 00:00:00 2001
From: Kevin Le Seigle <kevin.le-seigle@ledger.fr>
Date: Thu, 5 Dec 2024 15:13:40 +0100
Subject: [PATCH] fix(lld): use a debounce on memotag field

---
 .changeset/seven-ravens-rest.md                    |  5 +++++
 .../features/MemoTag/components/MemoTagField.tsx   | 14 +++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/seven-ravens-rest.md

diff --git a/.changeset/seven-ravens-rest.md b/.changeset/seven-ravens-rest.md
new file mode 100644
index 000000000000..8a4f89f57f08
--- /dev/null
+++ b/.changeset/seven-ravens-rest.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+LLD: LIVE-15143 use a debounce on the memotag field
diff --git a/apps/ledger-live-desktop/src/newArch/features/MemoTag/components/MemoTagField.tsx b/apps/ledger-live-desktop/src/newArch/features/MemoTag/components/MemoTagField.tsx
index a6be608741a6..7494ecb954c3 100644
--- a/apps/ledger-live-desktop/src/newArch/features/MemoTag/components/MemoTagField.tsx
+++ b/apps/ledger-live-desktop/src/newArch/features/MemoTag/components/MemoTagField.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Input, { Props as InputBaseProps } from "~/renderer/components/Input";
+import { useDebounce } from "@ledgerhq/live-common//hooks/useDebounce";
 import Label from "~/renderer/components/Label";
 import Box from "~/renderer/components/Box";
 import { useTranslation } from "react-i18next";
@@ -46,6 +47,13 @@ const MemoTagField = ({
   tooltipText,
 }: MemoTagFieldProps) => {
   const { t } = useTranslation();
+  const [memoValue, setMemoValue] = useState(value);
+  const debouncedMemoValue = useDebounce(memoValue, 300);
+
+  useEffect(() => {
+    if (debouncedMemoValue !== value) onChange?.(debouncedMemoValue || "");
+  }, [debouncedMemoValue, onChange, value]);
+
   return (
     <Box flow={1}>
       {showLabel && (
@@ -68,10 +76,10 @@ const MemoTagField = ({
         <Flex justifyContent="end">{CaracterCountComponent && <CaracterCountComponent />}</Flex>
         <Input
           placeholder={placeholder ?? t("MemoTagField.placeholder")}
-          onChange={onChange}
+          onChange={setMemoValue}
           warning={warning}
           error={error}
-          value={value}
+          value={memoValue}
           spellCheck="false"
           ff="Inter"
           maxMemoLength={maxMemoLength}