I have a text area which is a separate child component of an edit form, where the user can input long text. Above it, in the parent form, I have a SAVE button that I want to disable until the user makes an actual change to the text. I have it triggered now that when a change is made, it calls the parent component which triggers the SAVE button to enable (shows its color). But my problem is that it also jumps to the top of the page when it does this. The cursor stays where the user is inputting the text, but the scrollbar jumps. I realize that the parent is rerendering because the button has changed, but I want the scroll to stay where it is, with the cursor visible. How can I achieve this?
Related
I have button and textarea, which is invisible. When click on button textarea appears and is focused, the keyboard appears on ios(Safari), and the screen correctly scrolls to textarea.
However, if I wrap textarea with transition component screen does not scroll to textarea and textarea appears behind the keyboard. Please advise how I could have correct focus with transition?
I use vue 2.6.10
code example: https://jsitor.com/ZGmF0GPpqO
I have a DIV panel with different controls that should be animated to show and hide at a certain moment of time. At the same time, there are lots of elements inside which have different states.
The problem is when any element inside of the panel changes its state, the panel itself starting an animation (either show or hide animation). I think it's because the whole panel is re-rendered.
So, how should I explain to React Spring which state changes should force animation to restart? And how may I prevent parent panel DIV from re-render when children state are changed?
Here is what I am trying to do: When the user is clicking a button, a transparent overlay is opening. The background shouldn't be scrollable but stay at the scroll position. So what I am doing at the moment is that once the button is clicked, I safe the current scroll position via window.scrollY, then add overflow: hidden to both the html and body tag (which unfortunately scrolls the page to the very top), then proceed to scroll to the saved position inside the main div of the website. In most browsers these steps aren't noticeable so it seems like everything just stays at the same position. In Safari however, you can see that for a few ms the background scrolls to the very top and then back again.
So what I would like to know is how to execute multiple methods at once before the DOM updates. Or maybe you can think of another way of doing this?
Thank you!
I am creating a custom dropdown control and facing issue with the value popup position.
When I scrolling the page/parent div , the base input box position got changed, if value popup is open , then it not changing the position at all.
I have added window scroll event, but its not triggering as, scroll is happening in div level.
Again that div is made dynamically, so don't have direct access to that.
If there are any way to detect my base input box position changed, so that I can handle this problem.
I have a simple extjs form, where all the fields look like plain text when rendered.
When user hovers over the field, i need to show a edit icon (which i am thinking would be a tooltip) next to the field (indicating that the field is editable). And when user clicks on it, the field will get focus and made editable.
Is tooltip the right component ? If not, how can i achieve this.
Thanks
A tooltip would be a bad approach - mostly because if the person mouses away from the field, the tooltip would vanish.
A simpler approach would be to include the edit icon at all times, inside the same container as the field. The edit icon should be invisible normally. Then, when the person moves the mouse into the container, make the icon visible. On mouse-exit from the container, make the icon invisible again.