Implement an Autocomplete Input Component

Context

Build a reusable web UI component that provides typeahead autocomplete for user input. Assume a modern browser environment. You may implement with React + TypeScript (preferred) or plain JavaScript; an asynchronous function to fetch suggestions will be provided.

Assume a function is available:

• fetchSuggestions(query: string, signal?: AbortSignal): Promise<string[]>

Requirements

1. Debounced input handling to limit network calls (e.g., 300 ms wait after the last keystroke).
2. Asynchronous fetch of suggestions using the provided fetchSuggestions.
3. Render a suggestion list below the input.
4. Keyboard navigation:
   • Arrow Down/Up to move the active selection through suggestions (wrap around permitted).
   • Highlight the active suggestion.
   • Enter submits the active suggestion if one is highlighted; otherwise, submit the current input value.
5. Reasonable edge handling:
   • Avoid race conditions from overlapping async requests.
   • Handle empty/no results gracefully.
   • Do not fetch when the query is too short (e.g., 0–1 chars).

Deliverable

• A working component implementation with brief notes on how it satisfies the above.
• Include any minimal CSS or class hooks to show highlighting.
• Provide a short usage example with a mock fetchSuggestions.