iOS 16.4 textChange behavior change

[NathanWalker]

Issue Description

iOS 16.4 textChange is called twice on input, and the first backspace in a TextField ignores the event as stated here: https://github.com/NativeScript/NativeScript/issues/10249#issuecomment-1500974095

Reproduction

Requires iOS 16.4 specifically - issue does not occur with 16.2.

Relevant log output (if applicable)

No response

Environment

No response

Please accept these terms

• [X] I have searched the existing issues as well as StackOverflow and this has not been posted before
• [X] This is a bug report
• [X] I agree to follow this project's Code of Conduct

[NathanWalker]

@Salvetori appears iOS 16.4 is indeed ok too with latest 8.5 - if you find otherwise feel free to post further details...

https://user-images.githubusercontent.com/457187/231970871-18425554-4a9b-4403-b151-7b145fc35ead.mov

[dammynex]

https://user-images.githubusercontent.com/30000286/232069826-8c50cad3-b9e4-4b34-9a5f-b37e14f3d3eb.mov

The issue still persists and this is with v8.5

[serhiynovos]

For me it only happens on emulator. @dammynex Did you try to create Xcode project using SwiftUI for example and check if you have the same behavior?

[serhiynovos]

For me it only happens on emulator. @dammynex Did you try to create Xcode project using SwiftUI for example and check if you have the same behavior?

Ok. I created very simple SwiftUI application with text field and label. Cannot reproduce it

[NathanWalker]

@dammynex could you share a repo (either stackblitz or on GitHub) of exactly that setup you’re using in that video?

[dammynex]

Here's the link to the repo https://github.com/dammynex/testv3

[NathanWalker]

Hi @dammynex thank you:

• Your lock file was still stuck on 8.4.0
• This PR adequately runs ns clean against and ensures package is using 8.5: https://github.com/dammynex/testv3/pull/1
• Runs good 👍

https://user-images.githubusercontent.com/457187/232259568-2e882849-2f9f-4a3e-82c3-087072eb701d.mov

[mattNOTRS]

Hello, I am the same person as @Salvetori posting from a different account. Here is a screen recording of a newly created NS Angular project running in an iOS 16.4 emulator As you can see I am still getting the issue

https://user-images.githubusercontent.com/87208253/233187673-c100d07e-d60f-4a59-942b-c0a4828d5c6b.mov

Here is the repo: https://github.com/notrs/ios-ns-angular-test

I tried ns clean on my other private repo and that did not fix the issue, nor did I find evidence of a latent NS v8.4 record in the package-lock

Thank you for the help

[NathanWalker]

Hi @mattNOTRS cloned your repo and it's good there as well. Possible you have keyboard settings interfering?

https://user-images.githubusercontent.com/457187/233435459-7bf23313-8516-4ef3-b2e8-4e8f13bccb2a.mov

[dammynex]

Could it be an issue with the XCode simulator? It does not happen on device for me. But, even with v8.5 on the emulator, it still happens

[tylerablake]

@dammynex I'm also seeing the behavior only on simulator

[kryptus36]

I'm seeing this as well after switching from intel to M2. Could it be just an emulator issue on some platforms?

[NathanWalker]

I'm curious too - must be some other factor involved. I've tried multiple ways with different simulators and can confirm I don't experience it on 16.4 simulator even and I'm on M1 myself. Would be wild if it were M2 related only but anything could be possible. Would be curious if others experiencing same might share their dev machines details, for example I'm using: Apple M1 Max

[dammynex]

I'm using intel

[tylerablake]

I’m using intel i9

[cjohn001]

Hello together, I am also seeing this bug on my Mac M1, but just on iOS simulator. I assume this bug is the source of the problem I recently posted here:

https://github.com/NativeScript/angular/issues/110

@NathanWalker : As the issue was already closed, and I have not found a reference to a patch. Should the bug be fixed with "@nativescript/core": "8.5.1" ?

I am still seeing it with that version using iPhone 14 Pro simulator.

One side note: when I set the new [valueFormatter]="valueFormatter" to a function just returning the value than the bug does not appear anymore.

public valueFormatter = (value: string, useParens?: boolean) => {
        return value;
    };

