null is not an object with "_this._listPicker.selectRowInComponentAnimated"

[AlexBa]

Hello, sometimes my Nativescript app crashes due this error:

file:///node_modules/nativescript-drop-down/drop-down.js:110:34 JS ERROR TypeError: null is not an object (evaluating '_this._listPicker.selectRowInComponentAnimated')

This problem occurs if I scroll a large ListView very fast. It seems like we have a race condition here. _this._listPicker is null and thus it's not possible to call the selectRowInComponentAnimatedmethod.

Currently, I'm using Nativescript 6 with Vue.js. This is the relevant component, which is embedded into a ListView (not used in the code below):

<template>
    <GridLayout columns="70,6*,3*,3*,90,70" rows="60" class="border-separator-primary" :class="{'m-b-30': item.last, 'm-b-1': !item.last}">
        <FlexboxLayout col="0" row="0" alignItems="center" class="p-r-5">
            <Label :text="`${item.data.vintage}` "/>
        </FlexboxLayout>

        <FlexboxLayout col="1" row="0" alignItems="center" class="p-x-5" @tap="forwardToWine">
            <Label :text="`${item.data.name}`" :class="{'text-primary font-weight-bold': forwardEnabled}"/>
        </FlexboxLayout>

        <FlexboxLayout col="2" row="0" alignItems="center" class="p-x-5">
            <Label :text="`${item.data.grapeVariety.name}`"/>
        </FlexboxLayout>

        <FlexboxLayout col="3" row="0" alignItems="center" class="p-x-5" >
            <Label :text="`${item.data.quality.name}`"/>
        </FlexboxLayout>

        <FlexboxLayout col="4" row="0" alignItems="center" justifyContent="flex-start" class="p-x-5">
            <FlexboxLayout class="dropdown p-y-5" justifyContent="center" alignItems="center" @tap="openSelect">
                <DropDown ref="dropdown" selectedIndex="0" @selectedIndexChanged="selectedVariantChanged" :items="choice" itemsTextAlignment="center" class="font-weight-bold m-l-10 m-r-5" />
                <Label :text="'\uf078'" class="fas m-r-10" />
            </FlexboxLayout>
        </FlexboxLayout>

        <FlexboxLayout col="5" row="0" alignItems="center" justifyContent="flex-end" class="p-l-5">
            <Label class="font-weight-bold" :text="(item.data.variants[selectedVariant].price / 100) + '€'"/>
        </FlexboxLayout>
    </GridLayout>
</template>

<script lang="ts">
    import { SelectedIndexChangedEventData } from "nativescript-drop-down";
    import Wine from '~/components/wine';

    export default {
        props: {
            item: {
                type: Object,
            },
        },
        methods: {
            forwardToWine() {
                if(this.forwardEnabled) {
                    this.$navigateTo(Wine, {
                        props: {
                            wine: this.item.data
                        }
                    });
                }
            },
            selectedVariantChanged(args: SelectedIndexChangedEventData) {
                this.selectedVariant = args.newIndex;
            },
            openSelect() {
                this.$refs.dropdown.nativeView.open();
            }
        },
        computed: {
            choice() {
                return this.item.data.variants.map(variant => {
                    return variant.optionValues[0].value + variant.optionValues[0].option.unit;
                });
            }
        },
        data() {
            return {
                selectedVariant: 0,
                forwardEnabled: this.item.data.imageGallery && this.item.data.imageGallery.length > 0 && this.item.data.description && this.item.data.description.trim().length > 0,
            };
        },
    };
</script>

Note, that I have avoided the selectedIndex property on the dropdown, because the chance to get the null-error is much higher, if I use this property.

Do you have any ideas how to fix this bug? I think it's working all the time, if you do a null-check before this critical line. But it seems like an ugly solution for me at the first glance.

Thank you in advance!

[AlexBa]

This is an example for the list. I have about 800-1000 entries with infinity scroll (about 100 per page).

[PeterStaev]

This is now fixed in the new version of the plugin available in the ProPlugins NPM registry.

All future work of this plugin will be available exclusively as part of ProPlugins initiative. So if you want to get the latest updates/fixes/features make sure you subscribe to the service. You get all my plugins plus many of the most used and high quality plugins for a small monthly subscription fee.