dom.js:353 Uncaught TypeError: Cannot read property 'offsetWidth' of null

I have two pages
enyo.kind({ name:"myapp.MainView", classes: "moon enyo-unselectable enyo-fit moon-input-sample login-form", components:[ {kind: "moon.Divider", content: "LOGIN"}, {kind: "moon.InputDecorator", components: [ { name: "InputLogin", onkeydown: "Loginkeydown", kind: "moon.Input", placeholder: "User Name or Email"} ]}, {kind: "moon.InputDecorator", components: [ { name: "InputPassword", onkeydown: "Loginkeydown1", kind: "moon.Input", type:"password", placeholder: "Enter password"} ]}, {name: "LogIn_button", onkeydown: "Loginkeydown2", kind: "moon.Button", content: "LOGIN", uppercase : false, ontap: "buttonTapped"}, {kind: "moon.Button", name: "Forget_Button", onkeydown: "Loginkeydown3", content: "Forget password", ontap: "showPopup", popup: "ForgetPassword"}, // {kind: "moon.Divider", content: "SIGN UP "}, {name: "SignUP_button", onkeydown: "Loginkeydown4", kind: "moon.Button", content: "SIGN UP", uppercase : false, ontap: "buttonSignUp"}, // forget password {name: "ForgetPassword", kind: "moon.Popup", floating:true, components: [ {kind: "moon.Panels", name:"panels", defaultKind: "enyo.FittableRows", arrangerKind:"CardArranger", animate:false, classes:"moon-12v", components: [ {components: [ {kind:"moon.Divider", content:"Please enter email address to generate new password"}, {kind:"FittableColumns", components: [ {kind: "moon.InputDecorator", fit:true, components: [ {kind:"moon.Input", placeholder:"[email protected]", style:"display:inline-block;"} ]}, {kind:"moon.Button", content:"Submitt", ontap:"panelNext"} ]} ]}, {components: [ {kind: "moon.Divider", content:"Step 2"}, {kind:"moon.BodyText", fit: true, content: "All done. Please check up Your Email and follow instructions"}, {kind:"moon.Button", content:"Previous", ontap:"panelPrev"} ]} ]} ]}, {name: "test",kind: "moon.Popup", floating: true, content:""} ], create: function(inSender, inEvent){ this.inherited(arguments); } })
and enyo.kind({ name:"moon.sample.InputSample", kind: "FittableRows", fit: true, classes: "moon enyo-unselectable enyo-fit moon-input-sample login-form", defaultSpotlightLeft: "InputEmail", spotlight: true, components:[ {kind: "moon.Divider", content: "SIGN UP FORM"}, {kind: "moon.InputDecorator", classes: "spotlight", components: [ { name: "InputEmail", autofocus: true, onkeydown: "handleKeyDown", defaultFocus: true, dismissOnEnter: true, dismissOnEnter: true, kind: "moon.Input", onKeyPress:"KeyPress", type: "text", placeholder: "User Email"} ]}, {kind: "moon.InputDecorator", components: [ { name: "Firstname", onkeydown: "handleKeyDown1", defaultFocus: true, kind: "moon.Input", type:"text", placeholder: "First Name"} ]}, {kind: "moon.InputDecorator", components: [ { name: "Secondname", onkeydown: "handleKeyDown2", defaultFocus: true, kind: "moon.Input", type:"text", placeholder: "Last Name"} ]}, {kind: "moon.InputDecorator", components: [ { name: "PhoneNum", onkeydown: "handleKeyDown3", defaultFocus: true, kind: "moon.Input", type:"text", placeholder: "Phone Number"} ]}, {kind: "moon.InputDecorator", components: [ { name: "InputPassword", onkeydown: "handleKeyDown4", defaultFocus: true, kind: "moon.Input", type:"password", placeholder: "Enter password"} ]}, {kind: "moon.InputDecorator", components: [ { name: "ConformPassword", onkeydown: "handleKeyDown5", defaultFocus: true, kind: "moon.Input", type:"password", placeholder: "Conform password"} ]}, {name: "SignUP_button", onkeydown: "handleKeyDown6", defaultFocus: true, kind: "moon.Button", content: "SIGN UP", uppercase : false, ontap: "buttonSignUp"}, {name: "Home_button", onkeydown: "handleKeyDown7", defaultFocus: true, kind: "moon.Button", content: "Home Page", ontap: "Homepage"}, {name: "test", kind: "moon.Popup", components: [ {kind: "moon.Scroller", components: [ {kind: "moon.Item", name: "error_email", content: ""}, {kind: "moon.Item", name: "error_uname", content: ""}, // {kind: "moon.Item", name: "sucess", content: ""}, {kind: "moon.Item", name: "error_lname", content: ""}, {kind: "moon.Item", name: "error_pass", content: ""} ]} ]}, ], rendered: function(inSender, inEvent){ this.inherited(arguments); this.$.InputEmail.focus(); } });

while loading first login page the spotlight works fine. But when I navigate back and forth with the pages the spotlight does not work. Throws dom.js:353 Uncaught TypeError: Cannot read property 'offsetWidth' of null error.

Comments

  • I think some things are missing from your code here. Can you set up a jsfiddle that shows this off?
  • Couldn't create fiddle but you can try by making two different pages with certain elements and navigate back and forth between those two pages and see if the elements are spottable. The console throws the error offsetWidth of null.
  • Perhaps you can upload a .zip file of your project to someplace?
Sign In or Register to comment.