this.root_ is not available in getDefaultFoundation()

[nckh]

Hello!

Since this commit this.root_ is not accessible anymore from the getDefaultFoundation() hook of child classes of MDCComponent. This is an issue when authoring custom vanilla components since the majority of adapter APIs need a reference to the root element.

Steps to reproduce

<div class="test-comp">hey</div>

import {MDCComponent} from '@material/base';
import {MDCFoundation} from '@material/base';

class TestCompFoundation extends MDCFoundation {
  static get defaultAdapter() {
    return {
      getRootElement: () => {}
    };
  }
  constructor(adapter) {
    super(Object.assign(TestCompFoundation.defaultAdapter, adapter));
    console.log(adapter.getRootElement());
  }
}

class TestComp extends MDCComponent {
  static attachTo(root) {
    return new TestComp(root);
  }
  getDefaultFoundation() {
    return new TestCompFoundation({
      getRootElement: () => this.root_
    });
  }
}

new TestComp(document.querySelector('.test-comp'));

What MDC-Web Version are you using?

"@material/base": "0.1.1"
(0.1.0 works.)

What is the expected behavior?

The console should output a reference to the component DOMElement.

What is the actual behavior?

The console outputs undefined.

[traviskaufman]

Ah, you're totally right; super subtle bug. We will fix it, add a regression test, and add a comment as to why the code needs to be structured that way.

[traviskaufman]

PR for this is coming today. However FYI as a tip when writing your own foundations, you usually want to wait to call all adapter methods until init(), this way framework authors have fine-grained control over when to perform initialization logic of a foundation, rather than having it done automatically within the constructor.

[nckh]

Good point Travis. Thank you very much!