The solution to T312594 involves changing the auto-expand behavior of the search input to expand when the menu opens, not when the input is focused. In CdxTypeaheadSearch, we previously had the following dynamic root classes:
'cdx-typeahead-search--active': isActive.value, // This variable is true when the input is focused. 'cdx-typeahead-search--expanded': expanded.value,
The --active class was used to expand the width of the input. Now, those styles depend on expanded.value, and we already have a dynamic class for that variable, so the --active class is no longer needed.
In Vector, the --active class is being used to handle showing the search button on hover and focus. Since this class is no longer needed in Codex, we should remove it there and add a dynamic class to the Vector app instead.
Acceptance criteria
- The class is removed from Codex
- A similar dynamic class is added to Vector and the show/hide button UX still works as expected