Focus input trigger transformContentComponent to scroll to show focused cursor, but not update transform state.
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:
- Zoom in the transformContentComponent which has a input
- Click on input the start focus, the transformContentComponent will scroll to show cursor of the input.
- Touch and pinch the transformContentComponent all the way until seeing it edge on the left.
- 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.
- 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.
Desktop (please complete the following information):
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
Smartphone (please complete the following information):
- Device: [e.g. iPhone6] Laptop
- OS: [e.g. iOS8.1] Window
- Browser [e.g. stock browser, safari], Chrome
- Version [e.g. 22]Version 125.0.6422.60 (Official Build) (64-bit)
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, }, }
I've noticed the same issue. Browsers always jump to focused elements to ensure they are in view.
When that happens on a focusable element that's not fully in view, it causes react-transform-component to scroll/jump, but it doesn't update its transform state, getting into an unrecoverable state until refreshed.
The only workaround seems to be not having focusable elements inside the wrapper, but that's a huge compromise.