BottomSheet giving errors when a tap event or a button is present

Which platform(s) does your issue occur on?

Both
Versions:
- iOS X & 6s
- Android marshmallow
emulator

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

CLI: 6.1.2
Cross-platform modules: 6.1.1
Runtime(s):
- tns-android: 6.1.2
- tns-ios: 6.1.1

Plugin(s):

{
"dependencies": {
"@angular/animations": "~8.2.4",
"@angular/common": "~8.2.4",
"@angular/compiler": "~8.2.4",
"@angular/core": "~8.2.4",
"@angular/forms": "~8.2.4",
"@angular/platform-browser": "~8.2.4",
"@angular/platform-browser-dynamic": "~8.2.4",
"@angular/router": "~8.2.4",
"@nstudio/nativescript-cardview": "^1.0.0",
"@nstudio/nativescript-checkbox": "^1.0.0",
"nativescript-angular": "^8.2.1",
"nativescript-bottom-navigation": "^2.0.5",
"nativescript-camera": "^4.5.0",
"nativescript-geocoding": "^2.0.0",
"nativescript-geolocation": "^5.1.0",
"nativescript-lottie": "^4.0.0",
"nativescript-mapbox": "^4.4.1",
"nativescript-material-bottomsheet": "^2.5.2",
"nativescript-phone": "^1.4.0",
"nativescript-plugin-firebase": "^10.0.1",
"nativescript-theme-core": "^2.0.23",
"nativescript-unit-test-runner": "^0.7.0",
"node-sass": "^4.12.0",
"reflect-metadata": "~0.1.12",
"rxjs": "~6.5.0",
"tns-core-modules": "^6.1.1",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular/cli": "^8.1.0",
"@angular/compiler-cli": "~8.2.4",
"@nativescript/schematics": "^0.7.1",
"@ngtools/webpack": "^8.3.2",
"@types/chai": "~4.1.7",
"@types/karma-chai": "0.1.1",
"@types/minimist": "^1.2.0",
"@types/mocha": "5.2.7",
"@types/node": "~10.12.18",
"@typescript-eslint/eslint-plugin": "~2.3.0",
"@typescript-eslint/parser": "~2.3.0",
"chai": "4.2.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "~6.3.0",
"eslint-plugin-prettier": "~3.1.0",
"firebase": "^7.2.0",
"karma": "4.1.0",
"karma-chai": "0.1.0",
"karma-mocha": "1.3.0",
"karma-nativescript-launcher": "0.4.0",
"karma-webpack": "4.0.2",
"minimist": "^1.2.0",
"mocha": "6.1.4",
"mocha-junit-reporter": "~1.18.0",
"mocha-multi": "^1.1.3",
"mochawesome": "~3.1.2",
"nativescript-dev-appium": "^6.1.2",
"nativescript-dev-webpack": "^1.1.1",
"prettier": "~1.18.2",
"tslint": "~5.20.0",
"tslint-config-airbnb": "~5.11.1",
"typescript": "3.5.3"
}
}

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

I'm showing a bottomSheet using bottomSheetService, and setting the viewContainerRef to be the current containerRef.

the core part of the app that currently uses bottomSheet looks like this

AppComponent, contains:
- page-router-outlet, leads to:
- itemDetailComponent, contains:
  - page-router-outlet, leads to:
  - MainInfoComponent, contains:
    - MainActionButtonComponent, contains:
    - Button "open bottomSheet", opens the bottom sheet when tapped

The code in MainInfoComponent

import { Component, ViewContainerRef } from '@angular/core';
import { BottomSheetService } from 'nativescript-material-bottomsheet/angular';
import { BottomSheetComponent } from '~/app/modals/bottom-sheets/bottom-sheet/bottom-sheet.component';

@Component({
  selector: 'ns-main-info',
  templateUrl: './main-info.component.html',
  styleUrls: ['./main-info.component.css'],
})
export class MainInfoComponent {
  constructor(
    private bottomSheetService: BottomSheetService,
    private containerRef: ViewContainerRef,
  ) {}

  open() {
    this.bottomSheetService.show(BottomSheetComponent, {
      viewContainerRef: this.containerRef,
    });
  }
}