Please reopen the issue if it should be fixed with 8.5.1

OS: macOS 13.3.1
CPU: (10) arm64 Apple M1 Pro
Shell: /bin/zsh
node: 18.12.1
npm: 8.19.2
nativescript: 8.5.3

# android
java: 11.0.18
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found

# ios
xcode: 14.3/14E222b
cocoapods: 1.12.0
python: 3.11.2
python3: 3.11.2
ruby: 2.7.7
platforms: 
  - DriverKit 22.4
  - iOS 16.4
  - macOS 13.3
  - tvOS 16.4
  - watchOS 9.4

Dependencies

"dependencies": {
  "@angular/animations": "15.2.8",
  "@angular/common": "15.2.8",
  "@angular/compiler": "15.2.8",
  "@angular/core": "15.2.8",
  "@angular/forms": "15.2.8",
  "@angular/platform-browser": "15.2.8",
  "@angular/platform-browser-dynamic": "15.2.8",
  "@angular/router": "15.2.8",
  "@apollo/client": "3.7.12",
  "@mnd/external-web-view": "file:../mnd-plugins/dist/packages/external-web-view/mnd-external-web-view-1.0.0.tgz",
  "@nativescript/angular": "15.2.0",
  "@nativescript/core": "8.5.1",
  "@nativescript/iqkeyboardmanager": "2.1.1",
  "@nativescript/localize": "5.0.4",
  "@nativescript/mlkit-barcode-scanning": "2.0.0",
  "@nativescript/mlkit-core": "2.0.0",
  "@nativescript/secure-storage": "3.0.0",
  "@nativescript/theme": "3.0.2",
  "@nativescript/ui-charts": "0.2.4",
  "apollo-angular": "4.2.1",
  "apollo3-cache-persist": "0.14.1",
  "d3-ease": "3.0.1",
  "graphql": "16.6.0",
  "graphql-tag": "2.12.6",
  "intl": "1.2.5",
  "moment": "2.29.4",
  "nativescript-health-data": "file:../mnd-custom-plugins/nativescript-health-data/publish/package/nativescript-health-data-2.0.0.tgz",
  "nativescript-oauth2-ext": "file:../mnd-custom-plugins/nativescript-oauth2-ext/publish/package/nativescript-oauth2-ext-3.0.1.tgz",
  "nativescript-sqlite": "2.8.6",
  "nativescript-ui-calendar": "15.2.3",
  "nativescript-ui-gauge": "15.2.3",
  "rxjs": "7.8.0",
  "uuid": "9.0.0",
  "zone.js": "0.13.0"
},
"devDependencies": {
  "@angular-devkit/build-angular": "15.2.6",
  "@angular/compiler-cli": "15.2.8",
  "@graphql-codegen/cli": "3.3.0",
  "@graphql-codegen/fragment-matcher": "4.0.1",
  "@graphql-codegen/introspection": "3.0.1",
  "@graphql-codegen/typescript": "3.0.3",
  "@graphql-codegen/typescript-apollo-angular": "3.5.6",
  "@graphql-codegen/typescript-operations": "3.0.3",
  "@nativescript/android": "8.5.0",
  "@nativescript/ios": "8.5.2-alpha.3",
  "@nativescript/types": "8.5.0",
  "@nativescript/webpack": "5.0.14",
  "@ngtools/webpack": "15.2.6",
  "@types/d3-ease": "3.0.0",
  "@types/intl": "1.2.0",
  "@types/node": "18.15.13",
  "@types/uuid": "9.0.1",
  "keycloak-request-token": "0.1.0",
  "rimraf": "5.0.0",
  "sass": "1.62.0",
  "ts-node": "10.9.1",
  "typescript": "4.9.5"
}

[NathanWalker]

Is everyone experiencing the issue using Angular? Possible could be something there? I’ve verified on core only since this repo is often meant only for core alone.

[tylerablake]

@NathanWalker I'm using Angular

[drangelod]

We ran into a very similar issue on iOS 16.4 sim when testing some login page changes a few days ago, although works fine on 16.2 sim and a 16.4 device so we're assuming this is a weird sim-only bug (we use core). For us, the last character of all textfields gets cut off when reading the value to send in a function call.

