autocomplete error: TypeError: Cannot read property 'originX' of undefined

[starksds]

Bug, feature request, or proposal:

Getting an error when using the example code provided at https://material.angular.io/components/component/autocomplete

What is the expected behavior?

Should work like demo

What is the current behavior?

Error is thrown when field receives focus

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

What is the use-case or motivation for changing an existing behavior?

It should work or give a better error

Which versions of Angular, Material, OS, browsers are affected?

Material 2.0.0-beta.2
Angular 4.0.0-beta.7

Is there anything else we should know?

[starksds]

It is worth noting here that taking your TS file from the actual source does work so it is probably just an issue with documentation.

[kara]

@starksds The plunker demo from the docs site is working as expected for me. Can you link to a plunker repro case so we can look into this?

[starksds]

Ok, so I actually couldn't get it to work with the src code or with what is in the plunkr demo.

Here is my package.json dependencies, do you see anything that might be an issue?

"dependencies": {
"@types/jasmine": "2.5.41",
"@angular/common": "4.0.0-beta.7",
"@angular/compiler": "4.0.0-beta.7",
"@angular/compiler-cli": "4.0.0-beta.7",
"@angular/core": "4.0.0-beta.7",
"@angular/flex-layout": "2.0.0-beta.5",
"@angular/forms": "4.0.0-beta.7",
"@angular/http": "4.0.0-beta.7",
"@angular/material": "2.0.0-beta.2",
"@angular/platform-browser": "4.0.0-beta.7",
"@angular/platform-browser-dynamic": "4.0.0-beta.7",
"@angular/platform-server": "4.0.0-beta.7",
"@angular/router": "4.0.0-beta.7",
"angular2-toaster": "2.0.0",
"bootstrap-sass": "3.3.7",
"core-js": "2.4.1",
"font-awesome": "4.7.0",
"hammerjs": "2.0.8",
"md2": "0.0.13-1",
"reflect-metadata": "0.1.9",
"prismjs": "1.6.0",
"rxjs": "5.1.1",
"zone.js": "0.7.7"
},
"devDependencies": {
"@types/node": "7.0.5",
"@types/hammerjs": "2.0.34",
"@types/selenium-webdriver": "2.53.39",
"angular2-template-loader": "0.6.0",
"angular-router-loader": "0.5.0",
"autoprefixer": "6.7.2",
"awesome-typescript-loader": "3.0.0-beta.18",
"bootstrap-loader": "2.0.0-beta.20",
"clean-webpack-plugin": "0.1.15",
"codelyzer": "2.0.0-beta.4",
"compression-webpack-plugin": "0.3.2",
"copy-webpack-plugin": "4.0.1",
"cross-env": "3.1.4",
"css-loader": "0.26.1",
"extract-text-webpack-plugin": "2.0.0-beta.4",
"file-loader": "0.10.0",
"htmlhint-loader": "1.1.1",
"html-webpack-plugin": "2.28.0",
"istanbul-instrumenter-loader": "1.2.0",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "3.2.0",
"json-loader": "0.5.4",
"karma": "1.4.1",
"karma-chrome-launcher": "2.0.0",
"karma-coverage": "1.1.1",
"karma-jasmine": "1.1.0",
"karma-mocha-reporter": "2.2.2",
"karma-remap-coverage": "0.1.4",
"karma-remap-istanbul": "0.5.0",
"karma-phantomjs-launcher": "1.0.2",
"karma-trx-reporter": "0.2.9",
"karma-webpack": "2.0.2",
"node-sass": "4.5.0",
"postcss-loader": "1.2.2",
"protractor": "5.1.1",
"protractor-jasmine2-screenshot-reporter": "0.3.2",
"raw-loader": "0.5.1",
"resolve-url-loader": "1.6.1",
"rimraf": "2.5.4",
"sass": "0.5.0",
"sass-loader": "4.1.1",
"sass-resources-loader": "1.1.0",
"source-map-loader": "0.1.6",
"style-loader": "0.13.1",
"stylelint": "7.8.0",
"stylelint-webpack-plugin": "0.5.1",
"ts-helpers": "1.1.2",
"tslint": "4.4.2",
"tslint-loader": "3.3.0",
"typescript": "2.1.4",
"url-loader": "0.5.7",
"webpack": "2.2.1"
}
}

[starksds]

@kara I'm pretty sure it is due to a lazy loaded module

[kara]

Thanks, that's helpful. Can you also paste a fuller stack trace of the error you're getting?

[starksds]

@kara the error was due to missing the BrowserModule in a lazy loaded route. I'll recreate and add the stacktrace.

[starksds]

Uncaught TypeError: Cannot read property 'originX' of undefined
at t._getOriginConnectionPoint (vendor.js:2537)
at t.recalculateLastPosition (vendor.js:2537)
at t._resetPanel (vendor.js:2492)
at e.project (vendor.js:2492)
at e._next (vendor.js:4780)
at e.next (vendor.js:10)
at e.notifyNext (vendor.js:16)
at e._next (vendor.js:4141)
at e.next (vendor.js:10)
at e._emitFinal (vendor.js:1798)
at e._emit (vendor.js:1798)
at e._next (vendor.js:1798)
at e.next (vendor.js:10)
at e.object.i [as _next] (vendor.js:1417)
at e.__tryOrUnsub (vendor.js:10)

[starksds]

@kara so after further testing it appears to be related to having the devtools open in a docked window (and taking up most of the screen). this is reproducible on the material demo component site and plunkr

[starksds]

Autocomplete also doesn't work on iPhone 6s (and possibly others too). The options list never shows.

[starksds]

@kara

[kara]

@starksds Thanks for the clarification! Seeing it now too when I open Devtools and make the viewport really small. My hunch is that it's related to this PR: #3189.

None of the positions fit, so it's crashing. We should be using the first position as a default. Can you test again against your app once the fix gets in?

[starksds]

@kara I can certainly test once the code is merged up. Any ideas when the next release is going to be?

[phamtuananh791994]

@kara