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
Related
There is one div that is always wider than the page have available space for it. It is placed in a container with overflow-x: visible, which in turn is placed in a flex container.
So, with this layout, if you click on this div and then press the left-right arrows on the keyboard, the container will scroll. This is the expected behavior.
Now I need to add an onKeyDown event handler to change the contents of the div when certain buttons on the keyboard are pressed (including left-right arrows). In order for the onKeyDown event to work, you need to add tabIndex=0 for this block. But when I have the tabIndex added, the container stopped scrolling when the right-left arrows are pressed.
And this is not the expected behavior. I expect that scrolling the container with the left-right arrows from the keyboard will continue to work even if we started listening for keystroke events.
Probably, event.preventDefault() should be called to cancel this scrolling effect, but in this particular case I'm not calling this function.
Am I doing something wrong or maybe there is some bug in React?
Here is the code on CodeSandbox that demonstrates the problem:
https://codesandbox.io/s/onkeydown-arrow-scroll-problem-97e00l
EDIT1. Moreover, it looks like my "expected behavior" works in Chrome, Edge, but doesn't work in Firefox.
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?
I'm using UIKit to make a dropdown. The dropdown hovers over the content, which is wanted behaviour for me. When the button is so close to the bottom of the screen that it won't have enough space to show the dropdown itself totally, it pushes the screen focus down. I'm not quite sure what's causing this, the dropdown itself gets display:block; when the button is clicked, but it needs that to be visible.
Is there some way to open the dropdown, but without the screen jumping to the bottom? (So people can see they're missing content and their reaction should be to scroll down a bit?)
I made a Codepen to show what's happening. http://codepen.io/InstaK/pen/GWYwdM
We know that, the default functionality of a space bar in browser is to scroll to down if no input is active. similarly shift+space bar scroll top.
In my app, I'm using Jquery dialog on which if I press space bar when no input is active the background is scrolled instead of the dialog.
So, I added tabIndex = -1 which works fine when the dialog height is big (Means when the dialog has a scrollbar). But it is not working when the dialog has no scrollbar (Only the background is scrolling)
<div id="contactContainer" class="default-dialog" tabindex="-1"></div>
I don't want the user to prevent the space bar typing when no input is active. The scrolling should work normal as I press the space bar. If there is no scrollbar on the dialog, nothing should happen if I press the space bar.
Is anybody faced the same situation? Please give me a suggestion
The issue is, I've a container class which has some overflow elements. I did the following before I open the dialog
$('body, .container').addClass('overflow-hidden');
and I removed the class in the onClose event of the dialog
CSS:
.overflow-hidden { overflow: hidden}
Lets say I have an input with position fixed and wherever user scrolls, it would follow the user view. However, when an input is focus, it triggers the iPad keyboard, the input is jumping to the top and the window is scrolling to top as well. Is there anyway to prevent this happening and remaining the input wherever it is??