Remove -field postfix from id so that the id prop received is what is…

… used
Khan · Nov 18, 2024 · bed91f4 · bed91f4
1 parent e0569b1
commit bed91f4
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/.changeset/cuddly-fireants-cheat.md b/.changeset/cuddly-fireants-cheat.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-search-field": minor
+---
+
+SearchField: Remove "-field" that was automatically appended to the id.
diff --git a/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx b/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx
@@ -370,7 +370,7 @@ describe("SearchField", () => {
         const searchField = await screen.findByTestId("search-field-test");
 
         // Assert
-        expect(searchField).toHaveAttribute("id", "some-random-id-field");
+        expect(searchField).toHaveAttribute("id", "some-random-id");
     });
 
     test("uses a unique ID if one is not provided", async () => {
@@ -387,9 +387,7 @@ describe("SearchField", () => {
         const searchField = await screen.findByTestId("search-field-test");
 
         // Assert
-        expect(searchField.getAttribute("id")).toMatch(
-            /^uid-search-field.*-field$/,
-        );
+        expect(searchField.getAttribute("id")).toMatch(/^uid-search-field.*$/);
     });
 
     test("has focus if autoFocus is true", async () => {

diff --git a/packages/wonder-blocks-search-field/src/components/search-field.tsx b/packages/wonder-blocks-search-field/src/components/search-field.tsx
@@ -207,7 +207,7 @@ const SearchField: React.ForwardRefExoticComponent<
                         aria-hidden="true"
                     />
                     <TextField
-                        id={`${uniqueId}-field`}
+                        id={uniqueId}
                         type="text"
                         autoFocus={autoFocus}
                         disabled={disabled}