Meteor-Community-Packages / Meteor-Community-Packages/meteor-autoform-select2

Select2 autoform creates an infinite loop and it's not reactive

Open
#70 0 comments 0 reactions 0 assignees View on GitHub
hacktoberfest
Dominant language
JavaScript
Stars
25
Forks
27
PR merge metrics
No merged PRs in 30d

Description

I have one form that includes two more forms and I need that when the second form is updated to show that information in the first Form this way:

1) main form:

```
{{#autoForm collection=company doc=company id='mainForm' type=formType}}
{{> uploadLogoForm }}
{{> afQuickField
name='company.logoUrl'
class='fu-select-tag--background-image'
label='Select a logo'
type='select'
options=logoOptions
template='plain'}}
{{/autoform}}
```
2) second form:

```

{{#autoForm collection=collection id="newLogoForm" type="normal" class="fu-form-upload"}}
{{> afQuickField
name="_id"
accept=".png,.gif,.svg"
label="Upload a logo"
type="slingshot"
directive="logos"}}
{{/autoForm}}

```
So if I Upload a logo in the uploadLogoForm this logo should show/selected in the main form with this helper:

```
Template.mainForm.helpers({
logoOptions() {
const company = getCompany();
const logoUrls = [];
let currentLogoUrl;

if (company) {
currentLogoUrl = company.company.logoUrl;
}

const uploadedLogo = AutoForm.getFieldValue('_id', 'newLogoForm');
if (uploadedLogo) {
currentLogoUrl = getPath(uploadedLogo);
}

if (currentLogoUrl) {
logoUrls.push(currentLogoUrl);
}

if (FlowRouter.subsReady('logos')) {
Logo.find({}, {sort: {_id: 1}}).forEach(logo => {
const logoUrl = getPath(logo._id);

if (!_.include(logoUrls, logoUrl)) {
logoUrls.push(logoUrl);
}
});
}

return logoUrls.map(logoUrl => ({
label: logoUrl,
value: logoUrl,
selected: logoUrl === currentLogoUrl ? true : null
}));
}});
```
This works nicely with if the type of the quickfield is 'select' But when I use 'select2' a lot of weird things happens like infinite loop in the helper and the select element is empty. I have to select the element or file manually in order to to fix it.

Contributor guide

Open the contributing guide

Research direction

Start with the Template.mainForm.helpers logic and the select2 quickfield usage shown in the report, then trace how changing the uploadLogoForm affects the main form's options. Reproduce the empty select and repeated helper execution with the supplied two-form example. Done means uploaded logos update the select2 field reactively without an infinite loop or requiring manual selection.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.