The code in BottomSheetComponent

<Label text="TEST" textWrap="true" (tap)="close()"></Label>

import { Component, OnInit } from '@angular/core';
import { BottomSheetParams } from 'nativescript-material-bottomsheet/angular';

@Component({
  selector: 'ns-bottom-sheet',
  templateUrl: './bottom-sheet.component.html',
  styleUrls: ['./bottom-sheet.component.css'],
})
export class BottomSheetComponent implements OnInit {
  constructor(private bottomSheetParams: BottomSheetParams) {}

  ngOnInit() {}

  close() {
    this.bottomSheetParams.closeCallback();
  }
}

Note: NativeScriptMaterialBottomSheetModule.forRoot() is added in app.module.ts and nowhere else.

With all of this, here are the issue I've ran into:

iOS:

when tapping on the label, the bottom sheet is closed, however I get a "long error" (as well as a console.log("closeBottomSheet"))

CONSOLE LOG file:///node_modules/nativescript-material-bottomsheet/bottomsheet-common.js:80:0: closeBottomSheet
CONSOLE LOG file:///app/vendor.js:94277:20: _hideNativeBottomSheet ProxyViewContainer(1320) undefined Page(1317) at _hideNativeBottomSheet(file:///node_modules/nativescript-material-bottomsheet/bottomsheet.js:198:0) [angular]
at _closeBottomSheetCallback(file:///node_modules/nativescript-material-bottomsheet/bottomsheet-common.js:61:0) [angular]
at closeBottomSheet(file:///node_modules/nativescript-material-bottomsheet/bottomsheet-common.js:83:0) [angular]
at file:///node_modules/nativescript-material-bottomsheet/angular/bottomsheet.service.js:74:0 [angular]
at wrapper(file:///node_modules/nativescript-angular/common/utils.js:15:0) [angular]
at close(file:///src/app/modals/bottom-sheets/labels-mailed/labels-mailed.component.ts:15:40) [angular]
at  [angular]
at callWithDebugContext(file:///node_modules/@angular/core/fesm5/core.js:30308:0) [angular]
at dispatchEvent(file:///node_modules/@angular/core/fesm5/core.js:19858:0) [angular]
at file:///node_modules/nativescript-angular/renderer.js:241:0 [angular]
at onInvoke(file:///node_modules/@angular/core/fesm5/core.js:26255:0) [angular]
at zonedCallback(file:///node_modules/nativescript-angular/renderer.js:240:0) [<root>]
at recognize(file:///node_modules/tns-core-modules/ui/gestures/gestures.js:64:0) [<root>]
at UIApplicationMain([native code]) [<root>]
at _start(file:///node_modules/tns-core-modules/application/application.js:295:0) [<root>]
at run(file:///node_modules/tns-core-modules/application/application.js:323:0) [<root>]
at bootstrapNativeScriptApp<…>

After spending some time trying to understand what could be happening, it turns out the long error is actually just a second console.log that logs new Error().stack, I'm not sure what the point of it is. https://github.com/Akylas/nativescript-material-components/blob/ee5781ddbf3eb64fe99237f329923b30b97061e2/src/bottomsheet/bottomsheet.ios.ts#L226 (there's actually a lot of console.log being shown when using the libraries, which feels really weird to see in the production build)

Android:

The bottom sheet is actually not opening at all !

When tapping on the button to open the bottom sheet, I get:

JS: ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'closeCallback' of undefined
JS: TypeError: Cannot set property 'closeCallback' of undefined
JS:     at Label.push.../node_modules/nativescript-material-bottomsheet/bottomsheet-common.js.ViewWithBottomSheetBase._showNativeBottomSheet (file:///node_modules/nativescript-material-bottomsheet/bottomsheet-common.js:64:0)
JS:     at Label.push.../node_modules/nativescript-material-bottomsheet/bottomsheet.js.ViewWithBottomSheet._showNativeBottomSheet (file:///node_modules/nativescript-material-bottomsheet/bottomsheet.js:123:0)
JS:     at Label.derivedCtor.<computed> [as _showNativeBottomSheet] (file:///node_modules/nativescript-material-core/core.common.js:41:0)
JS:     at ProxyViewContainer.push.../node_modules/nativescript-material-bottomsheet/bottomsheet-common.js.ViewWithBottomSheetBase.showBottomSheet (file:///node_modules/nativescript-material-bottomsheet/bottomsheet-common.js:100:0)
JS:     at file:///node_modules/nativescript-material-bottomsheet/angular/bottomsheet.service.js:34:0
JS:     at ZoneDelegate.push.../node_modules/nativescript-angu...

Now I did another test by replacing the label with a button:

<Button class="btn_primary_action" (tap)="close()">
  <FormattedString>
    <Label text="&#xe957;" class="icon"></Label>
    <Label text=" Merci !"></Label>
  </FormattedString>
</Button>

now the same thing as above is happening, though I get another error

When tapping outside the bottom sheet, I get this:

***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1   0x10f24171a NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x10f27db28 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
3   0x10fc29756 ffi_closure_unix64_inner
4   0x10fc2a17a ffi_closure_unix64
5   0x10e160701 -[MDCBottomSheetPresentationController sheetContainerViewWillChangeState:sheetState:]
6   0x10e1a3e08 -[MDCSheetContainerView setSheetState:]
7   0x10e1a3c28 -[MDCSheetContainerView draggableView:draggingEndedWithVelocity:]
8   0x10e163da2 -[MDCDraggableView didPan:]
9   0x7fff46d1e777 -[UIGestureRecognizerTarget _sendActionWithGestureRecognizer:]
10  0x7fff46d27909 _UIGestureRecognizerSendTargetActions
11  0x7fff46d24fc5 _UIGestureRecognizerSendActions
12  0x7fff46d242f2 -[UIGestureRecognizer _updateGestureForActiveEvents]
13  0x7fff46d16308 _UIGestureEnvironmentUpdate
14  0x7fff46d1583e -[UIGestureEnvironment _deliverEvent:toGestureRecognizers:usingBlock:]
15  0x7fff46d155d7 -[UIGestureEnvironment _updateForEvent:window:]
16  0x7fff4719fb10 -[UIWindow sendEvent:]
17  0x7fff4717b1a7 -[UIApplication sendEvent:]
18  0x7fff471faa18 __dispatchPreprocessedEventFromEventQueue
19  0x7fff471fd4de __handleEventQueueInternal
20  0x7fff23afbac1 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__
21  0x7fff23afb9ec __CFRunLoopDoSource0
22  0x7fff23afb1c4 __CFRunLoopDoSources0
23  0x7fff23af5ecf __CFRunLoopRun
24  0x7fff23af56b6 CFRunLoopRunSpecific
25  0x7fff3815cbb0 GSEventRunModal
26  0x7fff47162a67 UIApplicationMain
27  0x10fc29fbd ffi_call_unix64
28  0x1192b8800
JavaScript stack trace:
file:///node_modules/nativescript-material-bottomsheet/bottomsheet-common.js:29:0
at localCallback(file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:76:0)
at eachChild(file:///node_modules/tns-core-modules/ui/text-base/text-base-common.js:201:0)
at eachDescendant(file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:82:0)
at _bottomSheetClosed(file:///node_modules/nativescript-material-bottomsheet/bottomsheet-common.js:28:0)
at _whenCloseBottomSheetCallback(file:///node_modules/nativescript-material-bottomsheet/bottomsheet-common.js:47:0)
at bottomSheetControllerStateChangedState(file:///node_modules/nativescript-material-bottomsheet/bottomsheet.js:33:0)
at UIApplicationMain([native code])
at _start(file:///node_modules/tns-core-modules/application/application.js:295:0)
at run(file:///node_modules/tns-core-modules/application/application.js:323:0)
at bootstrapNativeScriptApp(file:///node_modules/nativescript-angular/platform-common.js:210:0)
at bootstrapApp(file:///node_modules/nativescript-angular/platform-common.js:111:0)
at bootstrapModule(file:///node_modules/nativescript-angular/platform-common.js:91:0)
at file:///app/bundle.js:2787:144
at ./main.ts(file:///app/bundle.js:2792:34)
at __webpack_require__(file:///src/webpack/bootstrap:750:0)
at checkDeferredModules(file:///src/webpack/bootstrap:43:0)
at webpackJsonpCallback(file:///src/webpack/bootstrap:30:0)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation([native code])
at promiseReactionJob([<…>
JavaScript error:
file:///node_modules/nativescript-material-bottomsheet/bottomsheet-common.js:29:0: JS ERROR TypeError: child._bottomSheetClosed is not a function. (In 'child._bottomSheetClosed()', 'child._bottomSheetClosed' is undefined)
NativeScript caught signal 11.
Native Stack:
1   0x10f28bcb1 sig_handler(int)
2   0x7fff51414b5d _sigtramp
3   0x0
4   0x7fff51448b85 libunwind::UnwindCursor<libunwind::LocalAddressSpace, libunwind::Registers_x86_64>::step()
5   0x7fff5144ce58 _Unwind_RaiseException
6   0x7fff4f23b8bd __cxa_throw
7   0x7fff503b5c44 _objc_exception_destructor(void*)
8   0x10f241bbf NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
9   0x10f27db28 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
10  0x10fc29756 ffi_closure_unix64_inner
11  0x10fc2a17a ffi_closure_unix64
12  0x10e160701 -[MDCBottomSheetPresentationController sheetContainerViewWillChangeState:sheetState:]
13  0x10e1a3e08 -[MDCSheetContainerView setSheetState:]
14  0x10e1a3c28 -[MDCSheetContainerView draggableView:draggingEndedWithVelocity:]
15  0x10e163da2 -[MDCDraggableView didPan:]
16  0x7fff46d1e777 -[UIGestureRecognizerTarget _sendActionWithGestureRecognizer:]
17  0x7fff46d27909 _UIGestureRecognizerSendTargetActions
18  0x7fff46d24fc5 _UIGestureRecognizerSendActions
19  0x7fff46d242f2 -[UIGestureRecognizer _updateGestureForActiveEvents]
20  0x7fff46d16308 _UIGestureEnvironmentUpdate
21  0x7fff46d1583e -[UIGestureEnvironment _deliverEvent:toGestureRecognizers:usingBlock:]
22  0x7fff46d155d7 -[UIGestureEnvironment _updateForEvent:window:]
23  0x7fff4719fb10 -[UIWindow sendEvent:]
24  0x7fff4717b1a7 -[UIApplication sendEvent:]
25  0x7fff471faa18 __dispatchPreprocessedEventFromEventQueue
26  0x7fff471fd4de __handleEventQueueInternal
27  0x7fff23afbac1 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__
28  0x7fff23afb9ec __CFRunLoopDoSource0
29  0x7fff23afb1c4 __CFRunLoopDoSources0
30  0x7fff23af5ecf __CFRunLoopRun
31  0x7fff23af56b6 CFRunLoopRunSpecific
JS Stack:
UIApplicationMain([native code])
at _start(file:///node_modules/tns-core-modules/application/application.js:295:0)
at run(file:///node_modules/tns-core-modules/application/application.js:323:0)
at bootstrapNativeScriptApp(file:///node_modules/nativescript-angular/platform-common.js:210:0)
at bootstrapApp(file:///node_modules/nativescript-angular/platform-common.js:111:0)
at bootstrapModule(file:///node_modules/nativescript-angular/platform-common.js:91:0)
at file:///app/bundle.js:2787:144
at ./main.ts(file:///app/bundle.js:2792:34)
at __webpack_require__(file:///src/webpack/bootstrap:750:0)
at checkDeferredModules(file:///src/webpack/bootstrap:43:0)
at webpackJsonpCallback(file:///src/webpack/bootstrap:30:0)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation
at promiseReactionJob

Followed by a complete crash of the app.

I also have an issue where a css variable isn't being found here:

CONSOLE ERROR file:///node_modules/tns-core-modules/trace/trace.js:174:0: Style: Failed to get value for css-variable "--white" used in "color"=[var(--white)] to Button(183)
CONSOLE ERROR file:///node_modules/tns-core-modules/trace/trace.js:174:0: Style: Failed to get value for css-variable "--green" used in "background-color"=[var(--green)] to Button(183)

this might be a nativescript issue though, not sure.

nativescript-community / ui-material-components