[cjohn001]

@NathanWalker , Angular +1 as you likely already have seen from my dependencies. Please consider, the bug report on the Angular gitrepo, which I wrote, mentions an issue with angular forms. I tried a textfield without using Angular forms and the issue also appears their. Hence, not an Angular Forms but an inheritted issue. As mentioned, when setting a dummy function on the new valueFormatter I do not observe the bug anymore. Might be a hint to find the problem.

[NathanWalker]

Helpful detail @cjohn001 thank you, will see if can find anything there.

[kryptus36]

We ran into a very similar issue on iOS 16.4 sim when testing some login page changes a few days ago, although works fine on 16.2 sim and a 16.4 device so we're assuming this is a weird sim-only bug (we use core). For us, the last character of all textfields gets cut off when reading the value to send in a function call.

This is the same as I'm seeing in Svelte. If you output the var to a label, in my case you will sometimes see the last character get added, then disappear.

[subjekt-iv]

hey guys! I can't get through a strange text field behavior that may be related to this issue. The bug issue occurs in the Ios simulator (running the latest version). When typing into a TextField (credentials in this case) both username and password text fields display correctly the characters but when I press the login button, which triggers the login request method, the last character of both the strings are truncated.

OS: macOS 13.0
CPU: (8) x64 Apple M2
Shell: /bin/bash
node: 14.18.0
npm: 6.14.15
nativescript: 8.5.3

# android
java: 11.0.15
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found

# ios
xcode: 14.3/14E222b
cocoapods: 1.12.0
python: 3.9.9
python3: 3.9.9
ruby: 2.7.8
platforms: 
  - DriverKit 22.4
  - iOS 16.4
  - macOS 13.3
  - tvOS 16.4
  - watchOS 9.4

"dependencies": {
  "@bradmartin/nativescript-urlhandler": "^2.0.1",
  "@nativescript/appversion": "^2.0.0",
  "@nativescript/background-http": "^6.0.0",
  "@nativescript/camera": "^5.0.15",
  "@nativescript/core": "~8.5.2",
  "@nativescript/datetimepicker": "^2.1.13",
  "@nativescript/email": "^2.0.5",
  "@nativescript/firebase-core": "^3.0.0",
  "@nativescript/firebase-messaging": "^3.0.0",
  "@nativescript/imagepicker": "^1.0.10",
  "@nativescript/iqkeyboardmanager": "^2.1.1",
  "@nativescript/theme": "^2.2.1",
  "@triniwiz/nativescript-socketio": "^4.0.3",
  "@triniwiz/nativescript-toasty": "^4.1.3",
  "@vue/devtools": "^5.3.3",
  "cocoapods": "^0.0.0",
  "moment": "^2.29.1",
  "n7-google-places-autocomplete": "^1.0.11",
  "nativescript-appversion": "^1.4.4",
  "nativescript-barcodescanner": "^4.1.2",
  "nativescript-clipboard": "^2.1.1",
  "nativescript-toasty": "^3.0.0-alpha.2",
  "nativescript-vue": "^2.9.3",
  "nativescript-vue-devtools": "^1.4.0",
  "nativescript-vue-shadow-ns-7": "^10.1.0",
  "vuex": "^3.3.0",
  "xcode": "^3.0.1"
},
"devDependencies": {
  "@babel/core": "^7.0.0",
  "@babel/preset-env": "^7.0.0",
  "@nativescript/android": "~8.5.0",
  "@nativescript/ios": "8.5.1",
  "@nativescript/types": "~8.5.0",
  "@nativescript/webpack": "~5.0.0",
  "@types/node": "^18.0.3",
  "babel-loader": "^8.1.0",
  "nativescript-vue-template-compiler": "^2.6.0",
  "prettier": "^2.8.7",
  "sass": "~1.49.9",
  "typescript": "~4.8.4",
  "vue-loader": "^15.9.1"
}

[Williams-Christopher]

I'm experiencing this exact issue on both the iOS simulator and physical device using Vue. Using a watcher to look at this it appears that initially the value of the underlying property is set correctly but there is an immediate update where the underlying property is mutated again:

