Custom form with select-multiple rendering broken

[mozfet]

Fields of type select-multiple works fine when QuickForm Modals are used, but not when AutoForm Modals are used.

[mozfet]

In trying to replicate this on the smallest scale, I noticed this is not a problem when the multiple select is by itself in the schema... perhaps it is caused by a problem with another field in the schema.

[mozfet]

Now cannot replicate fixing it with the multiple select on its own... perhaps an initiation sequence problem...

[mozfet]

This is how it looks with a QuickForm in the browser

[mozfet]

This is how it looks with an AutoForm in the browser

[mozfet]

The select-wrapper is missing with the AutoForm version...

[mozfet]

It happens for both select and select-multiple input types. Why does it not work in a modal with autoForm?

Facts:

Modal with autoForm using quickField, select and select-multiple inputs in the theme does not get loaded.

Both select and select-multiple work when used in a quickForm in a modal and works when used in an autoForm outside a modal. Text fields and time-picker works as per normal. The select-wrapper is missing in the rendered HTML.

Logging confirm that in the modal using autoForm the text, select and select-multiple input-types from the theme is not loaded, but the originals from the built in AutoForm theme is being loaded! However time picker does not exist in the original theme, and it does load from the materialize theme and works fine.

It is confirmed that the modals package does have the functionality imported correctly because it works with quickForm.

Because text fields work, the issue is related to select and select-multiple perhaps shared or boilerplate code.

Why are the select input types not loaded, while text and timepicker is? Materialise text input does not need a JS init, while Select does, but so does time picker. Styling for input is done using CSS, which is already loaded, that is why the text field is still working, but Timepicker also has JS (though not materialize using jquery but jquery works outside modals).

[mozfet]

Confirmed by test hack, autoForm with quickField works outside the modal inside the modal package!

The modal is rendered dynamically via blaze api, but the data and template is there because quickForm works fine.

Confirmed by test hack. A custom modal with autoForm works fine when not rendered via blaze api.

[mozfet]

This works:

<template name="customModal">
  <div id="customModal" class="modal">
    <div class="modal-content">
      <h5>Custom Modal</h5>
      {{#autoForm formData}}
        {{> afQuickField name="text1"}}
        {{> afQuickField name="time"}}
        {{> afQuickField name="select1"}}
        {{> afQuickField name="select2"}}
      {{/autoForm}}
    </div>
    <div class="modal-footer">
      <a class="btn-flat js-autoform-materialize-modal-cancel">{{cancelButtonLabel}}</a>
      <a class="btn-flat teal-text js-autoform-materialize-modal-submit">{{submitButtonLabel}}</a>
    </div>
  </div>
</template>

{{>customModal formData=data2}}

This does not work:

<template name="customForm">
  {{> afQuickField name="text1"}}
  {{> afQuickField name="time"}}
  {{> afQuickField name="select1"}}
  {{> afQuickField name="select2"}}
</template>

<template name="customModal">
  <div id="customModal" class="modal">
    <div class="modal-content">
      <h5>Custom Modal</h5>
      {{#autoForm formData}}
        {{> Template.dynamic formData.customForm }}
      {{/autoForm}}
    </div>
    <div class="modal-footer">
      <a class="btn-flat js-autoform-materialize-modal-cancel">{{cancelButtonLabel}}</a>
      <a class="btn-flat teal-text js-autoform-materialize-modal-submit">{{submitButtonLabel}}</a>
    </div>
  </div>
</template>

{{>customModal formData=data2}}

But this works as well:

<template name="customModal">
  <div id="customModal" class="modal">
    <div class="modal-content">
      <h5>Custom Modal</h5>
      {{#autoForm formData}}
        {{> Template.contentBlock}}
      {{/autoForm}}
    </div>
    <div class="modal-footer">
      <a class="btn-flat js-autoform-materialize-modal-cancel">{{cancelButtonLabel}}</a>
      <a class="btn-flat teal-text js-autoform-materialize-modal-submit">{{submitButtonLabel}}</a>
    </div>
  </div>
</template>

{{#customModal formData=data2}}
    {{> afQuickField name="text1"}}
    {{> afQuickField name="time"}}
    {{> afQuickField name="select1"}}
    {{> afQuickField name="select2"}}
  {{/customModal}}

[mozfet]

Solved: The form context was lost due to the way Template.dynamic was called; this works:

<template name="customForm">
  {{> afQuickField name="text1"}}
  {{> afQuickField name="time"}}
  {{> afQuickField name="select1"}}
  {{> afQuickField name="select2"}}
</template>

<template name="customModal">
  <div id="customModal" class="modal">
    <div class="modal-content">
      <h5>Custom Modal</h5>
      {{#autoForm formData}}
        {{> Template.dynamic template=formData.customForm.template data=data}}
      {{/autoForm}}
    </div>
    <div class="modal-footer">
      <a class="btn-flat js-autoform-materialize-modal-cancel">{{cancelButtonLabel}}</a>
      <a class="btn-flat teal-text js-autoform-materialize-modal-submit">{{submitButtonLabel}}</a>
    </div>
  </div>
</template>

{{>customModal formData=data2}}