when elementDimensions is changed, it returns unexpected values

[net1692]

<div style={{width: w, height: h}}>
  <ReactCursorPosition>
    <Component />
  <ReactCursorPosition>
</div>

Before changing the w, h, the elementDimensions, position, isPositionOutside values are correct. But after the w, h is changed during isPositionOutside == false, the values shows unexpected values. For example, the x or y of the position can be negative number. and elementDimensions is not changed even if w, h are changed.

[ethanselzer]

@net1692 - Thanks for opening this issue. I'm having trouble reproducing the problem. I created a reduced case but I must be missing something. Please have a look and let me know your thoughts.

[net1692]

my test code is below. Please enter the cursor from bottom of the div. And then wait 1.5sec (Do not leave the cursor in the div). than the div is changed to landscape mode. At this case, if you move the cursor to the left side, you can see the x value shows the negative value.

Parent Component

class CustomPanel extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      x : 1455,
      y : 130,
      w : 444,
      h : 800,
    };
  }

  updateLayerAfter1sec = () => {
    this.intervalId = setInterval(() => this.updateLayer(), 1500);
  }

  updateLayer = () => {
    this.setState({
      x : 1100,
      y : 540,
      w : 800,
      h : 444
    });
  }

  render() {
    return(
      <div style={{
          position: 'absolute',
          left: this.state.x,
          top:this.state.y,
          width: this.state.w,
          height: this.state.h,
          border: '2px solid green'
        }}
        onMouseEnter={this.updateLayerAfter1sec}
      >
        <ReactCursorPosition>
          <Child propWidth={this.state.w} propHeight={this.state.h} />
        </ReactCursorPosition>
      </div>
    );
  }
}

Child Component render

    render () {
        const {
        detectedEnvironment: {
            isMouseDetected = false,
            isTouchDetected = false
        } = {},
        elementDimensions: {
            width = 0,
            height = 0
        } = {},
        position: {
            x = 0,
            y = 0
        } = {},
        isActive = false,
        isPositionOutside = false,
                commonInfo
    } = this.props;

        return (
            <div style={{width: this.props.propWidth, height: this.props.propHeight}}>
                {`x: ${x}`}<br />
                {`y: ${y}`}<br />
                {this.props.shouldShowIsActive && [`isActive: ${isActive}`, <br key="line-break"/>]}
                {`width: ${width}`}<br />
                {`height: ${height}`}<br />
                {`isPositionOutside: ${isPositionOutside ? 'true' : 'false'}`}<br />
                {`isMouseDetected: ${isMouseDetected ? 'true' : 'false'}`}<br />
                {`isTouchDetected: ${isTouchDetected ? 'true' : 'false'}`}<br />
            </div>
        );
    }

[ethanselzer]

Hi @net1692, Thanks for providing your test case. The latest release of react-cursor-position introduces the reset method, which may help correct the problem you identified in this issue. Please see the reset demo example for details.

[ethanselzer]

@net1692 - I'm closing this issue for now. If you find your use case is not corrected by v2.5.0, please reopen the issue. Thanks!