Skip to content
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

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

Open
ducle-infotrack opened this issue May 22, 2024 · 1 comment

Comments

@ducle-infotrack
Copy link

ducle-infotrack commented May 22, 2024

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):

  • 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,
},
}

@SaebAmini
Copy link

SaebAmini commented Oct 14, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants