Pdf Becomes Gray when switching between tabs in TabView

[AliKalkandelen]

Hello,

Im using a tabview in a page and the Pdf is in one tab and the details of the invoice are in the other tab.
ONLY on ios the pdf shows, but when i switch tabs and go back to the pdf the pdf screen is just a gray background you cant see the pdf.

Repro Steps:
1)Open Invoice

2. Click on Details Tab

3)Click back on Invoice Tab

The HTML
↓↓↓↓↓↓↓

<Shared-ActionBar [pageTitle]='"Invoice #: " + invoiceID'></Shared-ActionBar>

<TabView selectedTabTextColor="#012d6b" id="tabViewContainer" androidTabsPosition="bottom" androidSelectedTabHighlightColor="#012d6b">
        <StackLayout *tabItem="{title: 'PDF', iconSource: 'res://pdf'}">
                <FlexboxLayout>
                                <Button text="Approve" class="font-awesome btn btn-secondary pull-left" (tap)="showModal('approving')" icon="~/images/check.png"></Button>
                                <Button text="Reject"  class="font-awesome btn btn-secondary pull-right"(tap)="showModal('rejecting')" ></Button>
                </FlexboxLayout>
                <ActivityIndicator [busy]="_app.isLoading" *ngIf="_app.isLoading" width="100" height="100" class="activity-indicator" horizontalAlignment="center"
            verticalAlignment="center"></ActivityIndicator>
                <PDFView *ngIf="!_app.isLoading"  [src]="pdfUrl"></PDFView>
        </StackLayout>
        <FlexboxLayout *tabItem="{title: 'Invoice Details', iconSource: 'res://details'}">             
                <GridLayout rows="auto, auto, auto, auto, auto, auto" columns="auto, auto">
                    <Label text="Department: " class="h3" row="0" col="0"></Label>
                    <Label [text]="invoiceDetails.Department_Text" class="h3" row="0" col="1"></Label>
                    <Label text="Location: " class="h3" row="1" col="0"></Label>
                    <Label [text]="invoiceDetails.Location_Text" class="h3" row="1" col="1" textWrap="true"></Label>
                    <Label text="Expense Code: " class="h3" row="2" col="0"></Label>
                    <Label [text]="invoiceDetails.Expense_Text" class="h3" row="2" col="1"></Label>
                    <Label text="Amount: " class="h3" row="3" col="0"></Label>
                    <Label [text]="invoiceDetails.Invoice_Details_Amount.toFixed(2)" class="h3" row="3" col="1"></Label>
                    <Label text="Tax: " class="h3" row="4" col="0"></Label>
                    <Label [text]="invoiceDetails.Invoice_Details_Tax" class="h3" row="4" col="1"></Label>
                    <Label text="Subtotal: " class="h3" row="5" col="0"></Label>
                    <Label [text]="invoiceDetails.Subtotal" class="h3" row="5" col="1"></Label>
                </GridLayout>
        </FlexboxLayout>
</TabView>

[afaridanquah]

Having the same issue with tabs. Did you figure out a workaround?

[AliKalkandelen]

No unfortunately i haven't found a fix yet

…

On Wed, Jan 16, 2019 at 2:55 PM afaridanquah ***@***.***> wrote: Having the same issue with tabs. Did you figure out a workaround? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#37 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIP0ZEKnbTzJZuNp8ISvy7i2yu05u_Z5ks5vD4OkgaJpZM4Z4M4V> .

-- -"I would love to change the world, but they won't give me the source code"

[afaridanquah]

Found a workaround for it.
I passed a key to the component and bind it to a random number. So anytime you click on a tab i generate a random number and pass it as a prop to the component that renders the pdf. Not sure if its the right approach but did the charm.

See below

<PDFView v-show="selectedEvent.agenda && selectedEvent.agenda.filename" row="0" :src="pdfSrc" @load="endLoading" :key="jumperKey">

[afaridanquah]

@AliKalkandelen noticed you just reopened the issue. Did it not work in your case?

[AliKalkandelen]

@AliKalkandelen noticed you just reopened the issue. Did it not work in your case?

Yes it didnt work. maybe i didnt understand it exactly, could you elaborate on what you did? And im using Angular not vue so there might be a difference

[abahrisd]

I have same issue.
For angular found this workaround:

`constructor(
...
private cdr: ChangeDetectorRef,
...
) { }

ngOnInit() {
this.page.on('loaded', (data) => {
let oldPdfSrc = this.pdfSrc;
this.pdfSrc = undefined;
this.cdr.detectChanges();
this.pdfSrc = oldPdfSrc;
this.cdr.detectChanges();
});
}`