Space and back space do not cause this double update behavior so if I enter a space then backspace, the value of the property is correct:

This does not happen on the Android platform.

OS: macOS 13.3.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Shell: /bin/zsh
node: 16.18.0
npm: 8.19.2
nativescript: 8.5.3

# android
java: 17.0.6
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found

# ios
xcode: 14.3/14E222b
cocoapods: 1.9.3
python: 3.7.3
python3: 3.9.6
ruby: 2.6.10
platforms: 
  - DriverKit 22.4
  - iOS 16.4
  - macOS 13.3
  - tvOS 16.4
  - watchOS 9.4

Dependencies

"dependencies": {
  "@angelengineering/filepicker": "^1.0.5",
  "@nativescript/background-http": "^6.0.0",
  "@nativescript/core": "~8.5.0",
  "@nativescript/imagepicker": "^2.0.0",
  "@nativescript/secure-storage": "^3.0.0",
  "@nstudio/nativescript-loading-indicator": "^4.1.2",
  "@vue/devtools": "^5.3.3",
  "nativescript-drop-down": "^6.0.0",
  "nativescript-iqkeyboardmanager": "^1.5.1",
  "nativescript-socketio": "^3.2.1",
  "nativescript-toasty": "^1.3.0",
  "nativescript-vue": "^2.0.0",
  "nativescript-vue-devtools": "^1.2.0",
  "vuex": "^3.1.2"
},
"devDependencies": {
  "@babel/core": "^7.8.3",
  "@babel/preset-env": "^7.8.3",
  "@nativescript/android": "8.5.0",
  "@nativescript/ios": "8.5.1",
  "@nativescript/types": "~8.5.0",
  "@nativescript/webpack": "~5.0.0",
  "@triniwiz/nativescript-socketio": "^5.0.1",
  "@triniwiz/nativescript-toasty": "^4.1.3",
  "@types/node": "^17.0.8",
  "babel-loader": "^8.0.2",
  "babel-traverse": "6.26.0",
  "babel-types": "6.26.0",
  "babylon": "6.18.0",
  "lazy": "1.0.11",
  "nativescript-vue-template-compiler": "^2.0.0",
  "sass": "~1.39.0",
  "typescript": "~4.3.5",
  "vue": "^2.6.11",
  "vue-loader": "^15.8.3"
}

[lekhmanrus]

Hi, I'm experiencing the same issue on iOS simulator only (Nativescript Angular project). Real devices and Android Emulator - works fine.

[NathanWalker]

I am still seeing it with that version using iPhone 14 Pro simulator.

One side note: when I set the new [valueFormatter]="valueFormatter" to a function just returning the value than the bug does not appear anymore.

public valueFormatter = (value: string, useParens?: boolean) => {
      return value;
  };

Confirm that @cjohn001 workaround indeed works perfectly for this case. So far all we've been able to tell is that indeed is a iOS 16.4 simulator case and not universal - seems to happen to some (like my colleague Dave and I working on same project, doesn't happen to him, but was able to get it to occur to me only in the same sim on my machine). We'll report back here if we find anything else but for anyone experiencing similar in just that sim can do that harmless binding (perfectly fine).

[NathanWalker]

Reopening until finite conclusions can be made.

[NathanWalker]

Appears to be completely isolated to iOS issue alone: https://developer.apple.com/forums/thread/727715 Can confirm that delegate method is indeed called twice (not {N} related) - just as described there (only under certain circumstances). At moment, this stands at a iOS sim only issue using that specific version as mentioned in that forum.

Use the workaround mentioned above (the valueFormatter binding) if you encounter this.

[SeanKelly369]

It doesn't happen with TextView, which has similar code in the core/ui library. Using TextView with some css to make it appear like a TextField can be used as workaround until a solution is found. My inclination is, the bug may exist in a function in TextField that differs to TextView.

Update: It's an XCode bug.

[JamesVal]

Just tacking on also ran into issue - and like the previous comment, TextView the input is fine but TextField we get the behavior where last character is removed

[NathanWalker]

We'll be investigating if the behavior is the same in iOS 17 and if so, we may place a conditional in the handling given the valueFormatter logic is simpler and may resolve it holistically for all - we just want to test this well to be certain.

