Meteor-Community-Packages / Meteor-Community-Packages/meteor-autoform-select2
Select2 autoform creates an infinite loop and it's not reactive
- 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
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