-
Notifications
You must be signed in to change notification settings - Fork 368
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add stopPropagation call when resizing #82
base: master
Are you sure you want to change the base?
Conversation
I don't think this is necessary to prevent propagation inside the library itself. |
Would be great if this could be merged :) |
the solution does not work |
@rtxu any solution for using it as HOC ? |
@nasiruddin-saiyed I am still trying to figure out why e.stopPropagation() doesn't work for my case. I'll post the result once I confirmed. |
I reproduced my scenario in here. I tried to use e.stopPropagation(), but it didn't work. Then I gave e.preventDefault() a try and It worked !! Anyone can help me know why? |
@rtxu i haven't tried yet but i'll take a look at your repo when i'm little free. Lastly what i did was wrap |
If anyone else is still waiting for this to land, a friendly reminder that this patch can be copied via monkey patching: const { Resizable, ResizableBox } = require('react-resizable');
let _resizeHandler = Resizable.prototype.resizeHandler;
Resizable.prototype.resizeHandler = function () {
let resultFn = _resizeHandler.apply(this, arguments);
return function (e) {
let result = resultFn.apply(this, arguments);
e.stopPropagation();
return result;
};
};
// Still use ResizableBox later on in code Oddly I needed to omit the recommended |
I'm also using react-draggable and react-resizable together. In order to avoid conflicts, I had to apply stopPropagation on my custom ResizeHandle's onMouseDown, onMouseUp and onTouchEnd. E.g.: const ResizeHandle = forwardRef((
{
onMouseDown,
onMouseUp,
onTouchEnd,
...
},
ref
) => {
const handleMouseDown = (evt) => {
evt.stopPropagation();
onMouseDown(evt);
}
const handleMouseUp = (evt) => {
evt.stopPropagation();
onMouseUp(evt);
}
const handleTouchEnd = (evt) => {
evt.stopPropagation();
onTouchEnd(evt);
}
return (
<button
ref={ref}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
onTouchEnd={handleTouchEnd}
...
/>
)
}); This way I could avoid monkey-patching the component. Also, I could avoid wrapping the Resizable in a div by using a nodeRef in the draggable component: const nodeRef = useRef(null);
return (
<Draggable
nodeRef={nodeRef}
...
>
<Resizable
handle={(axis, ref) => <ResizeHandle ref={ref} axis={axis} />}
...
>
<div
ref={nodeRef}
....
/>
</Resizable>
</Draggable>
) |
Solves #18
What was done
Added a call to
stopPropagation
onresizeHandle
callback to avoid the propagation of the event.Docs
Draggable
andResizable
at the same time inTestLayout
.