Fix FormTokenField suggestions dropdown flashing closed on click

[Copilot]

When the token field contained enough tags to wrap to multiple lines, clicking anywhere in the field caused the suggestions dropdown to appear briefly then immediately close.

Root Cause

A blur/focus race condition in the onBlur handler. The timer ID was discarded, so when clicking the container caused a blur→refocus cycle, the stale timer always won:

1. Input blurs → setTimeout(() => setIsOpen(false), 150) fires (ID discarded)
2. Input refocuses → setIsOpen(true)
3. Stale timer fires → setIsOpen(false) ✗

Fix

Track the timer in a blurTimerRef and cancel it on focus:

// Before
onFocus={ () => setIsOpen( true ) }
onBlur={ () => setTimeout( () => setIsOpen( false ), 150 ) }

// After
onFocus={ () => {
    if ( blurTimerRef.current ) {
        clearTimeout( blurTimerRef.current );
        blurTimerRef.current = null;
    }
    setIsOpen( true );
} }
onBlur={ () => {
    blurTimerRef.current = setTimeout( () => {
        setIsOpen( false );
        blurTimerRef.current = null;
    }, 150 );
} }

Also added a useEffect cleanup to clear any pending timer on unmount.

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
gutendocs	Ready	Preview, Comment	Feb 23, 2026 9:42pm

[flexseth]

Make FormTokenField more usable.. this needs to be tested in WordPress to see how it works.

[flexseth]

User experience is much more predictable.