Autocompleteinput select first match flag

[mdroidian]

Fixes the issue where users could not add new items if their input partially matched an existing option (e.g., typing “egg” selects “eggs”).

Summary by CodeRabbit

• New Features

  • Added a configurable "Auto Select First Option" toggle for Autocomplete, letting users enable/disable automatic selection of the first suggestion.

• Chores

  • Package version bumped to 0.85.5.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Version bumped to 0.85.5 and an autoSelectFirstOption UI state was added to toggle automatic selection of the first autocomplete option; the state is passed to AutocompleteInput which adjusts its selection logic accordingly.

Changes

Cohort / File(s)	Summary
Version Update package.json	Version bumped from 0.85.4 to 0.85.5.
Autocomplete UI State src/components.tsx	Adds autoSelectFirstOption boolean state (default true) with a Checkbox to toggle it; passes state as prop to AutocompleteInput.
Autocomplete Input Logic src/components/AutocompleteInput.tsx	Adds autoSelectFirstOption?: boolean to AutocompleteInputProps and defaults it to true; selection/key-handling effect updated to conditionally auto-select the active item (or fall back to onNewItem(query)) based on isOpen, isTyping, and autoSelectFirstOption; effect dependencies expanded.

Sequence Diagram

sequenceDiagram
    actor User
    participant UI as components.tsx
    participant Input as AutocompleteInput.tsx

    User->>UI: Toggle "Auto Select First Option" checkbox
    activate UI
    UI->>UI: Set autoSelectFirstOption state
    UI->>Input: Pass autoSelectFirstOption prop
    deactivate UI

    activate Input
    alt Query exists & Input open
        alt autoSelectFirstOption = true
            Note right of Input: Choose active item if present\nelse call onNewItem(query)
            Input->>Input: Select active item / onNewItem(query)
        else autoSelectFirstOption = false
            Note right of Input: Do not auto-select\ncall onNewItem(query)
            Input->>Input: onNewItem(query)
        end
    else No query or Input closed
        Input->>Input: Use alternate handling (no auto-select)
    end
    deactivate Input

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Areas to review closely:
  • src/components/AutocompleteInput.tsx: verify key-handling effect branches, dependency list, and timing of value assignments.
  • src/components.tsx: ensure state initialization, Checkbox binding, and prop passthrough are correct.
  • Interaction tests or usage sites that rely on previous auto-selection behavior.

Suggested labels

codex

Poem

🐰 A tiny toggle, bright and spry,
First options leap up to the sky,
Inputs hum and choices glide,
A rabbit cheers the new inside,
Version bumped — hop, we fly! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a flag to control auto-selection of the first option in AutocompleteInput.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a6cb6c5 and d7c3759.

📒 Files selected for processing (1)

• src/components/AutocompleteInput.tsx (3 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 93ea45e and a6cb6c5.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (3)

• package.json (1 hunks)
• src/components.tsx (2 hunks)
• src/components/AutocompleteInput.tsx (3 hunks)