fix resizing sometimes not working (and selecting text)

Last friday a child <div> was added inside the ResizeHandle component,
which made the parentElement/classList checks fail on the event.target
here. This would only fail (and select all the text) when dragging exactly on
the grey line (the div), not the transparent margin around it.

use closest to make sure we have the root element of the handle.
pull/21833/head
Bruno Windels 2018-12-18 14:27:10 +01:00
parent cdcb3c1a55
commit 3ddc8baed1
1 changed files with 5 additions and 3 deletions

View File

@ -84,8 +84,10 @@ export class Resizer {
}
_onMouseDown(event) {
const target = event.target;
if (!this._isResizeHandle(target) || target.parentElement !== this.container) {
// use closest in case the resize handle contains
// child dom nodes that can be the target
const resizeHandle = event.target && event.target.closest(`.${this.classNames.handle}`);
if (!resizeHandle || resizeHandle.parentElement !== this.container) {
return;
}
// prevent starting a drag operation
@ -96,7 +98,7 @@ export class Resizer {
this.container.classList.add(this.classNames.resizing);
}
const {sizer, distributor} = this._createSizerAndDistributor(target);
const {sizer, distributor} = this._createSizerAndDistributor(resizeHandle);
const onMouseMove = (event) => {
const offset = sizer.offsetFromEvent(event);