fix(react): dropdown audit fixes — locked-row hover cancel, stale focus-key reset

Ports Solid's f93f9a3/ea1e0dd audit fixes to React, plus one React-specific
fix surfaced while porting:

- Sort dropdown's non-draggable "Group order" rows now cancel the hover
  background (a cue that dragging would do something there, which it
  wouldn't — the row's own section heading + hint text already explain
  why) while keeping the focus background, since the row is still
  clickable/keyboard-toggleable. ddRowHighlighted/ddRowHoverFocusHandlers
  both gained a hoverable option for this.

- Filter dropdown's Escape-clear-search-term bug (checked only the
  currently active column, not where focus actually was) doesn't apply to
  React's architecture: its value-search Escape handler is already bound
  directly to that exact input's own onKeyDown, so it can only ever fire
  while that specific input has focus. No fix needed there.

- React-specific: closing a dropdown panel (it unmounts entirely) doesn't
  reliably fire a blur event on whatever row was focused inside it,
  leaving a stale hoveredDdRowKey/focusedDdRowKey that could wrongly match
  a same-keyed row in a different dropdown opened right after (e.g.
  grouping a column then immediately opening Sort, whose "Group order"
  row shares that key). Fixed by resetting both keys whenever which
  dropdown is open changes, via the render-time "adjust state when a prop
  changes" pattern already used elsewhere in this file (not an effect, to
  avoid the react-hooks/set-state-in-effect lint error).

Author: julien-f

packages/react/src/DataTableView.tsx

@@ -900,13 +900,37 @@ export function DataTableView<TRow extends object>({
   // dropdown is ever open at a time, so a single pair of keys (not one per dropdown) is enough.
   const [hoveredDdRowKey, setHoveredDdRowKey] = useState<string | null>(null)
   const [focusedDdRowKey, setFocusedDdRowKey] = useState<string | null>(null)
-  function ddRowHighlighted(key: string): boolean {
-    return hoveredDdRowKey === key || focusedDdRowKey === key
+  // A closed dropdown panel unmounts entirely (see Dropdown.tsx), but that doesn't reliably fire a
+  // blur event on whatever row was focused inside it — so without this, closing a dropdown while
+  // one of its rows is focused/hovered can leave a stale key here, which then wrongly matches a
+  // same-keyed row in a *different* dropdown opened right after (e.g. grouping "dept" then
+  // immediately opening Sort, whose "Group order" row shares that same key). Resetting whenever
+  // which dropdown is open changes keeps this scoped to whichever one is actually open right now
+  // — the same "adjust state when a prop changes" render-time pattern as `sameKeySet`'s
+  // `prevColumns` comparison above, rather than an effect (avoiding both an extra render and the
+  // react-hooks/set-state-in-effect lint error this project's config treats as one).
+  const openDdTriple = `${openColsDD}:${openSortDD}:${openGroupDD}`
+  const [prevOpenDdTriple, setPrevOpenDdTriple] = useState(openDdTriple)
+  if (openDdTriple !== prevOpenDdTriple) {
+    setPrevOpenDdTriple(openDdTriple)
+    setHoveredDdRowKey(null)
+    setFocusedDdRowKey(null)
   }
-  function ddRowHoverFocusHandlers(key: string) {
+  // `hoverable = false` is for Sort's non-draggable "Group order" rows: a hover highlight would
+  // read as "dragging would do something here," which it wouldn't — its own section heading +
+  // hint text already explain why, so this only cancels the hover cue, not the focus one (the row
+  // is still clickable/keyboard-toggleable, so focus stays a meaningful cue).
+  function ddRowHighlighted(key: string, { hoverable = true } = {}): boolean {
+    return (hoverable && hoveredDdRowKey === key) || focusedDdRowKey === key
+  }
+  function ddRowHoverFocusHandlers(key: string, { hoverable = true } = {}) {
     return {
-      onMouseEnter: () => setHoveredDdRowKey(key),
-      onMouseLeave: () => setHoveredDdRowKey((k) => (k === key ? null : k)),
+      ...(hoverable
+        ? {
+            onMouseEnter: () => setHoveredDdRowKey(key),
+            onMouseLeave: () => setHoveredDdRowKey((k) => (k === key ? null : k)),
+          }
+        : {}),
       onFocus: () => setFocusedDdRowKey(key),
       onBlur: () => setFocusedDdRowKey((k) => (k === key ? null : k)),
     }
@@ -2145,11 +2169,11 @@ export function DataTableView<TRow extends object>({
                           removeSort(entry.key)
                         }
                       }}
-                      {...ddRowHoverFocusHandlers(entry.key)}
+                      {...ddRowHoverFocusHandlers(entry.key, { hoverable: false })}
                       style={{
                         ...S.ddItem,
                         justifyContent: 'space-between',
-                        background: ddRowHighlighted(entry.key)
+                        background: ddRowHighlighted(entry.key, { hoverable: false })
                           ? 'var(--color-background-secondary)'
                           : undefined,
                       }}

packages/react/src/__tests__/dropdownSearchNav.test.tsx

@@ -577,6 +577,28 @@ describe('DataTable — Sort/Group/Columns active-row hover/focus background', (
     fireEvent.focus(colRow)
     expect(colRow.style.background).toBe('var(--color-background-secondary)')
   })
+
+  // A "Group order" row is still clickable to toggle direction, just not draggable/Alt+Arrow-
+  // reorderable — its own section heading + hint text already explain why, so it cancels only the
+  // hover cue (which would read as "dragging would do something here," which it wouldn't), not the
+  // focus one (the row is still keyboard-toggleable, so focus stays a meaningful cue).
+  it('a "Group order" row gets the focus background but not the hover one', () => {
+    const { getByText, getAllByText, container } = render(
+      <DataTable data={ROWS} columns={COLS} rowKey="id" />,
+    )
+    fireEvent.click(getByText('Group'))
+    fireEvent.click(ddCopyOf(getAllByText, 'Dept'))
+    fireEvent.click(getByText('Group')) // close
+    fireEvent.click(getByText('Sort'))
+    const groupOrderRow = [...container.querySelectorAll<HTMLElement>('[tabindex="0"]')].find(
+      (el) => el.textContent?.includes('Dept') && !el.hasAttribute('data-sort-key'),
+    )!
+    fireEvent.mouseEnter(groupOrderRow)
+    expect(groupOrderRow.style.background).toBe('')
+    fireEvent.mouseLeave(groupOrderRow)
+    fireEvent.focus(groupOrderRow)
+    expect(groupOrderRow.style.background).toBe('var(--color-background-secondary)')
+  })
 })
 
 const CATEGORIZED_COLS: ColumnDef<Row>[] = [