search

bokuweb / react-rnd

🖱 A resizable and draggable component for React.
https://bokuweb.github.io/react-rnd/stories
MIT License
3.9k stars 325 forks source link

Bug: tricky "custom" max width in OnResize event #557

Open ifier opened 5 years ago

ifier commented 5 years ago

Overview of the problem

I'm using react-rnd version [10.0.0]
My browser is: Chrome Version 75.0.3770.100 I am sure this issue is not a duplicate

Reproduced project

https://codesandbox.io/s/beautiful-firefly-d4u4l

Description

I've set maxWidth to (for example) 400px and making setState({ blockWidth: width > maxWidth ? maxWidth : width }) inside onResize event. But, when I'm resizing block, it can be bigger then maxWidth and when I've released mouse button - it will apply such maxWidth (400px).

It would be nice to don't show that and stop resizing on the maxWidth.

Which issue I'm trying to solve: I have block with width 400px and ability to resize it (left and right). I'm dragging left bound and making this block smaller - 350px. Then, I'm resizing block via right bound and making it smaller - 325px (50px from left and 25px from right). Then, when I'm resizing it via right bound and making it bigger, it should not become bigger then 350px (maxWidth - leftDelta). It is partially working like I have described, but when I'm releasing mouse button :(

Steps to Reproduce

  1. Controlled component with width (maxWidth can be applied as well, but bigger then inside onResize method - 450)
  2. Change state when onResize event fires and make small condition - width = width > 400 ? 400 : width;
  3. RND will resize properly only when mouse button will be released.

Expected behavior

Don't show that ability to resize more then we are setting up in onResize event.

Actual behavior

CodeSandBox

geowrgetudor commented 2 years ago

RND will resize properly only when mouse button will be released.

Did you find any workaround for this?