fix: sometimes unable to drag actions in lower groups #3115

webui/src/Controls/ActionSetEditor.tsx

@@ -9,7 +9,7 @@ import {
 	faPencil,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import React, { memo, useCallback, useContext, useMemo, useRef, useState } from 'react'
+import React, { memo, useCallback, useContext, useDeferredValue, useMemo, useRef, useState } from 'react'
 import { DropdownInputField, NumberInputField, TextInputField } from '../Components/index.js'
 import { DragState, MyErrorBoundary, PreventDefaultHandler, checkDragState } from '../util.js'
 import { OptionsInputField } from './OptionsInputField.js'
@@ -191,7 +191,13 @@ function ActionRowDropPlaceholder({ setId, dragId, actionCount, moveCard }: Acti
 		},
 	})
 
-	if (!isDragging || actionCount > 0) return null
+	// Defer the isDragging value to ensure dragend doesn't fire prematurely
+	// See https://github.com/bitfocus/companion/issues/3115
+	// https://bugs.webkit.org/show_bug.cgi?id=134212
+	// https://issues.chromium.org/issues/41150279
+	const isDraggingDeferred = useDeferredValue(isDragging)
+
+	if (!isDraggingDeferred || actionCount > 0) return null
 
 	return (
 		<tr ref={drop} className={'actionlist-dropzone'}>