Open skamansam opened 3 years ago
Having the same issue. I don't have any events bound to the child element, so it seems something is stopping event propagation from the child elements (not sure). @skamansam Did you ever figure out a resolution?
I take it back, it looks like the event is bubbling properly, but there is this on line 40 of multipane.js: if (resizer.className && resizer.className.match('multipane-resizer'))
since the child is now the target, it doesn't have the 'multipane-resizer' class, and so the code is never actually executed. I think this line needs to be modified to use .closest()
(https://developer.mozilla.org/en-US/docs/Web/API/Element/closest) to check parent elements and target the actual resizer. Polyfills exist if needing to allow backward compatibility for older browsers.
I've got a workaround for anyone running into this issue in the meantime...
First, add a ref to the multipane-resizer component. Then, give the child elements a listener for the mousedown
event so we can retarget:
<multipane-resizer ref="resizer" class="d-flex align-items-center">
<div class="grabber" @mousedown="mousedownParent"></div>
</multipane-resizer>
Lastly, create the handler to send the event as the parent element instead of the child:
mousedownParent(e) {
var new_e = new e.constructor(e.type, e);
e.preventDefault();
this.$refs.resizer.$el.dispatchEvent(new_e);
}
I am trying to customize my resizer by adding icons as visual indicators. This works surprisingly well, but when the icons are clicked on, nothing happens - the resize doesn't work. I am using
@mdi/font
(for the icons) and Vuetify, all latest versions. My project is pretty much clean - I just started it today.Here is my code: