perf(SelectPanel v2): replace :has(input:placeholder-shown) with data-empty attribute

.changeset/perf-selectpanel2-empty-input.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+SelectPanel (experimental v2): replace the `:has(input:placeholder-shown)` selector that hid the clear-action button with a `data-empty` attribute derived from React state. The clear-action visibility no longer triggers a descendant `:has()` re-evaluation on every keystroke.

packages/react/src/experimental/SelectPanel2/SelectPanel.module.css

@@ -121,8 +121,14 @@
 .TextInput {
   padding-left: var(--base-size-8) !important;
 
-  /* stylelint-disable-next-line selector-class-pattern, selector-no-qualifying-type, selector-pseudo-class-disallowed-list -- :has() scoped to CSS Module, audited (github/github-ui#17224) */
-  &:has(input:placeholder-shown) :global(.TextInput-action) {
+  /*
+   * `data-empty` lives on the inner `<input>` (TextInput spreads unknown
+   * props onto the input, not its wrapper). The clear-action button is a
+   * later sibling of the input within this wrapper, so a general-sibling
+   * combinator targets it directly without a `:has()` walk.
+   */
+  /* stylelint-disable-next-line selector-class-pattern, selector-no-qualifying-type -- `.TextInput-action` is a third-party class on the wrapped TextInput */
+  & input[data-empty] ~ :global(.TextInput-action) {
     display: none;
   }
 }

packages/react/src/experimental/SelectPanel2/SelectPanel.tsx

@@ -430,11 +430,18 @@ const SelectPanelSearchInput: FCWithSlotMarker<TextInputProps> = ({
 
   const {setSearchQuery, moveFocusToList} = React.useContext(SelectPanelContext)
 
+  // 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
+
   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 === '')
   }
 
   const internalKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -464,10 +471,12 @@ const SelectPanelSearchInput: FCWithSlotMarker<TextInputProps> = ({
               // @ts-ignore TODO this is a hacky solution to clear
               propsOnChange({target: inputRef.current, currentTarget: inputRef.current})
             }
+            setUncontrolledEmpty(true)
           }}
         />
       }
       className={clsx(classes.TextInput, className)}
+      data-empty={isEmpty || undefined}
       onChange={internalOnChange}
       onKeyDown={internalKeyDown}
       {...props}