perf(SelectPanel v2): replace :has(input:placeholder-shown) with data-empty attribute#7904
perf(SelectPanel v2): replace :has(input:placeholder-shown) with data-empty attribute#7904mattcosta7 wants to merge 6 commits into
:has(input:placeholder-shown) with data-empty attribute#7904Conversation
🦋 Changeset detectedLatest commit: 7906c23 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
Bot
added
the
integration-tests: recommended
|
TextInput spreads unknown props onto the inner <input> rather than the .TextInput wrapper, so the data attribute landed on the input element. Use a general-sibling combinator from the input to the clear-action span (which sits later in the wrapper).
There was a problem hiding this comment.
Pull request overview
This PR removes an expensive :has(input:placeholder-shown)-based selector from the experimental SelectPanel2 search input styling by hoisting “empty” state into React and exposing it via a data-empty attribute, letting CSS use a simple sibling/attribute selector to hide the clear-action button.
Changes:
- Track empty state in
SelectPanelSearchInputand setdata-emptybased on controlled vs uncontrolled usage. - Replace the
:has()CSS rule with an attribute + general-sibling selector targeting.TextInput-action. - Add a patch changeset documenting the internal perf-driven change.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/experimental/SelectPanel2/SelectPanel.tsx | Adds empty-state tracking and emits data-empty on the underlying TextInput input element. |
| packages/react/src/experimental/SelectPanel2/SelectPanel.module.css | Replaces :has(input:placeholder-shown) with input[data-empty] ~ .TextInput-action to hide the clear action without :has(). |
| .changeset/perf-selectpanel2-empty-input.md | Documents the change as a patch release item. |
Copilot's findings
- Files reviewed: 3/3 changed files
- Comments generated: 2
mattcosta7
added
the
Canary Release
| const internalOnChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| // If props.onChange is given, the application controls search, | ||
| // otherwise the component does | ||
| if (typeof propsOnChange === 'function') propsOnChange(event) | ||
| else setSearchQuery(event.target.value) | ||
| setUncontrolledEmpty(event.target.value === '') | ||
| } |
| onClick={() => { | ||
| if (inputRef.current) inputRef.current.value = '' | ||
| if (typeof propsOnChange === 'function') { | ||
| // @ts-ignore TODO this is a hacky solution to clear | ||
| propsOnChange({target: inputRef.current, currentTarget: inputRef.current}) | ||
| } | ||
| setUncontrolledEmpty(true) | ||
| }} |
| // Track whether the input is empty so the clear-action can be hidden via a | ||
| // data attribute instead of a `:has(input:placeholder-shown)` selector that | ||
| // forced a descendant re-evaluation on every keystroke. | ||
| const [uncontrolledEmpty, setUncontrolledEmpty] = React.useState( | ||
| () => (props.value ?? props.defaultValue ?? '') === '', | ||
| ) | ||
| const isEmpty = props.value !== undefined ? props.value === '' : uncontrolledEmpty | ||
|
|
|
Closing as no longer necessary. Main already merged #8115 ("perf(css): remove expensive |
Closes #
Replaces the
&:has(input:placeholder-shown) :global(.TextInput-action)selector that hid the clear-action button when the search input is empty. The previous selector forced a descendant:has()evaluation on every keystroke (placeholder-shown toggles with each character typed/deleted), and the inner:global(.TextInput-action)selector required descendant matching across the whole TextInput subtree.Approach: track the empty state in React state on the
SelectPanelSearchInputcomponent, derive anisEmptyvalue, and pass it through asdata-emptyon the renderedTextInputwrapper. The CSS now matches a plain attribute on the same.TextInputelement.The controlled/uncontrolled cases are both handled:
valueprop provided),isEmptyis derived from the prop directly so it stays in sync without an effect.uncontrolledEmptystate.Changelog
New
data-emptyattribute onSelectPanel.SearchInputwhen the search input is empty.Changed
SelectPanel.module.cssclear-action visibility no longer uses:has(input:placeholder-shown).Removed
&:has(input:placeholder-shown)selector fromSelectPanel.module.css.Rollout strategy
Testing & Reviewing
packages/react/src/experimental/SelectPanel2/**unit tests pass.tsc --noEmitonpackages/reactis clean.content-visibilitybrowser-compat warning at line 87, unrelated).VRT expectations: None. The clear-action button is shown/hidden under identical conditions as before — when the input is empty, it's hidden; otherwise, it's shown. The only behavioral difference is timing: the previous
:has(input:placeholder-shown)updated on the browser's:placeholder-shownflip (which happens on the same frame as the input event), while the newdata-emptyflips on the React commit that follows the change event. In practice both update in the same animation frame and the user can't observe the difference.Part of the
:has()-reduction series: #7901 (PageHeader), #7902 (ActionList SubGroup), #7903 (SegmentedControl divider).Merge checklist