I have a React App where the user can toggle between different views of the same data structure. When toggling from one view to another, the browser window sometimes automatically scrolls vertically. Instead I am expecting the window to not scroll when possible.
The CodeSandbox here reproduces the issue:
https://codesandbox.io/embed/magical-chebyshev-otlpu?fontsize=14&hidenavigation=1&theme=dark
If you scroll down, then click on "CLICK TO SWITCH VIEW BELOW", you will notice that there's an automatic scroll to the top happening.
I suspect this is an issue with MUI TextField. If I change the MUI TextField to a div, the issue does not show up, so I don't think this is due to React.
Related
I use React MUI and some components disable my draggables.
I have put draggables on my page, that works perfectly.
When my draggable is dragged, I change some nodes in the page.
I'm on React MUI and I use tooltips, modals and menus on that page. After opening one of them and close it, no draggables can be dragged anymore. I mean that changing some nodes in the page makes that the drag ends directly.
Is there an event inserted or something like that that ends the drag action if an element is changing in the page ?
I found a workaround.
Actually this happens on Chrome and Safari only. Adding a setTimeout of 10ms before changing the DOM makes the job.
I have a basic create-react-app with Material/MUI text field and button. When I tab from the textfield to the button, it creates an animation on the button where the middle part slightly grows and shrinks. I'm trying to figure out how to get rid of that animation and just show a simple button that has focus. Toggling the options in Chrome debugger hasn't helped me track down where this animation is being created (focus, hover, etc.). In fact, anytime I change any property in the CSS panel it turns the animation off and makes it harder to track down what is causing this.
Thanks.
I have a vertical swiper where in one of the slides I have a box with overflowing Y content, I want the user to be able to scroll vertically within the box. But in both dektop and android mousescroll is not working. No scroll event is generating from within the box, and scroll is interpreted as swiping. I also have a multiline text field inside same slide but I am able to scroll in that, so it must be possible. How can I make it work the way I want to?
I'm making a sidebar for my project and I'm using div transitions to give a smooth effect on collapse. However I have Material-ui (v4.12.3) TextField inside, and during the transition of opening the div, the height of the text field changes to 496px. Adding maxHeight style doesn't prevent a limit and once you interact with the field, it returns to normal (16px). Has anyone had this interactions with transition and mui text fields before?
I use React and Material-UI. I use huge Popover with the Tooltip behaviour. The goal is to display data when the user hover some links. It's working well but i have a problem about scrolling.
I want to be able to scroll INSIDE the popover when the Mouse is inside it. The default behaviour is to let the user scroll the entire page instead of focus on the popover.
I have set a CodeSansBox to show you.