BetterTyped / react-zoom-pan-pinch

🖼 React library to support easy zoom, pan, pinch on various html dom elements like <img> and <div>
MIT License
1.49k stars 268 forks source link

Focus input trigger transformContentComponent to scroll to show focused cursor, but not update transform state. #477

Open ducle-infotrack opened 4 months ago

ducle-infotrack commented 4 months ago

Describe the bug Focus input, will trigger transformContentComponent to scroll, but that event not be captured and not update transform state. So the transformContentComponent was location in wrong destination when zoomed out.

To Reproduce Steps to reproduce the behavior:

  1. Zoom in the transformContentComponent which has a input
  2. Click on input the start focus, the transformContentComponent will scroll to show cursor of the input.
  3. Touch and pinch the transformContentComponent all the way until seeing it edge on the left.
  4. Keep pinching, the transformContentComponent will keep go the the left, now we have a extra space of the transformContentComponent and the TransformsComponent (the wrapper) right edge.
  5. Zoom out, now the location of the transformContentComponent is incorrect.

Expected behavior the transformContentComponent should be reset correctly.

Screenshots If applicable, add screenshots to help explain your problem. image

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

config

{ smooth: true, centerZoomedOut: true, disablePadding: true, minPositionX: 0, minPositionY: 0, maxScale: 2, minScale: 1, limitToBounds: true, panning: { velocityDisabled: true, }, velocityAnimation: { disabled: true, }, alignmentAnimation: { disabled: true, }, zoomAnimation: { disabled: true, }, }