Entwine TreeDropdownField styling broken

[tractorcow]

Styling of all tree dropdown fields in the pages setting form is messed up

Pull requests

• Fix TreeDropdownField layout #378
• Fix UploadField to be injectable silverstripe-asset-admin#706

The issue is caused by this code:

// shifts the react component to override the entire field holder element
if (this.parent('.form__field-holder').length) {
    this.unwrap('.form__field-holder');
    this.siblings().remove();
    this.unwrap('.form-group').attr('class', 'TreeDropdownField form-group');
}

The problem is that this incorrectly mangles the DOM classes.

Expected dom:

Actual dom:

Instead of flipping the dom inside out, can't you just attach the component to the outer html?

-const container = this[0];
+const container = this.parent('.form__field-holder')[0];
      if (container) {
        ReactDOM.unmountComponentAtNode(container);
      }

[flamerohr]

Instead of flipping the dom inside out, can't you just attach the component to the outer html?

You lose the schema data on the div inside the field holder then...

I guess I don't prefer a destructive approach if possible