From 12d7165f83029b1ce822dd861cbe57087412bc88 Mon Sep 17 00:00:00 2001
From: Ludy <Ludy87@users.noreply.github.com>
Date: Mon, 27 Oct 2025 17:26:08 +0100
Subject: [PATCH] fix: add missing id and name attributes to form input (#4589)

# Description of Changes

- Updated `TextInput` component to require `id` and `name` props.
- Passed `id` and `name` down to the underlying `<input>` element.
- Updated `ToolSearch` component to provide explicit `id` and `name` for
the search input.
- This ensures form fields have unique identifiers, improving
accessibility, browser autofill support, and form handling.

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

Co-authored-by: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com>
---
 frontend/src/components/shared/TextInput.tsx  |  8 ++++++++
 .../tools/toolPicker/ToolSearch.tsx           | 20 ++++++++++---------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/shared/TextInput.tsx b/frontend/src/components/shared/TextInput.tsx
index 63c69bb08..80c26dfdd 100644
--- a/frontend/src/components/shared/TextInput.tsx
+++ b/frontend/src/components/shared/TextInput.tsx
@@ -7,6 +7,10 @@ import styles from './textInput/TextInput.module.css';
  * Props for the TextInput component
  */
 export interface TextInputProps {
+  /** The input ID (required) */
+  id: string;
+  /** The input name (required) */
+  name: string;
   /** The input value (required) */
   value: string;
   /** Callback when input value changes (required) */
@@ -36,6 +40,8 @@ export interface TextInputProps {
 }
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
+  id,
+  name,
   value,
   onChange,
   placeholder,
@@ -76,6 +82,8 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
       <input
         ref={ref}
         type="text"
+        id={id}
+        name={name}
         placeholder={placeholder}
         value={value}
         onChange={(e) => onChange(e.currentTarget.value)}
diff --git a/frontend/src/components/tools/toolPicker/ToolSearch.tsx b/frontend/src/components/tools/toolPicker/ToolSearch.tsx
index d94003d2c..e4e2f416b 100644
--- a/frontend/src/components/tools/toolPicker/ToolSearch.tsx
+++ b/frontend/src/components/tools/toolPicker/ToolSearch.tsx
@@ -82,15 +82,17 @@ const ToolSearch = ({
   }, [autoFocus]);
 
   const searchInput = (
-        <TextInput
-          ref={searchRef}
-          value={value}
-          onChange={handleSearchChange}
-          placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")}
-          icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="1.5rem" height="1.5rem" />}
-          autoComplete="off"
-          onFocus={onFocus}
-        />
+      <TextInput
+        id="tool-search-input"
+        name="tool-search-input"
+        ref={searchRef}
+        value={value}
+        onChange={handleSearchChange}
+        placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")}
+        icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="1.5rem" height="1.5rem" />}
+        autoComplete="off"
+        onFocus={onFocus}
+      />
   );
 
   if (mode === "filter") {