I have recently updated device to iOS 10 and facing issues with hiding iOS keypad when i switch from one view to another.It was working well with iOS 9.3.
Programmatically what i have done is, i was intercepting some element and auto focusing one input box when i navigate to second view. And when i move back to first view it was getting hidden but now with 10.0 it doesn't hide it automatically.
Because of privacy concern i am not able to post my code here but this is an angular code where i have written a directive which intercepts clicks on input box in the second view and auto focuses the same which in turn makes keypad popping up.
Now my requirement is to hide this keypad when i move back to first view.
As iOS 10 is very recently released any help or suggestion on this will be greatly appreciated.
N.B: Everything works well with iOS 8 and 9.
Here is what i have tried:
Tried hiding active DOM element.
document.activeElement.blur();
Also tried calling blur using target property of $element by passing that to my link function in the directive.
It looks like this is a bug in safari. I had the same issue today and was able to reproduce it with this fiddle:
https://jsfiddle.net/Lz652478/6/
It looks like if an input is removed from the dom via a touch event, the keyboard will become sticky. I've been able to get around it in my app by manually calling blur at the start of my event handler, before the route changes and the input is removed from the dom.
Related
When I use just plain ActionBar:
<ActionBar/>
when I changing route with:
this.$navigateTo(Catalog)
the native ios Back button appears normally,
but when I change action-bar like this:
<ActionBar title="some title"/>
or put other elements inside action-bar like this:
<ActionBar>
<NavigationButton text="Go back" android.systemIcon="ic_menu_back" #tap="goBack" />
<ActionBar/>
the default native ios Back button disappearing.
What I need in the end is default ios action-bar with custom title and native ios back button that appears when I navigate between components. Please help, thanks in advance!
Solved my problem. I was using ActionBar in my main component(where tabs where defined). Instead, I removed it from my main component and added its own ActionBar for every component. That solved the problem. Now the default ios back-button displaying properly with any other combinations of params or nested elements and it doesn't matter wether you route to frame of same component or not.
I'm unable to reproduce the issue on my end, the NavigationButton is still visible when I use the exact code snippet above, tested with iOS v12.1.4. Please share the Playground sample if you still have the issue on your end.
However, you will not be able to modify the tap handler on iOS as mentioned in the docs.
In iOS, the back button is used explicitly for navigation. It
navigates to the previous page and you cannot handle the tap event to
override this behavior.
If you want to place a button on the left side of the ActionBar and
handle the tap event (e.g., show slide-out), you can use ActionItem
with ios.position="left".
I have a Cordova (version 6.3.1) app. This issue only occurs on iOS version of the app (Android works fine). Every time i press on a text box to insert a text after doing some scrolling, it jumps straight back to the top. After some investigating, I found out that
DisallowOverscroll=true
in cordovas "config.xml" only works on the main screen of the app, not if I go and click on a "modal" "KompressionStromper" in the video (it does not work inside there), so how can I enable it inside there? So the behaviour is not like in video?
Please see video here on iOS 10.0.2 (during the first seconds i also try to pull at the main screen from top to bottom but there the "DisallowOverscroll" option works as expected).
Any other suggestions and help will be highly appreciated.
For the specific element you can disable overscroll with jQuery.
Like:
element.ontouchmove = (event) => {
event.preventDefault();
}
I strongly suggest that you also create a directive out of it, so it will be more done in a "angular way".
I have created a simple FastClick implementation. Issue I will be describing occurs with FastClick but since it seems more like a browser bug, i decided to create non-FastClick version to represent the issue.
https://jsbin.com/fofaxiniya/1
Test this on iOS device or simulator running iOS 8.1 or up.
Scenario:
at least iOS 8.1 or up
A simple page with two buttons with active and hover states.
touchend handler that creates a synthetic click event and disables the original click event.
Steps to reproduce:
On the device or simulator,
Click on the first button
Click on the second button that removes itself from DOM on click
The hover state of first button gets triggered.
Why is this annoying?
Because of this weird behaviour, combination of FastClick and Single page application leads to some button randomly being hovered on navigation. Which is definitely unwanted behavior.
I am already considering removing all the hover styles from touch devices. But if I could actually target the problem itself, which is getting rid of the random hover from happenning, that would be great.
Any attempt to shed some light on this will be highly appreciated. :)
I am developing an app (IOS platform) using HTML5, CSS3, angular and cordova(3.8) and stuck with an major issue.
I have a page with footer having three buttons. On click of each button a modal comes up from the bottom. Modal position is set to fixed and inside it as scroll-able container. scroll-able container contains a text area where user can input some text.
Whenever the modal comes up, text area is focused so that keyboard comes up by default. The issue is whenever native keyboard comes up webview is pushed up and entire modal gets scrolled.
I saw same issues been posted by others and I tried few solutions mentioned in reply for those questions like using ionic keyboard plugin, setting scrollTop to 0 on textarea focus. But nothing worked out.
In config.xml, I have set DisallowOverscroll to true.
It would be great helpful if someone help me with this issue ?
I have a cordova app. I have written some custom code in file for swipe actions using touch events, mouse events which will identify the touchmove and swipe. I have a hamburger menu at the top left corner of my app. On clicking this will open a side panel with some animation. on opening the app in latest ios 13, first time click anywhere on the screen is having MouseEvent with x,y,screenX,screenY,pathX,pathY values as 0. this triggers the hamburger menu which is at the top left corner of app and opens the side panel.
Why is the first time click event on screen returns x,y values as 0?
This issue doesn't occur in Android device or iOS <= 12.0 version. Only observed in iOS 13.
On removing my code specific to touch, swipe events. Then this issue is not replicable.
I have another observation. As ios13 supports the pointer events, I have just tried to add code related to pointerEvent
document.addEventListener('pointerdown', function() {
console.log('pointerdown event');
})
This worked for me without removing any code related swipe.
Why there is such difference in the behaviour with the code.
Thanks in advance.
Thank you for your description, we also effected by this issue. Sometimes we experience "ghost" clicks on previous clicked place in our cordova app.
Only happens with iOS13, with both UIWebView and WKWebView.
Seems pointerdown eventlistener is a workaround for this.