yansern / vue-multipane

Resizable split panes for Vue.js.
https://yansern.github.io/vue-multipane/
Other
588 stars 125 forks source link

Bug when pane contains svg #19

Open maxvanceffer opened 6 years ago

maxvanceffer commented 6 years ago

I have highchart inside of pane, and when click on it, there error raised with text: TypeError: t.className.match is not a function

because t is path element and it's className is array, and really array has no function match.

VueComponent.onMouseDown vue-multipane/dist/vue-multipane.esm.js:3:560

ulizko commented 5 years ago

@maxvanceffer I also had this error with svg files. I just add to the "mousedown" event handler with the "stop" modifier

<div class="sort-icon" @mousedown.stop>
   <svg>...</svg>
</div>
maxvanceffer commented 5 years ago

Thx... will try, this hack. But as i see, developers already have a pull request, which fix this error.

maxvanceffer commented 5 years ago

https://github.com/yansern/vue-multipane/pull/6

francisashley commented 3 years ago

Unfortunately it is not always possible to add @mousedown.stop above the svg.

Another solution would be to suppress the error in a component, page or layout file further up the component tree:

errorCaptured(error, vm, info) {
  if (error.message === 't.className.match is not a function') {
    return false // prevent the error from propagating
  }
}
RobbeR commented 3 years ago

I have the same problem, and none of the solutions above helped. Any chance to fix this in the future? Thanks!

lkjimy commented 3 years ago

Having the same issue here. I have another plugin inserting svgs on the page. Error appears when the svgs are clicked.

image
image

EDIT: The solution from #6 pull request worked for me.

wangqh commented 2 years ago

阻止冒泡虽然能解决问题,但不太优雅; 所以希望能从根儿上解决,如:if (typeof t.className === 'string' && t.className.match('multipane-resizer'))