Fix item_select dropdown not updating input on selection#367
Fix item_select dropdown not updating input on selection#367tpanajott merged 2 commits intoNSPManager:develfrom
Conversation
Two bugs: (1) <button><li> inside <ul> is invalid HTML — browsers can restructure the DOM in ways that prevent the click from reaching the <li> handler. (2) The click handler called focus() on the outer container div, which sits outside the .group div, immediately destroying group's :focus-within and racing against the value being set. Fix: remove the <button> wrapper (move its classes to <li>), update the filter selector from "> button > li" to "> li", and replace the focus() call with blur() on the input to cleanly collapse the dropdown after the value is set. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Root cause: clicking a non-focusable <li> moves browser focus to the body on mousedown, stripping :focus-within from the .group div and setting the dropdown to display:none before the click event can fire. Neither direct binding nor document-level event delegation for 'click' helps because the element is hidden by the time click would land. Fix: intercept 'mousedown' on document (fires before any focus change), call preventDefault() to keep the input focused and the dropdown visible, then set the value and explicitly blur to close the dropdown. Also removes the invalid <button> wrapper around <li> elements (a <button> inside <ul> containing <li> is invalid HTML), and updates the filter selector from "> button > li" to "> li" accordingly. Tested-by: James Mulcahy Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
@tpanajott I found that the scene selection popup wasn't working -- when I click a scene, the list disappears, but the input box wasn't getting populated with the selected value. I tracked it back to the onclick events not being received, and tried a few different approaches -- Claude concluded that mousedown is the safest hook here. It also spotted an issue with the nesting of I've tested this and it works reliably for me! |
|
Strange, this is the first I hear of it. But I'm no expert in JavaScript, that's for sure. We also want to rewrite that whole guided multi-step selection process as it's done really complicated with cached steps in session variables being passed around in steps. We are probably going to go for something like react to do it but it's not something we've begun looking into. I'm planning on perhaps taking a look this weekend. This looks like a good fix for now 👍 |
2 participants
Summary
<li>causes the browser to move focus to the body onmousedown, stripping:focus-withinfrom the.groupdiv and collapsing the dropdown (display:none) before aclickevent can land — so the handler never firesclicktomousedownwithevent.preventDefault()to intercept the selection before focus moves, keeping the input focused and the dropdown visible, then explicitlyblur()s the input to close<button>wrapper around<li>elements (<button>inside<ul>containing<li>is invalid HTML) and updates the filter selector from> button > lito> liTest plan
🤖 Generated with Claude Code