🐛 (buttons) Fix dynamic buttons edge not showing

apps/builder/src/components/VariableSearchInput.tsx

@@ -25,7 +25,9 @@ import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
 type Props = {
   initialVariableId?: string
   autoFocus?: boolean
-  onSelectVariable: (variable: Pick<Variable, 'id' | 'name'>) => void
+  onSelectVariable: (
+    variable: Pick<Variable, 'id' | 'name'> | undefined
+  ) => void
 } & InputProps
 
 export const VariableSearchInput = ({
@@ -68,6 +70,9 @@ export const VariableSearchInput = ({
   const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value)
     if (e.target.value === '') {
+      if (inputValue.length > 0) {
+        onSelectVariable(undefined)
+      }
       setFilteredItems([...variables.slice(0, 50)])
       return
     }

apps/builder/src/features/graph/components/Nodes/GroupNode/GroupNode.tsx

@@ -90,8 +90,6 @@ const NonMemoizedDraggableGroupNode = ({
   const [debouncedGroupPosition] = useDebounce(currentCoordinates, 100)
   const [isFocused, setIsFocused] = useState(false)
 
-  const [ignoreNextFocusIntent, setIgnoreNextFocusIntent] = useState(false)
-
   useOutsideClick({
     handler: () => setIsFocused(false),
     ref: groupRef,
@@ -151,15 +149,15 @@ const NonMemoizedDraggableGroupNode = ({
   }
 
   useDrag(
-    ({ first, last, offset: [offsetX, offsetY], distance, event, target }) => {
+    ({ first, last, offset: [offsetX, offsetY], event, target }) => {
       event.stopPropagation()
       if ((target as HTMLElement).classList.contains('prevent-group-drag'))
         return
       if (first) {
+        setIsFocused(true)
         setIsMouseDown(true)
       }
       if (last) {
-        if (distance[0] > 1 || distance[1] > 1) setIgnoreNextFocusIntent(true)
         setIsMouseDown(false)
       }
       const newCoord = {
@@ -179,14 +177,6 @@ const NonMemoizedDraggableGroupNode = ({
     }
   )
 
-  const focusGroup = () => {
-    if (ignoreNextFocusIntent) {
-      setIgnoreNextFocusIntent(false)
-      return
-    }
-    setIsFocused(true)
-  }
-
   return (
     <ContextMenu<HTMLDivElement>
       renderMenu={() => <GroupNodeContextMenu groupIndex={groupIndex} />}
@@ -195,7 +185,6 @@ const NonMemoizedDraggableGroupNode = ({
       {(ref, isContextMenuOpened) => (
         <Stack
           ref={setMultipleRefs([ref, groupRef])}
-          onClick={focusGroup}
           data-testid="group"
           p="4"
           rounded="xl"

apps/builder/src/features/graph/utils.ts

@@ -56,6 +56,7 @@ import {
   blockTypeHasItems,
   isChoiceInput,
   isConditionBlock,
+  isDefined,
 } from 'utils'
 
 const roundSize = 20
@@ -456,4 +457,6 @@ const parseDefaultBlockOptions = (type: BlockWithOptionsType): BlockOptions => {
 }
 
 export const hasDefaultConnector = (block: Block) =>
-  !isChoiceInput(block) && !isConditionBlock(block)
+  (!isChoiceInput(block) && !isConditionBlock(block)) ||
+  (block.type === InputBlockType.CHOICE &&
+    isDefined(block.options.dynamicVariableId))

apps/builder/src/features/variables/components/VariablesButton.tsx

@@ -46,7 +46,7 @@ export const VariablesButton = ({ onSelectVariable, ...props }: Props) => {
         <VariableSearchInput
           onSelectVariable={(variable) => {
             onClose()
-            onSelectVariable(variable)
+            if (variable) onSelectVariable(variable)
           }}
           placeholder="Search for a variable"
           shadow="lg"