fix(select,filter-dropdown): keep Clear all's menu open and a searching Select's side - #163
Merged
Merged
Conversation
…ng Select's side FilterDropdown's "Clear all" became a menu item in 4.3.0, so Radix closed the menu on select. It now prevents that and moves focus before the item unmounts: to the search box, or to the menu without search. Left to fall, focus landed on an enclosing dialog, which drew the browser's focus ring around it. A searchable Select could flip sides mid-search: a query that shrank the list let it fit on the preferred side, and once there the size cap followed that side's space, so clearing the query never flipped it back. The side it was placed on is now locked from the first query until it closes. 4.3.2, with a CHANGELOG entry. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What
Two regressions from 4.3.0 that showed up while adopting it in Guardian Studio:
FilterDropdown's "Clear all" closes the menu. It used to leave it open.Selectswitches sides during a search. In Studio's Apply Policy dialog, the project select opens above its trigger. Type a query that matches nothing, clear it, and the list is now below the trigger, squeezed into the space left there.Why
Clear all. In 4.3.0 "Clear all" became a
DropdownMenuItem, so keyboard users can reach it. Radix closes a menu whenever an item'sonSelectdoesn't callpreventDefault. The item also unmounts once nothing is selected. When the focused element disappears, focus falls back to an enclosingDialog, and the browser draws its focus ring around the whole dialog.Select side. Radix positions the popper with
flip()and thensize(), andmax-heightis set to the space available on the side it picked. When the list first opens it is too tall for the side below, so it flips above. A query that matches little shrinks the list enough to fit below, so it flips there. When the query is cleared,size()has already capped it to the space below. Nothing overflows, soflip()never moves it back.Changes
filter-dropdown.tsx: "Clear all" prevents the close. It moves focus before the item unmounts: to the search box if there is one, otherwise to the menu.select.tsx: once a query starts,SelectContentreads the side it was placed on (data-side). It then passes that side back withavoidCollisions={false}until the select closes. The lock lives inSelect's context and is cleared when the select opens. WithavoidCollisionsoff, Radix also stopsshift(), so while locked the list isn't nudged sideways back on screen. That only matters for a select at the very edge of the viewport.Verification
pnpm format:check,pnpm lint,pnpm test(40 passing),pnpm build.In Studio, with this build in place, measured with Playwright in the Apply Policy dialog. Each cell is the list's side and height:
In Studio, "Clear all" on the policy type filter inside the dialog leaves the menu open with every filter cleared. Focus is on the menu and no focus ring appears on the dialog.
🤖 Generated with Claude Code