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

Writing a decorator for <iron-form>: a timing question #259

Open
shipagency opened this issue Mar 16, 2018 · 0 comments
Open

Writing a decorator for <iron-form>: a timing question #259

shipagency opened this issue Mar 16, 2018 · 0 comments

Comments

@shipagency
Copy link

I am writing a Polymer 2 element that decorated <iron-form>
My element needs to work with <iron-form> and the form itself that is decorated by <iron-form> -- which is stored as _form in the <iron-form> element.

At the moment I have this:

ready () {
  super.ready()
  var self = this

  this.ironForm = this.allChildrenNamed('IRON-FORM', true)
  if (!this.ironForm) throw new Error('hot-form must contain an iron-form element which will be decorated')

  setTimeout(function () {
    self.form = self.ironForm._form
  }, 0)
}

Is this a reliable way to go about this?
WIth that setTimeout, <iron-form> has enough time to assign _form. Will this be the case longer-term?
@TimvdLippe commeted here: Polymer/polymer#5149

There might be a case where iron-form is not attached yet, as the assignment to _form is in that callback (

iron-form/iron-form.html

Lines 172 to 204 in dc9c963

attached: function() {
// We might have been detached then re-attached.
// Avoid searching again for the <form> if we already found it.
if (this._form) {
return;
}
// Search for the `<form>`, if we don't find it, observe for
// mutations.
this._form = Polymer.dom(this).querySelector('form');
if (this._form) {
this._init();
// Since some elements might not be upgraded yet at this time,
// we won't be able to look into their shadowRoots for submittables.
// We wait a tick and check again for any missing submittable default
// values.
this.async(this._saveInitialValues.bind(this));
} else {
this._nodeObserver = Polymer.dom(this).observeNodes(
function(mutations) {
for (var i = 0; i < mutations.addedNodes.length; i++) {
if (mutations.addedNodes[i].tagName === 'FORM') {
this._form = mutations.addedNodes[i];
// At this point in time, all custom elements are expected
// to be upgraded, hence we'll be able to traverse their
// shadowRoots.
this._init();
Polymer.dom(this).unobserveNodes(this._nodeObserver);
this._nodeObserver = null;
}
}
}.bind(this));
}
},
) I do not think setTimeout is 100% reliable, but it will probably work in most cases.

Since this is mostly an iron-form specific question, I would advise to open an issue there and potentially request a new event to be notified when _form is set, in the attached callback.

Would you accept a PR with the addition of the newly emitted event?
Or, what would you advise?

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

0 participants