I have a situation that happens in several of my components, where I show a new component, that is absolutely positioned and has an input control. I am using some basic logic to set the input control to set focus, which it does successfully.
When the control pops up, I can start typing right away as expected. However, if I click the "Tab" key, in this specific scenario, it navigates the underlying component to the next cell in the grid, instead of the top level div tab control.
However, If I click into the input box on this page with a mouse click, and then type, the tab key works as expected, as it appears the top level component/div does not have focus even though the input control does? Considering the input already has focus, I"m not sure what clicking into the input does, but it effectively solves my issue.
So, what is the difference in setting focus on the input versus clicking into this input box? Is there a way to programmatically give this input the focus it gets that matches clicking into it with mouse?
Related
I am creating an Acrobat file with multiple pages. Each page has a map and a list of names down the side. Each name is a button and I have JavaScript entered for each, so that when you hover the mouse over the button, the corresponding name shows up at it's location on the map (via a text field), and then when you move your cursor away from the button, the text field disappears.
Here is the code I have for MouseEnter:
this.getField("Kyle Deal").display = display.visible;
Here is the code I have for MouseExit:
this.getField("Kyle Deal").display = display.hidden;
It works great if you stay on one page, but my problem is, is that when you hover the mouse over the button and the name appears and you move to a new page, and then come back, the text field is still there because the MouseExit never actually triggered when you were on the page the first time, no matter where your cursor is now. This happens way more often than it sounds like it might, pretty much every time someone uses this document at all.
Does anyone have an idea of how I can go about resolving this issue whether it be by a bit of JavaScript that clears all functions when you move to a new page, or maybe I can edit the MouseEnter function to go away after a certain period of time, or some other method inside Acrobat's settings?
One approach would need some field renaming (to make things easier). You would set all relevant fields to hidden when leaving the page.
Now with hierarchical field names, where the fields on page 2, for example, would have a name "p2.xxx", your command in the pageOut event would be
this.getField("p2").display = display.hidden ;
and that would do it.
Otherwise, you would have to hide field by field in the pageOut event.
The documentation suggests that hasTVPreferredFocus is only for tvOS, but other questions/answers suggest that it works for android as well. It seems to be working in some cases for me (e.g. when a screen initially loads), but in other cases it does not. In this case, I have a grid of selectable elements. When clicked, the item's index is stored and the hasTVPreferredFocus property is set to true on that item for the next time it renders. A new screen is pushed to the stack, and a button on the left side of the new screen is focused. When popping the stack, I want the originally selected item to regain focus, but the property is ignored, and a different element is automatically selected, specifically and consistently the first element in the row that was previously selected. It appears that the engine is trying to find the next closest item to the popped screen's last focused item, which happened to be on the left side of the screen, and ignores the hasTVPreferredFocus property. Since this property is not working as expected, is there any way to achieve this, by manually forcing/setting the focus to the correct element?
One of my attempts was to listen with the useFocusEffect event, which would temporarily disable the onBlur and onFocus events of the grid items, which visually made it look like the item I wanted was still selected, but internally the first item in the row still had focus, without the visual indicator. After moving the cursor, the visual indicator of the real selection appeared as expected (relative to the first item in the row, not the clicked item), while the originally clicked item was left with a "phantom" selection until the cursor moved back onto it.
Example of issue: https://i.imgur.com/k0LJNhH.mp4
My (failed) attempt: https://i.imgur.com/4epnkwO.mp4
Hi what you want todo if your using react-native-navigation is to grab the navigation onfocus event and then set focus in the on focus of navigation that or if your using a flatlist or flatlist grid view you should be able to use scroll to index or select that index if your saving it had the same issue my self
Lets say the user focuses on an input, the keyboard pops up.
Then he clicks a button, that just shows a tooltip, not important and I would like the keyboard not to close.
I tried this:
var dontclosekeyboard = document.getElementById('dontclosekeyboard_element_Id');
Then in the the capture phase, meaning i put 3rd parameter to true I try to stop propagation. It sadly does not work.
dontclosekeyboard.addEventListener('click', function(e){e.stopPropagation() }, true);
I am out of ideas, is there any other solution apart from manually doing a '.focus()' on the currently active element?
I had the same problem a while ago showing info-buttons next to form elements. First of all: we finally decided to do that in another way, and work around it.
As soon as you lose focus on your input field the keyboard will be closed and even setting the focus back will cause the keyboard to toggle which is really annoying- with one exception: your tooltip button is also an input field just styled as a button. This way you can set the focus back to the original input without any side effects.
I'n using the select2 jQuery plugin with an ajax call to retrieve items for the dropdown list as the user types. Multiple selections (tags) are allowed and custom selections are allowed. When the dropdown list appears, if I use the cursor keys to go to the item I want and hit enter or tab, then the everything works fine. The select2-selecting callback is triggered and the input gets updated with the selection text.
If I click on an option with the mouse, however, the select2-selecting callback is not triggered and the input is not updated. The only thing that happens is that the dropdown menu disappears, nothing else.
I have another select2 input on the same page that allows only one selection and no custom selections. Clicking dropdown items in that works fine. Example on the plugin site similar to what I'm doing respond to clicks too, so it's not a general bug with the plugin.
I am aware that select2 actually has a hidden, completely translucent container div the size of the screen that is added to the DOM whenever a select2 input has focus. The select2 input sits on top of this 'underlay' and everything else is underneath it. When the select2 input looses focus, the 'underlay' disappears. I thought that the problem might be that the underlay had a higher z-index than the input, so when I click a dropdown item I'm actually just clicking the underlay and causing the input to loose focus. Well, the input (9999) does have a higher z-index than the underlay (9998). I just wanted to rule that out.
This bit of javascript was the culprit:
input.on("select2-blur", function() {
$(this).select2('close');
});
I think that at one stage the dropdown menu was only disappearing if I tabbed out of the input, but if I clicked outside of the input when the dropdown was visible, it stayed there. I had this is as a means to get rid of the dropdown when the input lost focus. It was the cause of the problem though. Strangely, even though I've removed it now, the dropdown disappears appropriately when I click outside the input, but I don't know why that is.
I am trying to get a checkbox with a label to function so that when you have text selected in a contenteditable div, clicking on the label will not lose the selection from the div. The label still needs to apply the standard checkbox tick/untick upon clicking it, but keep the focus & selection intack on the div.
Doing a simple focus() on the div won't help as the selection will be gone (and caret is at the beginning). I could of course look into a way for storing the selection object and trying to assign it back after the label click, but isn't there any simpler way of keeping the selection?
(the reason I need to do this with label & checkbox is because I will be using jQuery UI buttons and I will need the the toggle functionality of them)
On a similar note, if you click the checkbox, you usually still keep the selection in the div, but at least on FF4, if you press the checkbox very frequently (<1s), it will lose the selection. Any idea what's going on there? answered below
example: http://jsfiddle.net/niklasvh/gULM9/
It's a Firefox bug marked 490367.
According to the bug description, double-click functionality on input fields will act unusually when there is a contenteditable div on the page.
I noticed the strange behavior while trying to replicate it manually so I guessed it was a bug. I don't know of any workarounds.