[edusperoni]

I'll add to this:

The issue only seems to affect x86 builds, so if you're on x86 OR if your app is building for x86 simulator, then you'll experience the issue. Essentially affects all x86 macs. ARM (M1) macs can be affected if they use an .framework only built for x86, in which case Xcode might build the app for x86 simulator and run it through rosetta, which will make the issue happen.

Hopefully Apple fixes this on their end

[darklight365]

@NathanWalker - Using valueFormatter in this way will prevent users from updating text in the middle of a string (using delete key). Another issue is that the current cursor position gets lost when delete is used in the middle of a string. So I'm not sure the viability of including this within core.

[adamcikado]

This issue also happens when tapping on suggestion, e.g. you type email and then tap on suggestion email@email.com will result in emailemail@email.com value.

[ebalestrini]

Hi there I was wondering if there was any updates on this topic? It will be nice to get it to work on ios 16.4

[SeanKelly369]

@ebalestrini when using XCode 14.3 or higher, does the simulator drain your laptops's battery?

[ebalestrini]

@SeanKelly369 so far I have not noticed/experienced that.

[MrSnoozles]

@adamcikado We're seeing the emailemail@domain.com problem too. Not only on the simulator, but on live devices too. Did you fix it in the meantime?

I had opened an issue two years ago that got resolved, but since NS 8.5 it's back. Not sure if it's related to iOS 16.4, but since here people mostly talk about the emulator I think it might be two separate issues. https://github.com/NativeScript/NativeScript/issues/9486

[timoschlueter]

I ran into this issue today on iOS 16.4. Is there any update on a fix yet?

[SeanKelly369]

https://developer.apple.com/forums/thread/727715 Read the last comment in the thread.

[artan-fetahaj]

@MrSnoozles Unfortunately we are facing the emailemail@domain.com issue as well. have you found a fix to this problem in the meantime?

[MrSnoozles]

@artan-fetahaj @cpius @adamcikado We fixed it. IIrc it was related to some attribute on the TextField.

Do you have the autocorrect attribute on the TextField?

[MrSnoozles]

Like I stated before, there are two separate issues, afaik both are still standing.

1) [this issue] the binding on textChange is wrong, this happens only simulator with iOS 16.4+ (happens on iOS 17.0 as well)

2) https://github.com/NativeScript/NativeScript/issues/9486 When clicking on the auto complete suggestion, the binding is wrong, leading to something like emailemail@domain.com. This appears to happen when autocorrect="false" is set.

[mrwrighty]

Just my take on this. Was previously running Monterey and Nativesccript 8.6.1. Built lots and lots of apps over the past few years. Just updated to Sonoma and Nativescript 8.6.5 in order to meet the new Xcode15 17.2 SDK requirements, thought this update would fix the issue with apps built in 8.6.1, but no, problem still exists. ns debug ios is Simulator problem is displayed. Open XCWorkspace and run in Xcode on Simulator (Arm64) and problem goes away. Makes designing, building and testing direct in Nativescript a nightmare. Code should compile OK in XCode and archive for TestFlight, but local testing with this issue is troublesome.

Textfield is define thus: -

<TextField id="storenumber" hint="Enter a store number" text="" row="0" col="1" borderWidth="2px;" placeholder-color="#dfdfdf" marginRight="20px" class="lgrTextField" width="50%" textAlignment="center" marginTop="20px" keyboardType="number" height="40"/>

No autocorrect as suggested by @MrSnoozles

ns debug ios runs in simulator with bug. Xcode run of the same code in the same simulator and the bug is not present.

[SeanKelly369]

In XCode 15.3, running iOS 17.4 simulator for iPhone 15 this issue is no longer occurring.

[NathanWalker]

Confirmed here as well thanks @SeanKelly369 👌

[brianrclow]

We also just started getting reports of this issue iOS predictive text issue where the textfield starts with "email" then the user taps the predictive text of their email on the keyboard and the textfield updates visually but the actual form somehow sends emailemail@domain.com to the server. Xcode 15.2, iOS 17.2 simulator. Updating from Xcode 15.2 -> 15.3 to see if this resolves it.