Conversation
… element (fixes PlatformNetwork/bounty-challenge#21924) The drag-event handlers (onDragOver, onDragLeave, onDrop) were attached to a wrapper div with display:contents, which does not generate a CSS box. In Chromium-based renderers (Tauri WebView2), drag events do not properly fire on display:contents elements, causing e.preventDefault() to never be called in handleDragOver. Without that call, the browser treats the area as an invalid drop zone and shows the not-allowed cursor. Additionally, dragState() was captured as a stale const inside the <For> callback body, so isDraggedOver and dropPosition props were frozen at their initial values and never updated reactively. Changes: - Move onDragOver, onDragLeave, onDrop props into the Tab component itself so they fire on the actual rendered tab div element - Add ref prop to Tab to pass tabRef for getBoundingClientRect() in handleDragOver position calculation - Call dragState() directly in JSX expressions for reactive updates - Remove the display:contents wrapper div entirely, use fragment (<>)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix for PlatformNetwork/bounty-challenge#21924: Tab drag-and-drop reordering non-functional
Root Cause
The drag-event handlers (
onDragOver,onDragLeave,onDrop) were attached to a wrapper<div>withdisplay: contents(line 1067), which does not generate a CSS box. In Chromium-based renderers (Tauri WebView2), drag events do not properly fire ondisplay: contentselements. BecausehandleDragOvernever fires,e.preventDefault()is never called, so the browser treats the area as an invalid drop zone and shows the not-allowed (🚫) cursor.Additionally,
dragState()was captured as a staleconstinside the SolidJS<For>callback body (line 1051), soisDraggedOveranddropPositionprops were frozen at their initial values and never updated reactively.Changes
onDragOver,onDragLeave, andonDropare now props on theTabcomponent and are attached directly to the tab's root<div>element (which has a real CSS box)refprop to Tab: PassestabRefforgetBoundingClientRect()calculation inhandleDragOverdrop-position detectiondragState()directly in JSX expressions instead of capturing it as a stale const<>) since the wrapper is no longer neededFiles Modified
src/components/editor/TabBar.tsx