vue-flow: 🐛 [BUG]: Can't show/hide handle during connection process.

Is there an existing issue for this?

  • I have searched the existing issues and this is a new bug.

Current Behavior

When I start a connection, even if I hide (display:none) handle div visually, the functionality of the handle remains active on the screen and I observe a visual “magnetic connection” effect. Vue-flow can only disable when the connection is completed or canceled.

Expected Behavior

When the handle is hidden its functionality must disappear immediately even during the connection process. Except maybe for the source handle involved in the current connection.

Steps To Reproduce

  1. create two nodes: one node with a source handle and another node with a target handle
  2. Create a code that hides (display:none) the target handle div after the connection is started on the source handle. For example:
 watch(
      connectionStartHandle,
      (pre, post) => {
            targetHandleReactiveStyle.display='none'
       }
)
  1. Observe that the “magnetic” functionality is still working on the location where the handle is not displayed anymore.
  2. Cancel the connection and start it one more time. Now the “magnetic” function finally disappears.

Relevant log output

No response

Anything else?

No response

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 18 (10 by maintainers)

Most upvoted comments

you are right. I have the same behavior in my sandbox as you have in yours. Maybe something is different in my local env. Need to investigate it. For now, I’m closing the bug.