SearchField: Remove -field postfix from id (#2365)

# Summary:
Previously, the SearchField component was appending "-field" to the end of a provided id prop. We remove this post-fix and now use the `id` prop as is

This change is needed so when SearchField is used with LabeledField, LabeledField will set the id of the field element and wire it up with the label element. Since LabeledField works with a variety of components, the id shouldn't be modified by the field.

Issue: WB-1771

## Test plan:
- Confirm that the id on the search field is the same value as the id prop (`/?path=/story/packages-searchfield--default&args=id:test123`)
![Screenshot 2024-11-18 at 3 08 19 PM](https://github.com/user-attachments/assets/30fccac6-842a-4aad-ac39-92c5290721cf)
- Verify with the npm snapshot if there will be any breaking unit/e2e tests in webapp due to the internal id change

Author: beaesguerra

Reviewers: jandrade, beaesguerra

Required Reviewers:

Approved By: jandrade

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2365

.changeset/cuddly-fireants-cheat.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-search-field": patch
+---
+
+SearchField: Remove "-field" that was automatically appended to the id.

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 () => {

packages/wonder-blocks-search-field/src/components/search-field.tsx

@@ -208,7 +208,7 @@ const SearchField: React.ForwardRefExoticComponent<
                         aria-hidden="true"
                     />
                     <TextField
-                        id={`${uniqueId}-field`}
+                        id={uniqueId}
                         type="text"
                         autoFocus={autoFocus}
                         disabled={disabled}