Tabbed Layout forId problem

comporell commented 5 years ago

Make sure to check the demo app(s) for sample usage

Demo app works

If the demo apps cannot help and there is no issue for your problem, tell us.

I see the message on console

Please make sure forId="" resolves to a visible view, or the toolbar won't render correctly! Example: <Toolbar forId="myId" height="44">

When it does, the keyboard toolbar does not show no matter how many times I click it the triggering textfield. Then I click the Home button (Android) and click the overview button to go back to the app, then the textfield triggers the keyboardtoolbar and everything works fine!

1 out of 10 times the message does not appear and everything works fine on multiple tabs. Sometimes it only affects some of the keyboardtoolbars.

Which platform(s) does your issue occur on?

Android / Not checked iOS

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

CLI: 6.0.2
Runtime(s): "tns-android": { "version": "6.0.0" }, "tns-ios": { "version": "6.0.1" }
Plugin(s): "dependencies": { "@angular/animations": "8.0.0", "@angular/common": "8.0.0", "@angular/compiler": "8.0.0", "@angular/core": "8.0.0", "@angular/forms": "8.0.0", "@angular/http": "^8.0.0-beta.10", "@angular/platform-browser": "8.0.0", "@angular/platform-browser-dynamic": "8.0.0", "@angular/router": "8.0.0", "@nstudio/nativescript-pulltorefresh": "^1.0.1", "@types/node": "^11.13.18", "crypto-js": "^3.1.9-1", "email-validator": "^2.0.4", "moment": "^2.24.0", "nativescript-angular": "8.0.2", "nativescript-background-http": "^3.4.1", "nativescript-barcodescanner": "^3.2.1", "nativescript-camera": "^4.5.0", "nativescript-carousel": "^6.1.0", "nativescript-contacts": "^1.6.2", "nativescript-crossplatform-aes": "^1.0.3", "nativescript-downloader": "^2.1.4", "nativescript-feedback": "^1.3.10", "nativescript-filter-select": "^1.3.0", "nativescript-imagecropper": "^1.0.6", "nativescript-keyboard-toolbar": "^1.0.4", "nativescript-loading-indicator": "^2.5.2", "nativescript-local-notifications": "^4.0.1", "nativescript-localstorage": "^2.0.0", "nativescript-modal-datetimepicker": "^1.2.0", "nativescript-permissions": "^1.3.6", "nativescript-phone": "^1.4.0", "nativescript-ripple": "^2.2.1", "nativescript-social-share": "^1.5.2", "nativescript-theme-core": "~1.0.4", "nativescript-ui-chart": "5.0.0", "nativescript-ui-dataform": "5.0.0", "nativescript-ui-listview": "7.0.0", "nativescript-web-image-cache": "^5.0.0", "reflect-metadata": "~0.1.12", "rxjs": "~6.3.0", "tns-core-modules": "~6.0.1", "uglifyjs-webpack-plugin": "^2.1.3", "webpack-bundle-analyzer": "^3.3.2", "xmldom": "^0.1.27", "xpath": "0.0.27", "zone.js": "0.9.1" }, "devDependencies": { "@angular/compiler-cli": "8.0.0", "@nativescript/schematics": "~0.5.0", "@ngtools/webpack": "8.0.0", "node-sass": "4.12.0", "nativescript-dev-webpack": "^1.0.1", "tns-platform-declarations": "6.0.1", "typescript": "3.4.5" },

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

I tried to recreate the issue using an empty tabbed layout and multiple keyboardtoolbars. the issue did not reoccur. I think it might be related to loading times of the tab contents.

Is there any code involved?

I used the sample code, not much of extras:

           <TextField #tfFilterTask id="tf2" row="1" col="0" style="placeholder-color: rgba(255,255,255,0.6)"
                       class="c-white m-l-5" hint="Kod veya isim..." [text]=filterTaskText
                       (textChange)="onFilterChange($event)"></TextField>

    <KeyboardToolbar2 forId="tf2" height="50">
        <GridLayout columns="auto, *,auto,auto, auto" class="c-white p-10" backgroundColor="#26252A">
            <Label col="0" class="fas fs-24" verticalAlignment="center" text="&#xf002; Ara: "></Label>
            <Label col="1" class="fs-24" verticalAlignment="center" [text]=filterTaskText></Label>
            <Label col="2" class="fas c-white p-5 m-l-20" verticalAlignment="center" textWrap="false" text="&#xf069;"></Label>
            <Label col="3" class="fas c-white p-5 m-l-20" verticalAlignment="center" textWrap="false" text="&#xf2ed;" (tap)="clearKeyboard()"></Label>
            <Label col="4" class="fas c-white p-5 m-l-20" verticalAlignment="center" textWrap="false" text="&#xf00d;" (tap)="closeKeyboard(tfFilterTask)"></Label>
        </GridLayout>
    </KeyboardToolbar2>

Thank you for this great plugin, I hope we can solve this issue as I'd really like to use it.

comporell commented 5 years ago

Hi @EddyVerbruggen , I think it might be related to this issue androidTabsPosition="bottom" androidOffscreenTabLimit="0" with the tabview. When androidTabsPosition is set to bottom, androidOffscreenTabLimit="0" is ommited and tabview tries to preload the next tab. As the next tab is not in the frame, it gives this above message, and the triggering textfield does not get binded. Would be glad if there were a workaround for this. maybe by bypassing a page id, rather than this below in nativescript-keyboard-toolbar\keyboard-toolbar.android.js line 20 _this.thePage = frame_1.topmost().currentPage;

What do you think?

EddyVerbruggen commented 5 years ago

Hi @comporell, would you mind sharing a repo (or Playground) that shows the problematic behavior? I'm sure we can think of a way to fix it once the problem is clearly demonstrated.

comporell commented 5 years ago

Hi @comporell, would you mind sharing a repo (or Playground) that shows the problematic behavior? I'm sure we can think of a way to fix it once the problem is clearly demonstrated.

Dear Eddy. Playground is a pain to work with, I'm attaching an example project.

tabbedKeyboardTest.zip

EddyVerbruggen commented 5 years ago

Thanks for the project!

Indeed the issue was with preloading of tabs on Android. I had to add some code specific to this TabView case to make it work.

EddyVerbruggen commented 5 years ago

@comporell Can you give 1.1.0 a go?

EddyVerbruggen / nativescript-keyboard-toolbar