(click) event is not working only on IOS devices - angular 10 app - ios

I noticed that my buttons are not working on the IOS devices, it seems that the click event is not called. Everything is working perfectly on the windows, android, Linux. Since I don't have access to any mac I was trying to debug it on the browserStack, I am getting this error every time I am trying to click the button:
ERROR TypeError: undefined is not an object (evaluating 't.path[4]')
I might be completely wrong, but I think that it might be related with the SVG's rect that is inside of the button (I am using it as a progress bar), on the rect load event I am accessing it to find its length. Maby it is called "too early" so it cannot access the rect correctly. Previously I was using the ngAfterViewInit with the setTimeout inside to manage the same effect.
<rect
#rect
width="96"
height="96"
rx="8"
fill="none"
stroke-width="4"
[ngStyle]="{
'stroke-dasharray': strokeDasharray,
'stroke-dashoffset': strokeDashoffset
}"
(load)="getRectLength()"
/>
getRectLength() {
this.length = this.rect.nativeElement.getTotalLength();
this.strokeDasharray = this.length;
}
Code:
https://github.com/mateuszkornecki/chess-clock/tree/master/src
Live demo:
https://mateuszkornecki.github.io/chess-clock/settings
Steps to reproduce:
Simply click on one of the big buttons with the counter, after a click it should start counting.
I tested it on several IOS devices, it was not working on everyone regardless of the IOS version. That's my first project made with Angular so there is a chance that I've made a simple mistake. Any help will be appreciated!

I have found the source of the problem. I was trying to use the event.path array on the click event. It looks that it is not available on the Safari. I fixed the problem by using the event.composedPath instead of the event.path
References:
https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

Related

VueJs Nuxt PWA not rendering on iphone

My vuejs nuxt portfolio(https://gunjankadu.com/)is not opening on ios phones but working flawlessly on all other devices. On IOS devices only a red spinner is shown and nothing more.
What can be done?
A script "tag.js" took time to load, which I have currently disabled but still not working.
I had a look on your application and found out two problems.
First was about regular expressions, It seems Safari doesn’t support look behind yet. One alternative would be to put the / that comes before in a non-captured group, and then extract only the first group (the content after the / and before the #).
/(?:\/)([^#]+)(?=#*)/
And second is about The minimal-ui viewport property that you can find out more here
Look at all your js/vue files especially in store. And see if any variable used is not imported. Nuxt in SPA mode doesn't detect those kind of errors and surprisingly the UI gets stuck on loading only on iOS. Very weird but scratched my brain over it for a day.

Codeceptjs swipe function

Im just working with codeceptjs and using appium driver for testing android application.
Now i have different issues with this framework. Im currently working for a test, where i have to use swipeLeft, but it isnt working, there is nothing happen when that function is calling, also swipe, swipeRight, swipeUp, swipeDown. Has anyone already solved this problem or can i use alternatively a back() function or something?
Use the following syntax to make your code work:
I.executeScript('mobile: swipe', {direction: 'left'});
Have you consider Touch Perform (or Action) ? It is working for me
I have used webdriverio and it seems like Codeceptjs have similarities with their implementations of appium methods for mobile automation.
Are you testing using Android or iOS device?
Have you tried using different method overrides for Swipes?
On my experience, iOS and Android have different Speed and Offset settings you need to adjust the values until you get the swipe action working.
And of course you need to make sure you are selecting the appropriate View/Slider/Element that is scrollable, otherwise swipe will fail.
https://codecept.io/helpers/Appium

React Native events do not work

I have a trivial react component that only shows a button:
<Button onPress={() => console.log("test")} title="Button"/>
When I put this button into a project I created with react-native init, it works as expected.
However, I have an existing project into which I integrated React Native (0.51.0) manually (because it doesn't use cocoa pods; I followed this guide: https://medium.com/#joshyhargreaves/adding-react-native-to-existing-ios-project-without-cocoapods-6f1ee9106009).
The project seems to work fine: the UI loads, the button gives visual feedback when I tap it. But the buttons onPress event is not fired, so it does not log anything.
There are no errors or warnings (except Class RCTCxxModule was not exported, but it seems to be safe to ignore this).
I'm now out of ideas of what I could try or how I could debug this issue short of diving into Reacts touch handling code. Here's what I tried:
Made sure to only have one RCTRootView, and that it is created in the main thread.
Checked for any suspicious things happening in the remote debugger; everything looks normal (no exceptions thrown or warnings logged).
Tested a few other components that should fire events; for example, TouchableOpacity does not work either.
Logging something after a timeout does work, so it doesn't seem like anything is deallocated prematurely
Checking for errors reported by the metro bundler: it doesn't print anything
Any ideas on what I need to do to get my button to print "test" when I tap it?
I think you have not Debug JS Remotely option enabled. If you don't you have to open React Native Debug Menu Pressing (command / control) + D or shake your device if you are debugging with real device. Then just press Debug JS Remotely and it should appear in the Google Chrome. Then inspect and open the console. There it is!
This mite caused by date diff between the host (your computer) and the client (the mobile device)
You can check this by running adb shell "date" && date
to see if there is a diff.
If there is one go to your mobile device and toggle automatic date & time off and back on.
Then test time diff again as mentioned, if there is no more diff, tap events should work in debug mode
More details in the original git issue answer by - Alex Ciarlillo

onClick Action in Tabbar is not calling in Titanium

Team,
I am working on a project which is on Titanium, I am facing one small issues which i cannot find the solution, The issue is
In Index.xml file i am writing code for Tabbar, Writing the click action the tag but in iOS that method is not calling, Where as in Android it is working fine, Dont know whats wrong, Below is the code i wrote.
<Tab id="tab4" title="Coverage" icon="/images/Coverage_tab_n.png" onClick="displayCoverage" class="bcPurple_iOS">
<Window id="win4" title="Coverage" top="20" bottom="20" class="bcPurple_iOS">
</Window>
</Tab>
The onClick action code i am writing in the index.js file which is deault,Am i doing any wrong.
This is a feature request in Titanium TIMOB-6499 It was requested to be added in Android and was but hasn't been added in iOS yet.
Work around could be to use onFocus which works but might not be exactly what you want as it runs when the tabgroup opens. To avoid that, you could set a variable to stop it running on the first load I suppose.
If you're into compiling from source, there is a quick fix from someone in comment thread in the link above which may or may not work.
The feature request has been open since Dec 2011 and is marked as low priority.

"Rubber band" events on phonegap app

I'm working on an iOS app using Phonegap/ Cordova and jQuery Mobile.
I want to be able to refresh the data when the user pulls the page down (rubber band effect). I tried using iScroll 4 but it made scrolling my page slow.
I didn't find a phonegap plugin for this. I thought this was a pretty standard iOS feature so maybe I am missing something? Is there any easy way to listen to the pull down event using phonegap / cordova?
Thanks!
Adding this line into CDVViewController.m (Cordova 2.0 or later) is said to work but I've actually never tried it myself as I'm still using iScroll 4. Give it a shot and let me know how it worked for you.
[webView.scrollView setDecelerationRate:UIScrollViewDecelerationRateNormal];
Likewise, however somewhat irrelevant to this matter, the code snippet below is said to reduce the on click delay from 300 ms which is also something phonegap developers usually want. Neither this nor the line above has been properly tested but perhaps a good way to start off.
[webView.scrollView setDelaysContentTouches:NO];

Resources