Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

paper-checkbox fails to render properly in Ember #151

Open
8 tasks done
jaichandra opened this issue Sep 12, 2016 · 6 comments
Open
8 tasks done

paper-checkbox fails to render properly in Ember #151

jaichandra opened this issue Sep 12, 2016 · 6 comments

Comments

@jaichandra
Copy link

jaichandra commented Sep 12, 2016

Description

paper-checkbox and paper-radio-button fails to render properly when transitioning between routes (navigate between 'index' and 'about' routes). Initially the components render fine, but after transitioning to another route and coming back, the components are broken. Here's the working example where you can see the issue.
http://codepen.io/jaichandra/pen/jrOpab?editors=1010

I am raising this issue here because paper-button and paper-input are working fine. Also, if I switch to Shadow DOM, the components work.

If you look at the rendered paper-checkbox dom, it get re-rendered inside one of its own nodes (after route transition), causing it to render two checkboxes and break. Same is the case with paper-radio-button.

Expected outcome

paper-checkbox should render correctly

Actual outcome

paper-checkbox ui breaks after transitioning between 'index' and 'about' routes

Live Demo

http://codepen.io/jaichandra/pen/jrOpab?editors=1010

Steps to reproduce

In the above example,

  1. Click on 'about' link
  2. Click again on 'index' route

Browsers Affected

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10
@github-polymer-user
Copy link

github-polymer-user commented Sep 13, 2016

All works perfectly:

Because of shadow DOM nature, you have to put everything you need into a Polymer component and initialize it:

http://codepen.io/github-polymer-user/pen/jrWyrp

@github-polymer-user
Copy link

Close issue, @robdodson

@jaichandra
Copy link
Author

jaichandra commented Sep 13, 2016

But, paper-checkbox and paper-radio-button is already a Polymer component. Why can't I use it as is? paper-button and paper-input works fine if used directly. This still looks like an issue, in that case.

@jaichandra
Copy link
Author

But, Im glad this workaround works.

@jaichandra
Copy link
Author

Updated above example with two more wrapper components for paper-checkbox - x-foo and x-foo-content. x-foo wraps paper-checkbox and doesn't use <content> tag. That one works fine. x-foo-content wraps paper-checkbox the same way but adds a <content> tag, and we see that it breaks again once we navigate to about and back to index route.
http://codepen.io/jaichandra/pen/jrOpab?editors=1010

May be this is related to below issue:
Polymer/polymer#3706

@jaichandra
Copy link
Author

Is this issue and #3706 just waiting for Polymer 2.0? Is going to fix this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants