Nativescript-ui-feedback: [AutoComplete] App crashes when typing

[LaylaCsAvila]

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow?

Yes

Tell us about the problem

The app crashes after you type the second letter on a release build downloaded to a real phone. Doesn't happen in emulators nor USB Debug mode. I was able to reproduce it with both my code and the official angular samples repo.

Which platform(s) does your issue occur on?

Confirmed in Android 5.0, 6.0 and 7.0

Please provide the following version numbers that your issue occurs with:

[From my project]

• Progress NativeScript UI version: 3.2.0
• CLI: 3.3.0
• Cross-platform modules: 3.3.0
• Runtime(s): "tns-android": 3.3.1

Please tell us how to recreate the issue in as much detail as possible.

1. Clone the nativescript-ui-samples-angular repository,
2. Create a new signed apk with tns build android --release,
3. Download it to a phone without using the usb debug,
4. Access the AutoComplete Getting Started area and type in 2 letters,
5. The app should crash and close now.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

https://github.com/telerik/nativescript-ui-samples-angular

[NickIliev]

@LaylaCsAvila thank you for reporting this one.
Confirming this as a bug reproducible with the Getting started example of AutomCompleteTextView in the angular samples. At my side, the issue is reproducible in both debug and release modes.

Steps to reproduce:

• open the getting started example
• type 2-3 letters and then start deleting them with Back key

Error thrown:

11-27 10:48:50.725  2078  2078 I cr_BrowserStartup: Initializing chromium process, singleProcess=false
System.err: java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v4/animation/AnimatorCompatHelper;
System.err:     at android.support.v7.widget.DefaultItemAnimator.resetAnimation(DefaultItemAnimator.java:513)
System.err:     at android.support.v7.widget.DefaultItemAnimator.animateAdd(DefaultItemAnimator.java:216)
System.err:     at android.support.v7.widget.SimpleItemAnimator.animateAppearance(SimpleItemAnimator.java:105)
System.err:     at android.support.v7.widget.RecyclerView.animateAppearance(RecyclerView.java:3037)
System.err:     at android.support.v7.widget.RecyclerView.access$800(RecyclerView.java:144)
System.err:     at android.support.v7.widget.RecyclerView$4.processAppeared(RecyclerView.java:421)
System.err:     at android.support.v7.widget.ViewInfoStore.process(ViewInfoStore.java:213)
System.err:     at android.support.v7.widget.RecyclerView.dispatchLayout(RecyclerView.java:2931)
System.err:     at android.support.v7.widget.RecyclerView.onLayout(RecyclerView.java:3071)
System.err:     at com.telerik.widget.list.RadListView.onLayout(RadListView.java:596)
System.err:     at android.view.View.layout(View.java:17637)
System.err:     at android.view.ViewGroup.layout(ViewGroup.java:5575)
System.err:     at android.widget.RelativeLayout.onLayout(RelativeLayout.java:1079)
System.err:     at android.view.View.layout(View.java:17637)
System.err:     at android.view.ViewGroup.layout(ViewGroup.java:5575)
System.err:     at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323)
System.err:     at android.widget.FrameLayout.onLayout(FrameLayout.java:261)
System.err:     at android.view.View.layout(View.java:17637)
System.err:     at android.view.ViewGroup.layout(ViewGroup.java:5575)
System.err:     at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323)
System.err:     at android.widget.FrameLayout.onLayout(FrameLayout.java:261)
System.err:     at android.view.View.layout(View.java:17637)
System.err:     at android.view.ViewGroup.layout(ViewGroup.java:5575)
System.err:     at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:2346)
System.err:     at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2068)
System.err:     at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1254)
System.err:     at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6337)
System.err:     at android.view.Choreographer$CallbackRecord.run(Choreographer.java:874)
System.err:     at android.view.Choreographer.doCallbacks(Choreographer.java:686)
System.err:     at android.view.Choreographer.doFrame(Choreographer.java:621)
System.err:     at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:860)
System.err:     at android.os.Handler.handleCallback(Handler.java:751)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:95)
System.err:     at android.os.Looper.loop(Looper.java:154)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6119)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
System.err: Caused by: java.lang.ClassNotFoundException: Didn't find class "android.support.v4.animation.AnimatorCompatHelper" on path: DexPathList[[zip file "/data/app/org.nativescript.sdkAngular-2/base.apk"],nativeLibraryDirectories=[/data/app/org.nativescript.sdkAngular-2/lib/x86, /data/app/org.nativescript.sdkAngular-2/base.apk!/lib/x86, /system/lib, /vendor/lib]]
System.err:     at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:56)
System.err:     at java.lang.ClassLoader.loadClass(ClassLoader.java:380)
System.err:     at java.lang.ClassLoader.loadClass(ClassLoader.java:312)

[Svettis2k]

You can add the following to your app.gradle as a workaround for this issue:

configurations.all {
    resolutionStrategy.eachDependency { DependencyResolveDetails details ->
        def requested = details.requested
        if (requested.group == "com.android.support") {
            if (!requested.name.startsWith("multidex")) {
                details.useVersion "25.3.0"
            }
        }
    }
}

This forces a specific version (e.g. 25.3.0) of the Android support libraries, which prevents the crash mentioned by @NickIliev. This is explained here and here.

[LaylaCsAvila]

Any news on this? I've used the autocomplete on the main feature of my app...

[nmongiya]

I am also waiting for the same to be resolved. References #330 & #298

[nmongiya]

@Svettis2k I have tried that but still facing the same issue, it is very easy to reproduce. You just need to provide a large data to autocomplete and try pressing 'back' button a couple of time. It crashes the app with below error
`An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException:
Calling js method onBindViewHolder failed

TypeError: Cannot set property 'bindingContext' of undefined
File: "file:///data/data/org.fcs.FreshTracker/files/app/tns_modules/nativescript-pro-ui/autocomplete/autocomplete.js, line: 83, column: 41

StackTrace:
Frame: function:'AutoCompleteAdapter.onBindViewHolder', file:'', line: 83, column: 42

at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
at com.tns.Runtime.callJSMethod(Runtime.java:957)
at com.tns.Runtime.callJSMethod(Runtime.java:941)
at com.tns.Runtime.callJSMethod(Runtime.java:933)
at com.tns.gen.com.telerik.widget.autocomplete.AutoCompleteAdapter_frnal_ts_helpers_l58_c38__AutoCompleteAdapter.onBindViewHolder(Unknown Source:27)
at com.telerik.widget.list.ListViewWrapperAdapter.onBindViewHolder(ListViewWrapperAdapter.java:247)
at com.telerik.widget.list.ListViewWrapperAdapter.onBindViewHolder(ListViewWrapperAdapter.java:20)
at android.support.v7.widget.RecyclerView$Adapter.onBindViewHolder(RecyclerView.java:6356)
at android.support.v7.widget.RecyclerView$Adapter.bindViewHolder(RecyclerView.java:6389)
at android.support.v7.widget.RecyclerView$Recycler.tryBindViewHolderByDeadline(RecyclerView.java:5335)
at android.support.v7.widget.RecyclerView$Recycler.tryGetViewHolderForPositionByDeadline(RecyclerView.java:5598)
at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5440)
at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5436)
at android.support.v7.widget.LinearLayoutManager$LayoutState.next(LinearLayoutManager.java:2224)
at android.support.v7.widget.LinearLayoutManager.layoutChunk(LinearLayoutManager.java:1551)
at android.support.v7.widget.LinearLayoutManager.fill(LinearLayoutManager.java:1511)
at android.support.v7.widget.LinearLayoutManager.onLayoutChildren(LinearLayoutManager.java:595)
at android.support.v7.widget.RecyclerView.dispatchLayoutStep2(RecyclerView.java:3583)
at android.support.v7.widget.RecyclerView.dispatchLayout(RecyclerView.java:3312)
at android.support.v7.widget.RecyclerView.onLayout(RecyclerView.java:3844)
at com.telerik.widget.list.RadListView.onLayout(RadListView.java:596)
at android.view.View.layout(View.java:19590)
at android.view.ViewGroup.layout(ViewGroup.java:6053)
at android.widget.RelativeLayout.onLayout(RelativeLayout.java:1080)
at android.view.View.layout(View.java:19590)
at android.view.ViewGroup.layout(ViewGroup.java:6053)
at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323)
at android.widget.FrameLayout.onLayout(FrameLayout.java:261)
at android.view.View.layout(View.java:19590)
at android.view.ViewGroup.layout(ViewGroup.java:6053)
at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323)
at android.widget.FrameLayout.onLayout(FrameLayout.java:261)
at android.view.View.layout(View.java:19590)
at android.view.ViewGroup.layout(ViewGroup.java:6053)
at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:2484)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2200)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1386)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6733)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:911)
at android.view.Choreographer.doCallbacks(Choreographer.java:723)
at android.view.Choreographer.doFrame(Choreographer.java:658)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:897)
at android.os.Handler.handleCallback(Handler.java:789)
at android.os.Handler.dispatchMessage(Handler.java:98)
at android.os.Looper.loop(Looper.java:164)
at android.app.ActivityThread.main(ActivityThread.java:6541)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)

`

[NickIliev]

@LaylaCsAvila @Svettis2k @nmongiya are you still hitting this issue with the latest nativescript-pro-ui?
I am currently unable to reproduce the issue with 3.4.0. so please let me know if you have a stable way to recreate this one.

[nmongiya]

@NickIliev Yes, I am still facing the issue, I have created a sample project and explained the steps to reproduce this in #298

I have cloned the sample project from https://github.com/telerik/nativescript-ui-samples-angular
Just added few more data points in the sample as the following
for (var j = 0; j < 50; j++) { for (var i = 0; i < this.countries.length; i++) { if(i >0) { this._items.push(new TokenModel(this.countries[ i ] + ' ' +this.countries[ i-1 ] + ' ' + +this.countries[ i-1 ], undefined)); }else { this._items.push(new TokenModel(this.countries[ i ] + i, undefined)); } } }
I am using completionmode as contains and displaymode Plain
and followed the same step as I mentioned above
" just search for few names and press back button multiple times. I am successfully able to reproduce the error.

`An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException:
Calling js method onBindViewHolder failed

TypeError: Cannot set property 'bindingContext' of undefined
File: "file:///data/data/org.nativescript.sdkAngular/files/app/tns_modules/nativescript-pro-ui/autocomplete/autocomplete.js, line: 83, column: 41

StackTrace:
Frame: function:'AutoCompleteAdapter.onBindViewHolder', file:'file:///data/data/org.nativescript.sdkAngular/files/app/tns_modules/nativescript-pro-ui/autocomplete/autocomplete.js', line: 83, column: 42

[nmongiya]

@NickIliev I have tried to check the 'undefined' in autocomplete.android.js and it seems like a good workaround.
AutoCompleteAdapter.prototype.onBindViewHolder = function (holder, position) { var nativeItem = this.getFilteredList().get(position); var img = nativeItem.getNsImageName(); var model = new TokenModel(nativeItem.getText(), img); if (holder.nsView != undefined) { holder.nsView.bindingContext = model; var args = { eventName: commonModule.RadAutoCompleteTextView.itemLoadingEvent, index: position, view: holder['nsView']._subViews[0], android: holder, data: model }; this.owner.notify(args); } };

[tgpetrov]

There are two different issues in this thread:
1) The java.lang.NoClassDefFoundError - reported by @LaylaCsAvila
2) The cannot set property 'bindingContext' of undefined - reported by @nmongiya

@LaylaCsAvila let us know if you can reproduce the 1st issue with the latest version as we can't
@nmongiya Thank you for writing back, with your steps we can reproduce the 2nd issue and the fixed version will be soon released. Keep track of #298 for status updates.

[tgpetrov]

After updating nativescript-ui-autocomplete to 3.6.0 neither of the two issues can be reproduced.

[kandangit]

I also get a crash error when typing back inside the autocomplete field.
All issues related to this seems to be closed, but can reproduce the error in the 6.0.0 version of nativescript-ui-autocomplete.

I have tried the "configurations.all" solution suggested in app.gradle, but still firing the error as typing back inside the field:

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onBindViewHolder failed
System.err: TypeError: Cannot read property 'instance' of undefined
System.err:
System.err: StackTrace:
System.err: push.../node_modules/@nativescript/core/ui/core/bindable/bindable.js.Binding.bindingContextChanged(file: node_modules\@nativescript\core\ui\core\bindable\bindable.js:127:0)
System.err: at push.../node_modules/@nativescript/core/data/observable/observable.js.Observable.notify(file: node_modules\@nativescript\core\data\observable\observable.js:107:0)
System.err: at Property.set(file: node_modules\@nativescript\core\ui\core\properties\properties.js:183:0)
System.err: at (file: node_modules\@nativescript\core\ui\core\properties\properties.js:370:0)
System.err: at (file: node_modules\@nativescript\core\ui\core\properties\properties.js:384:0)
System.err: at push.../node_modules/@nativescript/core/ui/layouts/layout-base-common.js.LayoutBaseCommon.eachChildView(file: node_modules\@nativescript\core\ui\layouts\layout-base-common.js:125:0)
System.err: at push.../node_modules/@nativescript/core/ui/core/view/view-common.js.ViewCommon.eachChild(file: node_modules\@nativescript\core\ui\core\view\view-common.js:885:0)
System.err: at (file: node_modules\@nativescript\core\ui\core\properties\properties.js:375:0)
System.err: at AutoCompleteAdapter.onBindViewHolder(file: node_modules\nativescript-ui-autocomplete\ui-autocomplete.android.js:136:0)
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)

[AlinAlgiu]

I am using version 6 of autocomplete. In order to remove this error, I had to edit [email protected]

Binding.prototype.bindingContextChanged = function (data) {
        if(this.targetOptions !== undefined && this.targetOptions !== null){
            var target = this.targetOptions.instance.get();
            if (!target) {
                this.unbind();
                return;
            }
            var value = data.value;
            if (value !== null && value !== undefined) {
                this.update(value);
            }
            else {
                this.clearBinding();
            }
        } else {
            this.unbind();
            return;
        }
    };

And

Binding.prototype.unbind = function () {
        if(this.targetOptions !== undefined && this.targetOptions !== null){
            var target = this.targetOptions.instance.get();
            if (target instanceof observable_1.Observable) {
                if (this.options.twoWay) {
                    target.off(this.targetOptions.property + "Change", this.onTargetPropertyChanged, this);
                }
                if (this.sourceIsBindingContext && this.targetOptions.property !== "bindingContext") {
                    target.off("bindingContextChange", this.bindingContextChanged, this);
                }
            }
        }
        if (this.targetOptions) {
            this.targetOptions = undefined;
        }
        this.sourceProperties = undefined;
        if (!this.source) {
            return;
        }
        this.clearSource();
    };

The unmodified versions didn't include null and undefined checks.