Description
Bug, feature request, or proposal:
Bug
What is the expected behavior?
Be able to use a matselect(wrapped in matformfield) in an ng5 component that has been downgraded for use in AngularJS application.
What is the current behavior?
matselect is displayed, but seems "frozen", does not react to mouse clicks except for console errors pasted below.
What are the steps to reproduce?
create app using angularjs 1.2 hybrid with ng5 and latest material(beta.12).
add matformfield with matselect to ng5 component
downgrade component and use in angularjs
give it some items
run the app
click on select
notice select doesn't react, but there are binding and length errors in console
What is the use-case or motivation for changing an existing behavior?
we should be able to upgrade a hybrid application and still be able to use the downgraded components utilizing matselect.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
angularjs 1.2, ng5, material beta.12
Is there anything else we should know?
my ng5 component that is downgraded has this template:
<mat-select
[ngModel]="startValue"
[multiple]="multiple"
[disabled]="disabled"
[required]="required"
(change)="selectChange($event)"
placeholder="{{placeholder}}">
<mat-option *ngFor="let item of items" [value]="item.id || item.value || item">{{item.text || item.label || item}}
The following are the console errors received. The bind of undefined occurs on load of page. The others occur upon clicking the select element.
angular.js:10072 TypeError: Cannot read property 'bind' of undefined
at hookupNgModel (eval at (http://localhost:62335/AngularApp/dist/app.js:2160:1), :360:61)
at DowngradeComponentAdapter.createComponent (eval at (http://localhost:62335/AngularApp/dist/app.js:2160:1), :448:9)
at doDowngrade (eval at (http://localhost:62335/AngularApp/dist/app.js:2160:1), :797:28)
at link (eval at (http://localhost:62335/AngularApp/dist/app.js:2160:1), :823:21)
at nodeLinkFn (http://localhost:62335/Scripts/angular.js:6711:13)
at compositeLinkFn (http://localhost:62335/Scripts/angular.js:6105:13)
at compositeLinkFn (http://localhost:62335/Scripts/angular.js:6108:13)
at compositeLinkFn (http://localhost:62335/Scripts/angular.js:6108:13)
at compositeLinkFn (http://localhost:62335/Scripts/angular.js:6108:13)
at compositeLinkFn (http://localhost:62335/Scripts/angular.js:6108:13)
at nodeLinkFn (http://localhost:62335/Scripts/angular.js:6705:24)
at compositeLinkFn (http://localhost:62335/Scripts/angular.js:6105:13)
at nodeLinkFn (http://localhost:62335/Scripts/angular.js:6705:24)
at compositeLinkFn (http://localhost:62335/Scripts/angular.js:6105:13)
at publicLinkFn (http://localhost:62335/Scripts/angular.js:6001:30)
at updateView (http://localhost:62335/Scripts/AngularUI/ui-router.js:2290:11)
at eventHook (http://localhost:62335/Scripts/AngularUI/ui-router.js:2224:17)
at Scope.$broadcast (http://localhost:62335/Scripts/angular.js:12981:28)
at $state.transition.resolved.then.$state.transition (http://localhost:62335/Scripts/AngularUI/ui-router.js:1822:22)
at wrappedCallback (http://localhost:62335/Scripts/angular.js:11573:81)
at http://localhost:62335/Scripts/angular.js:11659:26
at Scope.$eval (http://localhost:62335/Scripts/angular.js:12702:28)
at Scope.$digest (http://localhost:62335/Scripts/angular.js:12514:31)
at Scope.$apply (http://localhost:62335/Scripts/angular.js:12806:24)
at done (http://localhost:62335/Scripts/angular.js:8379:45)
at completeRequest (http://localhost:62335/Scripts/angular.js:8593:7)
at XMLHttpRequest.xhr.onreadystatechange (http://localhost:62335/Scripts/angular.js:8532:11)
at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (eval at 561 (http://localhost:62335/AngularApp/dist/polyfills.js:767:1), :1056:39)
at ZoneDelegate.invokeTask (eval at 561 (http://localhost:62335/AngularApp/dist/polyfills.js:767:1), :424:31)
at Object.onInvokeTask (eval at (http://localhost:62335/AngularApp/dist/vendor.js:6:1), :4817:33)
at ZoneDelegate.invokeTask (eval at 561 (http://localhost:62335/AngularApp/dist/polyfills.js:767:1), :423:36)
at Zone.runTask (eval at 561 (http://localhost:62335/AngularApp/dist/polyfills.js:767:1), :191:47)
at XMLHttpRequest.ZoneTask.invoke (eval at 561 (http://localhost:62335/AngularApp/dist/polyfills.js:767:1), :486:38) <cm-select [items]="medicalDirectors" ng-model="case.medicalDirectorUserId" class="ng-pristine ng-valid" _nghost-c36="" ng-version="5.0.0">
(anonymous) @ angular.js:10072
(anonymous) @ angular.js:7364
nodeLinkFn @ angular.js:6714
compositeLinkFn @ angular.js:6105
compositeLinkFn @ angular.js:6108
compositeLinkFn @ angular.js:6108
compositeLinkFn @ angular.js:6108
compositeLinkFn @ angular.js:6108
nodeLinkFn @ angular.js:6705
compositeLinkFn @ angular.js:6105
nodeLinkFn @ angular.js:6705
compositeLinkFn @ angular.js:6105
publicLinkFn @ angular.js:6001
updateView @ ui-router.js:2290
eventHook @ ui-router.js:2224
$broadcast @ angular.js:12981
$state.transition.resolved.then.$state.transition @ ui-router.js:1822
wrappedCallback @ angular.js:11573
(anonymous) @ angular.js:11659
$eval @ angular.js:12702
$digest @ angular.js:12514
$apply @ angular.js:12806
done @ angular.js:8379
completeRequest @ angular.js:8593
xhr.onreadystatechange @ angular.js:8532
wrapFn @ zone.js?fad3:1056
ZoneDelegate.invokeTask @ zone.js?fad3:424
onInvokeTask @ core.js?223c:4617
ZoneDelegate.invokeTask @ zone.js?fad3:423
Zone.runTask @ zone.js?fad3:191
ZoneTask.invoke @ zone.js?fad3:486
XMLHttpRequest.send (async)
scheduleTask @ zone.js?fad3:2263
ZoneDelegate.scheduleTask @ zone.js?fad3:410
onScheduleTask @ long-stack-trace-zone.js?fcc3:117
ZoneDelegate.scheduleTask @ zone.js?fad3:404
onScheduleTask @ zone.js?fad3:300
ZoneDelegate.scheduleTask @ zone.js?fad3:404
Zone.scheduleTask @ zone.js?fad3:235
Zone.scheduleMacroTask @ zone.js?fad3:258
(anonymous) @ zone.js?fad3:2287
proto.(anonymous function) @ zone.js?fad3:1426
(anonymous) @ angular.js:8561
sendReq @ angular.js:8355
serverRequest @ angular.js:8088
wrappedCallback @ angular.js:11573
(anonymous) @ angular.js:11659
$eval @ angular.js:12702
$digest @ angular.js:12514
$apply @ angular.js:12806
(anonymous) @ angular.js:14314
completeOutstandingRequest @ angular.js:4397
(anonymous) @ angular.js:4705
ZoneDelegate.invokeTask @ zone.js?fad3:424
onInvokeTask @ core.js?223c:4617
ZoneDelegate.invokeTask @ zone.js?fad3:423
Zone.runTask @ zone.js?fad3:191
ZoneTask.invoke @ zone.js?fad3:486
timer @ zone.js?fad3:1540
setTimeout (async)
scheduleTask @ zone.js?fad3:1550
ZoneDelegate.scheduleTask @ zone.js?fad3:410
onScheduleTask @ long-stack-trace-zone.js?fcc3:117
ZoneDelegate.scheduleTask @ zone.js?fad3:404
onScheduleTask @ zone.js?fad3:300
ZoneDelegate.scheduleTask @ zone.js?fad3:404
Zone.scheduleTask @ zone.js?fad3:235
Zone.scheduleMacroTask @ zone.js?fad3:258
(anonymous) @ zone.js?fad3:1576
proto.(anonymous function) @ zone.js?fad3:1426
Browser.self.defer @ angular.js:4703
timeout @ angular.js:14303
(anonymous) @ ui-router.js:2399
dispatch @ jquery-2.1.1.js:4409
elemData.handle @ jquery-2.1.1.js:4095
ZoneDelegate.invokeTask @ zone.js?fad3:424
onInvokeTask @ core.js?223c:4617
ZoneDelegate.invokeTask @ zone.js?fad3:423
Zone.runTask @ zone.js?fad3:191
ZoneTask.invoke @ zone.js?fad3:486
15:22:21.813 MatSelect.html:1 ERROR TypeError: Cannot read property 'length' of undefined
at MatSelect.open (eval at (app.js:497), :579:44)
at MatSelect.toggle (eval at (app.js:497), :571:46)
at Object.eval [as handleEvent] (MatSelect.html:1)
at handleEvent (eval at (vendor.js:6), :13454:172)
at callWithDebugContext (eval at (vendor.js:6), :14939:42)
at Object.debugHandleEvent [as handleEvent] (eval at (vendor.js:6), :14526:12)
at dispatchEvent (eval at (vendor.js:6), :9903:25)
at eval (eval at (vendor.js:6), :10517:38)
at HTMLDivElement.eval (eval at (vendor.js:91), :2666:53)
at ZoneDelegate.invokeTask (eval at 561 (polyfills.js:767), :424:31)
at Object.onInvokeTask (eval at (vendor.js:6), :4817:33)
at ZoneDelegate.invokeTask (eval at 561 (polyfills.js:767), :423:36)
at Zone.runTask (eval at 561 (polyfills.js:767), :191:47)
at HTMLDivElement.ZoneTask.invoke (eval at 561 (polyfills.js:767), :486:38)
View_MatSelect_0 @ MatSelect.html:1
proxyClass @ compiler.js?7e34:14524
DebugContext_.logError @ core.js?223c:14679
ErrorHandler.handleError @ core.js?223c:1411
dispatchEvent @ core.js?223c:9707
(anonymous) @ core.js?223c:10317
(anonymous) @ platform-browser.js?023b:2614
ZoneDelegate.invokeTask @ zone.js?fad3:424
onInvokeTask @ core.js?223c:4617
ZoneDelegate.invokeTask @ zone.js?fad3:423
Zone.runTask @ zone.js?fad3:191
ZoneTask.invoke @ zone.js?fad3:486
15:22:21.814 MatSelect.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 3, nodeDef: {…}, elDef: {…}, elView: {…}}
View_MatSelect_0 @ MatSelect.html:1
proxyClass @ compiler.js?7e34:14524
DebugContext_.logError @ core.js?223c:14679
ErrorHandler.handleError @ core.js?223c:1416
dispatchEvent @ core.js?223c:9707
(anonymous) @ core.js?223c:10317
(anonymous) @ platform-browser.js?023b:2614
ZoneDelegate.invokeTask @ zone.js?fad3:424
onInvokeTask @ core.js?223c:4617
ZoneDelegate.invokeTask @ zone.js?fad3:423
Zone.runTask @ zone.js?fad3:191
ZoneTask.invoke @ zone.js?fad3:486
15:22:21.816 MatFormField.html:1 ERROR TypeError: Cannot read property 'length' of undefined
at MatSelect.open (eval at (app.js:497), :579:44)
at MatSelect.onContainerClick (eval at (app.js:497), :1399:14)
at Object.eval [as handleEvent] (MatFormField.html:1)
at handleEvent (eval at (vendor.js:6), :13454:172)
at callWithDebugContext (eval at (vendor.js:6), :14939:42)
at Object.debugHandleEvent [as handleEvent] (eval at (vendor.js:6), :14526:12)
at dispatchEvent (eval at (vendor.js:6), :9903:25)
at eval (eval at (vendor.js:6), :10517:38)
at HTMLDivElement.eval (eval at (vendor.js:91), :2666:53)
at ZoneDelegate.invokeTask (eval at 561 (polyfills.js:767), :424:31)
at Object.onInvokeTask (eval at (vendor.js:6), :4817:33)
at ZoneDelegate.invokeTask (eval at 561 (polyfills.js:767), :423:36)
at Zone.runTask (eval at 561 (polyfills.js:767), :191:47)
at HTMLDivElement.ZoneTask.invoke (eval at 561 (polyfills.js:767), :486:38)
View_MatFormField_0 @ MatFormField.html:1
proxyClass @ compiler.js?7e34:14524
DebugContext_.logError @ core.js?223c:14679
ErrorHandler.handleError @ core.js?223c:1411
dispatchEvent @ core.js?223c:9707
(anonymous) @ core.js?223c:10317
(anonymous) @ platform-browser.js?023b:2614
ZoneDelegate.invokeTask @ zone.js?fad3:424
onInvokeTask @ core.js?223c:4617
ZoneDelegate.invokeTask @ zone.js?fad3:423
Zone.runTask @ zone.js?fad3:191
ZoneTask.invoke @ zone.js?fad3:486
15:22:21.817 MatFormField.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 4, nodeDef: {…}, elDef: {…}, elView: {…}}
View_MatFormField_0 @ MatFormField.html:1
proxyClass @ compiler.js?7e34:14524
DebugContext_.logError @ core.js?223c:14679
ErrorHandler.handleError @ core.js?223c:1416
dispatchEvent @ core.js?223c:9707
(anonymous) @ core.js?223c:10317
(anonymous) @ platform-browser.js?023b:2614
ZoneDelegate.invokeTask @ zone.js?fad3:424
onInvokeTask @ core.js?223c:4617
ZoneDelegate.invokeTask @ zone.js?fad3:423
Zone.runTask @ zone.js?fad3:191
ZoneTask.invoke @ zone.js?fad3:486