Bug in Nested Vue-Drag-Resize Components

[mikestokes]

I came across a bug that occurs if you have nested vue-drag-resize components.

What Happens

The child vue-drag-resize will not show it's resize handles.

Why

The bug is caused by the following CSS selected that is not specific enough for nesting:

.inactive .vdr-stick

This selector will be applied to the nested component. E.g. if you click the child component then it correctly gets the .active class applied and the parent gets the .inactive class applied. But, the selector above causes the sticks to not show as the parent has the .inactive class so the selector matches and the child will not have the sticks.

Work Around

In the mean time, I simply worked around it by being more specific in the CSS selector in my app:

.vdr { .widget.active { .vdr-stick { display: block; } } }

Nested children have the .widget class and the .active class is applied by vue-drag-resize so this works.

[alexpopovme]

Working with v2.0.3 for Vue3 here is my quick workaround for child elements:

a CSS rule: div.vdr.active > div.content-container ~ div.vdr-stick { display: block; } a separate module exporting function deactivateLastClicked to call on click event @clicked="onClicked"

function onClicked (ev) {
      deactivateLastClicked(ev.currentTarget)
    }

// works with this style to display sticks for child only: div.vdr.active > div.content-container ~ div.vdr-stick { display: block; }

let lastClicked = null

export function deactivateLastClicked (el) {
  if (el === lastClicked) return

  if (!lastClicked) {
    lastClicked = el
    return
  }

  lastClicked.classList.remove('active')
  lastClicked.classList.add('inactive')

  el.classList.remove('inactive')
  el.classList.add('active')

  lastClicked = el
}