fix(search): add autocomplete design review fixes #727

[ly-tempel-bitweb]

Summary by CodeRabbit

• Bug Fixes
  • Search suggestions now use consistent text coloring when hovered or active.
  • The suggestion panel keeps rounded corners whether it appears above or below the search field.
  • Pressing Arrow Down opens a closed suggestion panel without selecting an option.
  • The panel closes when focus leaves the page.
  • Search suggestions and date-field overlays now have a small gap from their associated fields.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: TEDI-Design-System/angular/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: c5df3617-45ad-41ce-9b46-184c05d69548

---

📥 Commits

Reviewing files that changed from the base of the PR and between 280af13 and 2ba11b2.

---

📒 Files selected for processing (8)

• src/tedi/components/form/date-field/date-field.component.ts
• src/tedi/components/form/form-field/field-overlay.ts
• src/tedi/components/form/search/search-suggestion.component.scss
• src/tedi/components/form/search/search-templates.directive.spec.ts
• src/tedi/components/form/search/search.component.html
• src/tedi/components/form/search/search.component.scss
• src/tedi/components/form/search/search.component.spec.ts
• src/tedi/components/form/search/search.component.ts

---

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

---

---

📝 Walkthrough

Walkthrough

The change adds a shared overlay gap constant and applies it to date-field and search overlays. Search overlay origin selection and panel styling change. Tests cover the template context guard, keyboard navigation, and focus-out behavior.

Changes

Form Overlay and Search

Layer / File(s)	Summary
Shared overlay gap src/tedi/components/form/form-field/field-overlay.ts, src/tedi/components/form/date-field/date-field.component.ts, src/tedi/components/form/search/search.component.ts	Adds FIELD_OVERLAY_GAP with a value of 4 and uses it for date-field and search overlay offsets.
Search overlay origin and template wiring src/tedi/components/form/search/search.component.ts, src/tedi/components/form/search/search.component.html	Search selects the closest form-field box as the overlay origin, with input and host fallbacks. The template uses this origin and no longer tracks above-position changes.
Search panel presentation and tests src/tedi/components/form/search/search-suggestion.component.scss, src/tedi/components/form/search/search.component.scss, src/tedi/components/form/search/*spec.ts	Suggestion text inherits the hover color when rows are hovered or active. The panel uses consistent rounded corners. Tests cover the context guard, ArrowDown behavior, and closing when focus leaves the page.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

Sequence Diagram(s)

sequenceDiagram
  participant SearchInput
  participant SearchComponent
  participant ConnectedOverlay
  SearchInput->>SearchComponent: Opens autocomplete
  SearchComponent->>SearchComponent: Selects field box, input, or host as origin
  SearchComponent->>ConnectedOverlay: Sets origin, width, and open state
  ConnectedOverlay->>ConnectedOverlay: Positions panel using configured gap

Loading

Suggested reviewers: mart-sessman

---

Merge Risk: ⚪ Minimal · up to 2ba11

The change retains the established autocomplete panel sizing behavior; the reported button overlap is not introduced by this PR.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title accurately identifies search autocomplete design fixes, which match the main changes in the pull request. It is concise and specific enough for repository history.
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 5…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

---

---

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

---

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

---

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.}

[ly-tempel-bitweb]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[github-actions]

♿ Accessibility — ✅ no blocking violations

No accessibility violations in the components changed by this PR.

🔕 Known issues — 19 stories marked todo (warn only)

Stories

• TEDI-Ready/Components/Form/DateField — Open For Visual Test
• TEDI-Ready/Content/Calendar — Availability, Day Statuses, Header Variants, Multiple Selected Dates, No Controls, Range, With Footer, With Weeks Count
• TEDI-Ready/Content/TextGroup — Types
• TEDI-Ready/Layout/Header — Logged In With Sidenav
• TEDI-Ready/Layout/SideNav — Collapsible Toggle, Default, Medium Sidenav Items, Second Level Menu Items, Second Level Menu Items Parents Are Links, Small Sidenav Items, Third Level Menu Items, Third Level Menu Items Parents Are Links

[codecov]

Codecov Report

❌ Patch coverage is 81.81818% with 2 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...rc/tedi/components/form/search/search.component.ts	77.77%	2 Missing ⚠️

📢 Thoughts on this report? Let us know!