From d653fab3cf453807f4ae94467248db96def6dd78 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 +++++
 .../MemoTag/__tests__/MemoTagField.test.tsx        | 10 ++++++++++
 .../features/MemoTag/components/MemoTagField.tsx   | 14 +++++++++++---
 3 files changed, 26 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/__tests__/MemoTagField.test.tsx b/apps/ledger-live-desktop/src/newArch/features/MemoTag/__tests__/MemoTagField.test.tsx
index 8e75955c2f66..918d681cd2c2 100644
--- a/apps/ledger-live-desktop/src/newArch/features/MemoTag/__tests__/MemoTagField.test.tsx
+++ b/apps/ledger-live-desktop/src/newArch/features/MemoTag/__tests__/MemoTagField.test.tsx
@@ -7,6 +7,14 @@ import { render, screen, fireEvent } from "tests/testUtils";
 import MemoTagField from "../components/MemoTagField";
 
 describe("MemoTagField", () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
   it("renders MemoTagField with label and text field", () => {
     render(<MemoTagField showLabel={true} />);
     expect(screen.getByText(/Tag \/ Memo/gi)).toBeInTheDocument();
@@ -25,6 +33,8 @@ describe("MemoTagField", () => {
     fireEvent.change(screen.getByPlaceholderText(/Enter Tag \/ Memo/gi), {
       target: { value: "new memo" },
     });
+    expect(handleChange).not.toHaveBeenCalled();
+    jest.runAllTimers();
     expect(handleChange).toHaveBeenCalledTimes(1);
   });
 
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}