Skip to content

fix: suggest popular courses on empty homepage search focus - #512

Draft
posthog-eu[bot] wants to merge 1 commit into
devfrom
posthog-self-driving/fixcourse-search-suggest-on-empty-focus-29338d
Draft

fix: suggest popular courses on empty homepage search focus#512
posthog-eu[bot] wants to merge 1 commit into
devfrom
posthog-self-driving/fixcourse-search-suggest-on-empty-focus-29338d

Conversation

@posthog-eu

@posthog-eu posthog-eu Bot commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

Problem

  • New desktop users click the homepage course search to see what's searchable and get a silent no-op — no suggestions, no popular courses, no hint. Session replay (019fc1f2) shows one clicking the empty bar 3× in 2.4s with zero visual response, idling 3m40s, then abandoning search for nav browsing.
  • Root cause: dropdownVisible required query.trim().length > 0 and the input's onFocus only called setIsOpen(true) when a query was already typed, so an empty, focused field rendered nothing.
  • The empty-focus case fired no analytics event at all, so it was invisible outside replay.
  • Short acronym queries like NLP dead-ended even though the course exists in the catalog.

Changes

  • Suggest on focus — the dropdown now opens on focus and, when the field is empty, previews the most content-rich courses under a "Popular courses" header. Reuses the already paper/note-ranked courses prop (getSearchableCourses), is keyboard-navigable, and prefetches the top rows.
  • New telemetry — fire course_search_focused (with suggestion_count) once per visit when someone focuses without typing, so the dead-end is measurable.
  • Alias — add NLPBCSE409L (Natural Language Processing) to COURSE_ACRONYMS.

Why

Search entry is the homepage's primary path and both signals showed it dead-ending: course_search_no_results logged ~60 distinct failing queries on Aug 1–2, and replay caught users clicking the empty bar to no effect and giving up.

Scope notes

  • Degree-program queries left as a data gap. The other reported misses (MCA, msc, bba, PAMCA503) point at programs whose courses aren't in the catalog — PAMCA503 itself returned no results because that code isn't ingested. Aliases can only surface courses that exist, so pointing them at absent codes would do nothing; NLP is the one named acronym that maps to a real course. Surfacing MCA/BBA/MSc content is a catalog-ingestion task, not a search-UX one.
  • Upsell modal left unchanged. It's a one-time, per-device, dismissible intro (localStorage-gated, desktop-only, 2.4s delay) — reviewed per the report but it's not a recurring blocker, so changing its timing wasn't warranted.

Verification

The dev environment here has no installed dependencies or database, so this was verified by code-path analysis against the described replay rather than a live run: on empty focus onFocus now sets isOpen and dropdownVisible is true because the suggestion list is non-empty, so the bar renders the "Popular courses" list instead of nothing — directly changing the observed state in 019fc1f2. Worth a quick manual pass on a full dev environment before merge.


Created with PostHog Desktop from this inbox report.

Focusing the empty homepage course search rendered nothing: `dropdownVisible`
required a non-empty query and `onFocus` only opened the dropdown when the query
was already non-empty, so clicking the bar to see what's searchable was a silent
no-op (session replay shows users idling and abandoning search).

- Open the dropdown on focus and preview the most content-rich courses ("Popular
  courses") when the field is empty, so the bar always surfaces something and
  teaches people what a valid query looks like. The suggestion list reuses the
  already paper/note-ranked `courses` prop and is fully keyboard-navigable.
- Fire a `course_search_focused` event on focus-without-typing so this dead-end
  stops being replay-only.
- Add an `NLP` alias mapping to the real catalog course BCSE409L (Natural
  Language Processing), which previously dead-ended.

paths: app/(app)/home/course-search.tsx lib/course-map.ts lib/posthog/client.ts

Generated-By: PostHog Code
Task-Id: 5142b8aa-ded2-4806-9b2d-772e4fea0ea2
@vercel

vercel Bot commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
examcooker-dev Error Error Aug 2, 2026 10:48am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants