Label with Polymer binding not visible on paper-checkbox (1.0.6) about paper-checkbox HOT 6 CLOSED

Try using attached instead of ready for setting this.label. Does that work?

from paper-checkbox.

No it does not make a difference. The lifecycle of the posted example is:

polymer-test.created()
    paper-checkbox.created()
    paper-checkbox.ready()
    paper-checkbox.attached()
polymer-test.ready()
polymer-test.attached()

The label can only be set in ready or attached of polymer-element (or via a property default value just before ready) all of which occur after the paper-checkbox has been initialized.

The issue as I see it is there is no way to get a bound label on the paper-checkbox unless it already has a value when the paper-checkbox.attached() function is called.

Ideally the paper-checkbox would observe changes to <content></content> but I am not sure that this is possible. Alternatively not hiding the label when it is blank would solve the issue.

from paper-checkbox.

@doliver-pulsemining Observing changes to <content> is unfortunately not currently not available -- it requires a feature in the core Polymer library, and it's being worked on as we speak.

A really gross solution (that I should probably refactor out in a protected method) is to manually call this.$.checkbox.attached(). That should update your content correctly.

I will make a PR today to refactor that out in a _updateContents method or something, so that you don't have to call attached() directly (which is weird)

from paper-checkbox.

Ah, ugh, the problem is that the this.$.checkboxLabel.hidden was not actually ever getting called, so the fix I mentioned won't work. Working on a proper PR to fix this. Sorry!

from paper-checkbox.

Something like this should work:

      _updateContents: function () {
        var trimmedText = Polymer.dom(this).textContent.trim();
        this.$.checkboxLabel.hidden = (trimmedText === '');
        // Don't stomp over a user-set aria-label.
        if (trimmedText !== '' && !this.getAttribute('aria-label')) {
          this.setAttribute('aria-label', trimmedText);
        }
      },
      attached: function() {
        this._updateContents();
        this._isReady = true;
      },

Calling _updateContents from an observer on the label in the parent element will update the hidden status.

from paper-checkbox.

That's what I had originally, but it's not actually correct unless you always manually call _updateContents, which is annoying. See the PR description for more details: #50

from paper-checkbox.