Textbox loses focus in modal on scroll - javascript

I'm using AngularJS with UI Bootstrap to display a form in a modal dialog. However, any input loses focus when the scroll bar is clicked.
This happens if the scroll bar is associated with a div or with the window.
If the text input was not inside a modal then it maintains focus during scroll.
An example can be found at http://plnkr.co/edit/uaXiT1NedWjUm2DOKyrD?p=preview
There is nothing special about the input, it's as simple as can be
<input type="text" id="textinput" name="textinput"/>
Is there a way to maintain focus whilst the user scrolls?
Thanks
Chris

It's not losing focus when you scroll, it's losing focus when you click on the scrollbar. If you have a mouse wheel, for example, you can scroll the modal content without losing focus.
Basically clicking on the scrollbar is the same as clicking anywhere else on the modal that isn't in your input field.
It is true that some scrollbars won't do this (at least in Chrome). I don't know what the difference is. I have confirmed that it happens on anything set to overflow-y: auto or scroll, at least. It's not related to AngularJS.
Click on the Contact Us button and see it happen in pure Bootstrap: http://www.bootply.com/8R8QWNO6Qv
I don't expect there will be an easy solution for you to prevent this that doesn't involve tracking where focus is and such; and that will be quite complicated on multi-input forms.

Related

Trigger click on div so it will scroll on pagedown and pageup

When I physically use the mouse to click on my div, then pageUp and pageDown scroll the div. However, when I programmatically trigger a click on the div, then pageUp and pageDown fail to scroll the div. How can I get pageUp and pageDown to scroll the div without the user having to physically click in the div?
Details:
What I am trying to do is to let the user pageDown to the bottom of the div, then one more pageDown loads the next set of content into the div and auto-scrolls to the top; and vice versa for pageUp. It works great as long as the user has clicked inside the div. I am trying to make it so they don't have to actually click in the div to be able to scroll via pageDown or pageUp.
I am certain that the programmatic click is happening because the click event listeners get triggered. My pageUp listener also works to load the previous set of content (because the scroll bar starts out at the top).
I am developing within Node-Webkit (Chrome) and angular.js, but cross-browser support is also necessary.
Things I have tried:
$('#div').click();
$('#div')[0].click();
$('#div').trigger('click');
$('#div').focus();
$('.focusableThingInsideDiv').focus();
$('#div').scroll(); //just trying random things at this point
I have also tried stopping the default browser behavior and implementing the scroll myself (via setting scrollTop). This technically works. However, I would prefer not to override the default behavior if possible.
The page up and page down work, after you click on the div, because it gains focus. So, although it does not show as a focused element after clicking, you still want the $('#div').focus() line.
The tricky part is that to be able to focus on a div programatically you need to give it a tabindex. Something like <div tabindex="0">...</div> will make the focus suddenly work in Chrome.
Other browsers (IE and Firefox) do not seem to required this. The focus() will work from the start but adding tabindex=0 will not hurt.

modal popup and parent frame

When a modal dialog box is open in iFrame, intially I can't focus a textbox in parent frame. The text box gets focused/selected and the looses focus right away. When I click (right or left click) on the content of modal dialog box, then I can select/focus the text box in parent frame. The same thing happens with drop down menu, it closes right away.
I've tried jquery trigger and parent.foucs but neither worked, is there something similar I can do programmatically?
I'm using dojo framework but I'm thinking its more of a html issue.
Any help is greatly appreciated.
Thanks
figured it out. Had to set autofocus="false" for dialog setup. It's a framework specific solution.

GWT - how to prevent user from accessing other parts of application when popup is showing

I am rendering a html page that contains a button.
I have bind a method to browser window that opens a gwt popup when the button is invoked.
My problem is, when i scroll the page, the popup stays fixed and the page scrolls. I want the popup to be scrolled along with the html page.
Also, the user should not be allowed to access other parts of app when the popup is open.
Can somebody help me
Assuming you are using the PopupPanel class, it is as easy as calling the right constructor:
PopupPanel(boolean autoHide, boolean modal)
autoHide - true if the popup should be automatically hidden when the user clicks outside of it or the history token changes.
modal - true if keyboard or mouse events that do not target the PopupPanel or its children should be ignored
So if you set the modal parameter, you cannot click outside of the popup, and also the scroll event should not happen at all (that is somewhat right, as scrolling a popup with a fixed positioning doesn't make much sense... Oh well, for a non advertising purpose at least).

Can you give a Modal Window (using Twitter-Bootstrap) a z-index?

I have a form using Qtip2 and if the user submits the form with invalid values, the qTips fire correctly (so far so good). However, say the user wants clicks on a button that triggers the modal window to appear, the modal window appears above the form but below the qtips. So, I'm thinking, just give the Modal window a higher z-index value.
Modal Example with qTip
Has anyone else run across this behavior and what did you do to resolve it?
The lastest version of bootstrap shows the modal has a z-index of 1050. I believe the default z-index of qTip2 is 15001, and goes higher from there. You would have to up the z-index of the modal.
Edited: Removed incorrect information.

How to disable page scroll when opening dialog box?

I'm having significant trouble with a jquery dialog box that opens in response to a .hover() command, and closes upon leaving the hover (which of course takes two functions).
When the dialog box opens a little bit out of the page, the entire page scrolls up; I want to disable this but I can't figure out how.
I have tried:
using event.preventDefault()
putting the ui-dialog css as 'position: relative'
setting the scroll bar back where it was (but this looks terrible)
Any other ideas?
Edit: Here is the code in jsfiddle: http://jsfiddle.net/TzUf3/1
Make sure the popup has its position fixed, then set the body to overflow:hidden;
When the dialogue is closed remove the overflow attribute.

Categories

Resources