formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.83k stars 1.04k forks source link

Columns component is impossible to extend due to inability to overload the `render` method #5622

Open aln447 opened 1 month ago

aln447 commented 1 month ago

Describe the bug I'm creating a new component based on the columns component that should be using different templating and different styling. However, due to the construction of the render function this is not possible due to the component's method not taking in the children argument present in nearly all other components.

  render() {
    return super.render(this.renderTemplate('columns', {
      columnKey: this.columnKey,
      columnComponents: this.columns.map(column => this.renderComponents(column))
    }));
  }

The only workaround now is to use the render function without the use of super.render but this creates other problems such as a lack of builder icons displaying by the component, possibly due to the renderComponent hook not firing for the component.

Version/Branch 4.18

Expected behavior The render function should allow proper overloading, could be done in a similar fashion to other instances ie. NestedComponent:

  render(children) {
    return super.render(children || this.renderTemplate('columns', {
      columnKey: this.columnKey,
      columnComponents: this.columns.map(column => this.renderComponents(column))
    }));
  }