fix: preserve user-provided id on Autocomplete input

[pomfrida]

Summary

• Autocomplete was overwriting user-provided id prop with downshift's auto-generated ID
• Pass user id as inputId to downshift's useCombobox, ensuring it's used consistently for the input element, label htmlFor, and all related aria attributes
• Adds two tests verifying id preservation and label-input association

Closes #4588

Test plan

• Existing 32 Autocomplete tests pass
• New test: user-provided id is preserved on the input element
• New test: label for attribute matches custom id

🤖 Generated with Claude Code

[pomfrida]

@claude review

[claude]

Claude finished @pomfrida's task in 1m 4s —— View job

---

Code Review

• Gather context
• Read changed files
• Provide review feedback

---

Summary

The fix is correct and minimal. One test improvement needed (also flagged by the code quality bot).

---

useAutocomplete.ts — ✅ Looks good

Line 299:

...(id !== undefined && { inputId: id }),

This is the right approach. Passing inputId to downshift's useCombobox ensures:

• The input element gets id="<your-id>"
• The label's for attribute is automatically set to match
• All aria relationships managed by downshift remain consistent

The conditional spread correctly avoids overriding downshift's auto-generated ID when no id prop is passed. Clean, minimal fix.

---

Autocomplete.test.tsx — ⚠️ Minor issue

The second new test has a weak assertion (also flagged by the code quality bot):

// line 151
const input = screen.getAllByLabelText(labelText)[0]
// ...
expect(input).toBeInTheDocument() // ← this adds no value

getAllByLabelText already throws if the element isn't found, so toBeInTheDocument() is redundant. The input variable is effectively unused in a meaningful way.

Suggested fix — replace with a stronger assertion:

it('Maintains label-input association when custom id is provided', () => {
  const { container } = render(
    <Autocomplete id="my-custom-id" label={labelText} options={items} />,
  )
  const label = container.querySelector('label')
  expect(label).toHaveAttribute('for', 'my-custom-id')
  // Verify the label actually points to the input element
  const input = screen.getAllByLabelText(labelText)[0]
  expect(input.nodeName).toBe('INPUT')
})

Or simply drop the input variable entirely if the test is purely about the label's for attribute.

Fix this →

---

Overall

The core fix is solid. Just the minor unused variable / weak assertion in the second test to clean up before merge.

[millus]

LGTM 🚀