weseek__growi/apps/app/.claude/rules/ui-pitfalls.md

UI Pitfalls

useId() must not be passed to reactstrap target prop

React's useId() generates IDs containing colons (:r0:, :r1:, :r2:). These are valid HTML id attributes but invalid CSS selectors.

reactstrap's findDOMElements() resolves string targets via document.querySelectorAll(target), which throws DOMException: is not a valid selector when the string contains colons.

// ❌ WRONG: useId() output passed as string target
const popoverTargetId = useId();
<button id={popoverTargetId}>...</button>
<Popover target={popoverTargetId} />  // → DOMException at componentDidMount

// ✅ CORRECT: use ref — reactstrap resolves refs via .current, bypassing querySelectorAll
const popoverTargetRef = useRef<HTMLButtonElement>(null);
<button ref={popoverTargetRef}>...</button>
<Popover target={popoverTargetRef} />

Applies to all reactstrap components with a target prop: Popover, Tooltip, UncontrolledPopover, UncontrolledTooltip, etc.

Safe uses of useId(): id=, htmlFor=, aria-labelledby=, aria-describedby= — these use getElementById internally, which does not parse CSS.