Reorder causing click events to not get fired

[TimoLehnertz]

Describe the bug

When a node receives a pointerdown event, a nodepicked message is emited.
inside of order.ts these messages get intercepted and content.reorder(view.element, null) gets called. Moving the picked node to the top.
So far, so good. But the reordering temporarily removes and readds the element from the document. This seems to prevent click events on nodes to ever be fired because the mousedown event is fired on a node that is no more considered the same to the one where the mouseup event is fired. (They are the same but got moved in the dom tree).
Uncommenting content.reorder(view.element, null) disables the reordering but enables click events to be fired again.

For some reason I am only able to reproduce this with react. I also tried angular but there clicks work fine. I cant say why that is.

additional info

I got this but on the following versions:

• area-plugin 2.1.5
• 1.something
• the current main branch
• React 18
• React 19

I did some experiments and I did find a workarround. When the nodepicked message is sent not on mousedown but instead on mouseup and then the reorder function gets called inside a timeout then problem is fixed.
It is a hacky solution but it works. If I had a cleaner solution I would make a pr right away.

Example to reproduce

https://codesandbox.io/p/devbox/rete-js-v2-customization-forked-jxgc4h?from-embed=

How to reproduce

• Create a react rete app
• Add a click listener to anything inside of a node
• It will not fire
  Heres a codesandbox with the steps to reproduce the bug:
  https://codesandbox.io/p/devbox/rete-js-v2-customization-forked-jxgc4h?from-embed=

Expected behavior

Click events should always be fired.

Dependencies

Platform

Chrome

Relevant log output

Code of Conduct

• I agree to follow this project's Code of Conduct

[Ni55aN]

issue.html

The issue is reproducible in the native JavaScript. When an element's position in the DOM is changed using a method like insertBefore, it appears to disrupt the previously registered click event handler

If the onClick handler is critical, try this workaround: instead of AreaExtensions.simpleNodesOrder(area), implement a solution that changes the z-index.

Let's see how critical it is. Maybe it makes sense to make it an official extension, an alternative to simpleNodesOrder, when I get to it

[TimoLehnertz]

I tried your suggestion with z-index and it works like a charm.
For anybody coming across the same issue, heres my updated code for the order extension:

export function zIndexNodesOrder<Schemes extends BaseSchemes, T>(base: BaseAreaPlugin<Schemes, T>) {
  const area = base as BaseAreaPlugin<Schemes, BaseArea<Schemes>>

  let lastOrderedNodeElement: HTMLElement | null = null;

  area.addPipe(context => {
    if (!context || typeof context !== 'object' || !('type' in context)) return context

    if (context.type === 'nodepicked') {
      const view = area.nodeViews.get(context.data.id)

      if (view) {
        if (lastOrderedNodeElement !== null) {
          lastOrderedNodeElement.style.zIndex = 'auto'
        }
        view.element.style.zIndex = '1'
        lastOrderedNodeElement = view.element
      }
    }
    if (context.type === 'connectioncreated') {
      const view = area.connectionViews.get(context.data.id)
      const { content } = area.area

      if (view) {
        content.reorder(view.element, content.holder.firstChild)
      }
    }
    return context
  })
}```
As mentioned replace by `AreaExtensions.simpleNodesOrder(area);` by  `zIndexNodesOrder(area);`.

I only tested this in react. Im not sure about the other renderers.
When more people test this it might really be worth adding to the official extensions.