Fix content switcher in the search page header #4933
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes
Fixes #4925 by @obulat
Description
This PR fixes the bug where the content switcher would keep opening and closing once you click on it.
The cause of this bug is interesting. The
VHeaderDesktop
set theplacement
prop toVSearchTypePopover
toheader
orsearchbar
to compute whether we should use links or buttons for the different search types. Then, in #4841, the prop was removed from the childVSearchTypePopover
component as unnecessary. However, it wasn't removed from the parent,VHeaderDesktop
. This means, that the parent was still passing theplacement
, but now as anattr
. And in Vue3, an attr will override the prop set in the child component 1. The child component was using the same name,placement
, for the prop to pass to thefloating-ui
library to position the search type popover. The overriden value,header
, was, however, invalid for thefloating-ui
, so it was causing the constant repositioning of the popover.Testing Instructions
Go to staging, https://staging.openverse.org/search?q=cat and try to open the content switcher in the header. You will see the flickering from the related issue.
Run the app in this branch, and open the content switcher. It will open and close correctly.
Checklist
Update index.md
).main
) or a parent feature branch.ov just catalog/generate-docs
for catalogPRs) or the media properties generator (
ov just catalog/generate-docs media-props
for the catalog or
ov just api/generate-docs
for the API) where applicable.Developer Certificate of Origin
Developer Certificate of Origin
Footnotes
https://github.com/vuejs/core/issues/9039 ↩