fix(lld): use a debounce on memotag field

LedgerHQ · Dec 5, 2024 · d653fab · d653fab
1 parent 1447c15
commit d653fab
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/.changeset/seven-ravens-rest.md 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
@@ -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
@@ -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}