Problem
The ScopedTypeaheadSearch Vue component replaces Vector's search on page load. This causes several issues:
- because the server-side rendering of search is not identical to ScopedTypeaheadSearch, the elements jump around on load
- having the Vue component mount on page load is bad, performance-wise, since it happens regardless of whether the user is actually interacting with it
- there's soon to be some major changes to the way Vector's search which would likely break ScopedTypeaheadSearch
Ideas being discussed
- Mount the ScopedTypeaheadSearch component on focus rather than page load. This requires input from UX, as it means that the select component would not be visible until a user tries to search for something
- Change server-side rendering to conditionally include a visually identical version of ScopedTypeaheadSearch. This has generally been rejected, as it adds complexity and maintenance burden.
Request to web team
Provide guidance on the following options:
- Talk to Sarai about alternative designs that do not require change in server side rendering
- Advise on preferred way to replace the TypeaheadSearch component that doesn't load Vue on page load
- If server side rendering changes is required, recommend the preferred way to do this
Additional context
- https://docs.google.com/document/d/1VlPTX4YdmJskqaacdGv4ljk3HegE8ZLV-EPOqGUt8gw/edit?tab=t.0
- Code: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Wikibase/+/refs/heads/master/repo/resources/wikibase.vector.scopedtypeaheadsearch/
- Patch demo: https://patchdemo.wmcloud.org/wikis/2dfe9857c0/wiki/Main_Page loads Vue/Codex on page load.
Requirement
The ScopedTypeaheadSearch Vue component must integrate with the Vector desktop skin without causing any functional or visual regressions to the search interface. Users must be able to interact with the search input and receive relevant, clickable type-ahead suggestions across all pages, with no unexpected layout changes or broken behavior during or after page load.
BDD
Feature: Search interface behaves correctly with ScopedTypeaheadSearch integration
Scenario: Search interaction is functional on all pages
Given I am using Vector on desktop
When I interact with the search input on various pages
Then I can type queries and receive type-ahead search suggestions
And no visual layout issues occur during interaction
Scenario: Search suggestions are relevant and clickable
Given I have typed a valid search term
When type-ahead suggestions appear
Then I can click on a suggestion
And I am taken to the correct search result page
Scenario: Search interface passes exploratory interaction checks
Given I am using Vector on desktop
When I interact with the search input
Then keyboard navigation, RTL layout, and console output meet acceptance criteriaTest Steps
Test Case 1: Verify basic search functionality and layout
- Log in or use an anonymous session at https://en.wikipedia.beta.wmflabs.org using the Vector 2022 skin.
- Visit the Main Page.
- Focus the search bar without typing anything.
- Type a common query, e.g., Dog.
- AC1: Confirm type-ahead suggestions appear smoothly without layout jumps.
- Click on a search suggestion.
- AC2: Confirm you are navigated correctly to the selected article.
- Reload the page and observe:
- AC3: Confirm no layout shifting or repositioning occurs after page load.
Test Case 2: Conduct exploratory interaction checks
While performing search interactions, validate the following:
| AC# | Check | Details | Screenshot |
|---|---|---|---|
| AC4 | Keyboard navigation | Arrow keys and Enter work for moving through and selecting suggestions. | |
| AC5 | Escape key behavior | Pressing Esc closes suggestions without clearing typed input. | |
| AC6 | RTL language support | RTL languages (e.g., ?uselang=ar) show correctly aligned input and suggestion list. | |
| AC7 | Console cleanliness | No JS errors, Vue warnings, or console warnings appear during interaction. | |
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ❌ | T390760#10812968 |
| 2 | ✅ | T390760#10812968 |
| 3 | ✅ | T390760#10812968 |
| 4 | ✅ | T390760#10812968 |
| 5 | ✅ | T390760#10812968 |
| 6 | ✅ | T390760#10812968 |
| 7 | ✅ | T390760#10812968 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T390760#10842299 |
| 2 | ✅ | T390760#10842299 |
| 3 | ✅ | T390760#10842299 |
| 4 | ✅ | T390760#10842299 |
| 5 | ✅ | T390760#10842299 |
| 6 | ✅ | T390760#10842299 |
| 7 | ✅ | T390760#10842299 |
