ZxingScannerComponen.init method called twice when enable flag is set to true (leak once again)

[RafalOddslife]

Hi, it's me again. I didn't notice this earlier. Issue which gives similar effect as https://github.com/zxing-js/ngx-scanner/issues/557 but now it's caused by [enable]="true" flag.

Describe the bug

ZxingScannerComponen.init method is called twice when enable flag is set to true which causes to run scanning twice (leak). onDestroy stops only one of scanning processes. Affected version: "@zxing/ngx-scanner": "^17.0.2"

Code

<button (click)="scannerVisible = !scannerVisible">Toggle scanner</button>
<zxing-scanner [enable]="true" *ngIf="scannerVisible"></zxing-scanner>

To Reproduce

Steps to reproduce the behavior:

1. Go to simple repro
2. Use toggle button to init and destroy zxing-scanner component (the more you do this, the bigger the leakage)
3. Each time scanner component is initialized it's calling 'init' method twice
4. Open chrome devtools, open Performance tab and capture new recording
5. BrowserCodeReader is still trying to decode even after destroying component

Expected behavior Component should start only one scanning process.

Screenshots

[werthdavid]

Is this still the case with the version from today? From looking at the code this should be resolved via #557

[RafalOddslife]

Is this still the case with the version from today?

Yes, your PR fixed problem with disposing scanning process on component destroy.

This issue is caused by initializing scanning process twice when enable input is set to true. Stackblitz repro is based on the newest version 17.0.2

[werthdavid]

Damnit, as setting enable to false calls the reset method I was hoping this would be resolved. I'll take a look then. Thanks

[RafalOddslife]

If you setup breakpoint in ZXingScannerComponent.scanFromDevice you'll see it's called twice on component creation and this._scanSubscription is overwritten.

[werthdavid]

Good point! Thank you

[werthdavid]

plz test 17.0.3

[RafalOddslife]

I'm afraid it solves my repro but the root of the problem is more complicated

IMO these leaks are caused by:

• calling async methods from sync context (ngOnInit and enable setter)
• parent component/template can toggle enable flag many times which leads to multiple ZxingScannerComponent.init calls without clearing previously created scanning processes

Simple example:

<button (click)="scannerEnable = !scannerEnable">Toggle scanner enable</button>
<zxing-scanner [enable]="scannerEnable"></zxing-scanner>

it causes leak when you toggle enable flag few times quickly

[werthdavid]

the fix is indeed not addressing the root of the problem. with my upcoming vacation I'm not sure when I will find time to look deeper into it that's why I keep the issue open.