To address the problem raised in T390760, we will add an animation that will transition from the server-side render search bar to the full scoped typeahead search component.

The transition will happen between the two states when a user clicks into the search box, and the scoped typeahead search will continue to be displayed even if the user clicks out of the search bar.

Notes
The select box will be disabled until the full transition has been completed.

The search bar will reset to the original server-side render when the user navigates to a new page.

The component mounts on user interaction, rather than on page load.

For the transition, we will use transition-timing-function-user transition-timing-function.200 taken from https://doc.wikimedia.org/codex/main/design-tokens/transition.html#transition-timing-function.

Figma prototype displaying transition

Figma file

Acceptance Criteria

• The scoped typeahead search transitions from the server-side render to the full scoped typeahead search component when a user clicks into the search box