paper-input-container throwing uncaught TypeError: Cannot read property 'addEventListener' of null

tupaje1 commented 7 years ago

Description

The paper-input demo is not working. The paper-input-container element, line:513, is throwing uncaught TypeError: Cannot read property 'addEventListener' of null. The 'this._inputElement' is null.

Expected outcome

The paper-input element should be clickable and allow user to enter a value.

Actual outcome

The paper-input element is not clickable and does not allow user to enter a value

Live Demo

Steps to reproduce

install polymer-2-starter-kit and bower install PolymerElements/paper-input#2.0-preview PolymerElements/iron-demo-helpers#2.0-preview PolymerElements/iron-validator-behavior#2.0-preview
run polymer serve
Open the page in a web browser to "localhost:8080/components/paper-input/demo/".
Click the paper-input element.

Browsers Affected

[x] Chrome
[ ] Firefox
[ ] Safari 9
[ ] Safari 8
[ ] Safari 7
[ ] Edge
[ ] IE 11
[ ] IE 10

screenshot

notwaldorf commented 7 years ago

I can't reproduce this. This is the demo, and it looks ok: http://polygit.org/polymer+v2.0.0-rc.4/webcomponentsjs+webcomponents+v1.0.0-rc.8/shadycss+webcomponents+1.0.0-rc.5/paper*+polymerelements+:2.0-preview/iron*+polymerelements+:2.0-preview/app*+polymerelements+:2.0-preview/neon*+polymerelements+:2.0-preview/components/paper-input/demo/index.html

Can you provide any more details, or maybe a jsbin with an example?

hitokiri8x commented 7 years ago

Hello, I have the same problem, with only Chrome... The sample of @notwaldorf works fine, however with the latests version something is broken ( it broke after a bower update, while at the beginning worked fine ).

I'm on "polymer": "Polymer/polymer#^2.0.0-rc.7", and "webcomponentsjs": "^v1.0.0-rc.9"

swypse commented 7 years ago

bower update with:

{
"dependencies": {
// ...
    "paper-input": "PolymerElements/paper-input#2.0-preview",
    "polymer": "Polymer/polymer#^2.0.0-rc.7",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.9",
},
"resolutions": {
// ...
    "polymer": "^2.0.0-rc.7",
    "webcomponentsjs": "1.0.0-rc.9"
}
}

helps me.

mahdiridho commented 7 years ago

Same issue here after upgrade my projects to polymer2.0

If using paper-input version before 2.0, It cannot show the text input After I update :

bower install --save PolymerElements/paper-input#2.0-preview

I got new errors, like tupaje1 explained :

Uncaught error of event listener on paper-input-container
Uncaught error when click focus the text input

For temporary now, I change my paper-input to iron-input#2.0

notwaldorf commented 7 years ago

I really can't reproduce this. I have this bower.json:

{
  "name": "paper_input_test",
  "authors": [
    "Monica Dinculescu <noms@google.com>"
  ],
  "dependencies": {
    "paper-input": "PolymerElements/paper-input#2.0-preview"
  }
}

And this index.html:

<html>
<head>
  <title>demo</title>
  <link rel="import" href="bower_components/paper-input/paper-input.html">
</head>
<body unresolved>
  <paper-input label="text input"></paper-input>
  <paper-input label="text input" value="pre-filled"></paper-input>
  <paper-input label="password input" type="password"></paper-input>
  <paper-input label="disabled input" disabled value="batman"></paper-input>
</body>
</html>

And all the inputs are working fine. It sounds like you're using a version of paper-input#2.0-preview that may have been broken at the time (which is likely, it's a live branch), and updating to the latest should fix it.

If that's not the case, there's a different dependency in there that's breaking it (are you using Polymer 1 or 2?), and I'd love to help you out, but I need to see the entire bower.json to understand what's going on.

mahdiridho commented 7 years ago

notwaldorf..

I was installing with polymer init and choose 2.0 starter kit. Then I added some elements (included paper-input) follows this link:

Install Polymer 2.0

*) Note that some of the 2.0-preview branches are subject to change due to bug fixes.

Below was my bower.json with paper-input :

{
  "name": "polymer-starter-kit",
  "authors": [
    "The Polymer Authors"
  ],
  "license": "https://polymer.github.io/LICENSE.txt",
  "dependencies": {
    "polymer": "Polymer/polymer#^2.0.0-rc.3",
    "app-layout": "PolymerElements/app-layout#2.0-preview",
    "app-route": "PolymerElements/app-route#2.0-preview",
    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
    "iron-icon": "PolymerElements/iron-icon#2.0-preview",
    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#2.0-preview",
    "iron-localstorage": "PolymerElements/iron-localstorage#2.0-preview",
    "iron-media-query": "PolymerElements/iron-media-query#2.0-preview",
    "iron-pages": "PolymerElements/iron-pages#2.0-preview",
    "iron-selector": "PolymerElements/iron-selector#2.0-preview",
    "paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.4",
    "paper-button": "PolymerElements/paper-button#2.0-preview",
    "paper-item": "PolymerElements/paper-item#2.0-preview",
    "paper-spinner": "PolymerElements/paper-spinner#2.0-preview",
    "iron-ajax": "PolymerElements/iron-ajax#2.0-preview",
    "paper-dialog": "PolymerElements/paper-dialog#2.0-preview",
    "iron-icons": "PolymerElements/iron-icons#2.0-preview",
    "paper-input": "PolymerElements/paper-input#2.0-preview"
  },
  "resolutions": {
    "polymer": "^2.0.0-rc.3"
  },
  "devDependencies": {
    "web-component-tester": "6.0.0-prerelease.5"
  },
  "private": true
}

and the piece of code :

      <paper-dialog id="updateData">
        <paper-input label="Serial Number"></paper-input>
        <div class="buttons">
          <paper-button dialog-dismiss>Cancel</paper-button>
          <paper-button autofocus on-tap="updateSync">Send</paper-button>
        </div>
      </paper-dialog>

The error in the document loading :

Uncaught TypeError: Cannot read property 'addEventListener' of null at HTMLElement.attached (paper-input-container.html:513)

The error when click to paper-input :

Uncaught TypeError: Cannot read property '_inputElement' of undefined at HTMLElement.get _focusableElement [as _focusableElement] (paper-input.html:275) at HTMLElement._focusBlurHandler (paper-input-behavior.html:456)

It's strange if it works in your side

MarcMouallem commented 7 years ago

Okay, so I think I can explain everything. 😌

16 days ago the 7639cf815e3d3cf2d953a0e412f1cc1e2d84f0df commit was made by @sorvell to the polymer repo adding back the beforeRegister lifecycle call back. In response @notwaldorf made the 7a5a24815717cdc05643ebc9d52d103000b45642 commit to the paper-input repo to use the beforeRegister call back instead of the workaround.

Now this is great, keeping the code clean, but it creates a slight hitch. Now paper-input requires a version of polymer after the former 7639cf815e3d3cf2d953a0e412f1cc1e2d84f0df commit.

bower install in some cases is not pulling the latest version of polymer. For me I think this was because the polymerfire bower.json specifically listed "polymer": "Polymer/polymer#2.0.0-rc.3" as a dependency and since my bower.json only required "polymer": "Polymer/polymer#^2.0.0-rc.3", bower install kept pulling polymer version 2.0.0-rc.3 as it satisfies both.

FIX: Update your bower.json to require "polymer": "Polymer/polymer#^2.0.0-rc.7". If bower install ask which version to use, be sure to select version 2.0.0-rc.7.

🎤▾

@notwaldorf I believe that that the paper-input bower.json should be updated to require "polymer": "Polymer/polymer#^2.0.0-rc.7".

mahdiridho commented 7 years ago

I have fixed my problem, just easy fix :

remove all files on project folder
remove also all hidden files on project folder
new fresh install polymer 2.0, I was using polymer init (starter kit 2.0)
install paper-input

it works well now, I don't know what is the real problem here

AnasSahel commented 7 years ago

I have the same problem since today after I run bower update

notwaldorf commented 7 years ago

@MarcMouallem I think you're totally right, updated in 18b9cc8.

Going to close this, since the problem is definitely having the wrong version of Polymer installed. The solution is to delete your bower_components directory, and run bower install again.

I'll also ask @e111077 to update the polyfire polymer dep to use a ^ and not a fixed version

tupaje1 commented 7 years ago

Thanks everyone for your reply. I will make sure to have the correct bower versions installed.

e111077 commented 7 years ago

Updated polymerfire sorry about that!

MarcMouallem commented 7 years ago

@notwaldorf and here I thought it wasn't possible to love Google more than I already do.

PolymerElements / paper-input