search

vazco / meteor-universe-autoform-select

Meteor universe autoform select
MIT License
16 stars 10 forks source link

Problem with universe-autoform-select in an array field #29

Closed acomito closed 4 years ago

acomito commented 8 years ago

the universe-select field resets whenever a new item is added.

I'm using the boilerplate array template with autoform.

Looks like others are having the same problem:

http://stackoverflow.com/questions/35512687/universe-autoform-select-on-meteor-reset-on-blur

MichalW commented 8 years ago

Could you send me an example code of your usage?

acomito commented 8 years ago 
  <title>universe-test</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">

{{> AddProduct}}

</template>

<template name="AddProduct">

  {{#autoForm id="AddProduct" collection="Products"  type="insert"}}
  <fieldset>
  {{> afQuickField name="title" label=false}}
  {{> afQuickField name="suppliers"}}
  </fieldset>
  <button type="submit" class="btn btn-primary">Insert</button>

  {{/autoForm}}

</template>

Schemas = {};

Schemas.Supplier = new SimpleSchema({
    inputName: {
        type: String,
    },
    clusterTags: {
        type: [String],
        autoform: {
            type: "universe-select",
            options: function(){
                var clusters = [

                    {label: 'Textiles', value: 'Textiles'},
                    {label: 'Tobacco', value: 'Tobacco'},
                    {label: 'Trailers & Appliances', value: 'Trailers & Appliances'},
                ];

                return clusters

            },
            afFieldInput: {
                multiple: true,

            }
        }
    }
});

Schemas.Product = new SimpleSchema({
    title: {
        type: String,
        max: 300,
        optional: false,
    },
    suppliers: {
        type: [Schemas.Supplier],
    }
});

Products = new Mongo.Collection("products");

Products.attachSchema(Schemas.Product);

Products.allow({
    insert: function () { return true; },
    update: function () { return true; },
    remove: function () { return true; }
});


# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base             # Packages every Meteor app needs to have
mobile-experience       # Packages for a great mobile UX
mongo                   # The database Meteor supports right now
blaze-html-templates    # Compile .html files into Meteor Blaze views
session                 # Client-side reactive dictionary for your app
jquery                  # Helpful client-side library
tracker                 # Meteor's client-side reactive programming library

standard-minifiers      # JS/CSS minifiers run for production mode
es5-shim                # ECMAScript 5 compatibility for older browsers.
ecmascript              # Enable ECMAScript2015+ syntax in app code

insecure                # Allow all DB writes from clients (for prototyping)

aldeed:collection2
meteortoys:allthings
aldeed:autoform
vazco:universe-autoform-select

matb33:bootstrap-glyphicons
fortawesome:fontawesome
natestrauser:animate-css
less

Thanks for your help!

MichalW commented 8 years ago

Check it with the latest version (v0.3.5)

acomito commented 8 years ago

hmm... I think it's still not working. Were you able to reproduce it with the code I sent?

I haven't tried to test it without autoform. I wonder if it's only with the autoform version of this package.

chneau commented 8 years ago

Hello @acomito, not sure but the problem can be coming from Autoform package. I know when you remove an item from an array, indexes (used internally) are not well recalculated. It results often on items visually there but not working because link between what you see and the "model" is broken.

acomito commented 8 years ago

@CharlesNo

hmmm.. just tried vanilla autoform and it seems to work:


Schemas = {};

Schemas.Supplier = new SimpleSchema({
    clusterTags: {
        type: [String],
        autoform: {
            type: "select-checkbox",
            options: function () {
                return [
                    {label: 'Textiles', value: 'Textiles'},
                    {label: 'Tobacco', value: 'Tobacco'},
                    {label: 'Trailers & Appliances', value: 'Trailers & Appliances'},
                ];
            }

        }
    }
});

Schemas.Product = new SimpleSchema({
    suppliers: {
        type: [Schemas.Supplier],
    }
});

Products = new Mongo.Collection("products");

Products.attachSchema(Schemas.Product);

Products.allow({
    insert: function () { return true; },
    update: function () { return true; },
    remove: function () { return true; }
});


<head>
  <title>universe-test</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">

{{> AddProduct}}

    {{#each yourDocuments}}
        <div class="col-md-4">
    <div class="card">
    <div class="card-block">
        {{suppliers}}
        </div>
        </div>
        </div>
    {{/each}}

</template>

<template name="AddProduct">

    <div class="container">
    <div class="card">
        <div class="card-block">
            {{#autoForm id="AddProduct" collection="Products"  type="insert" }}
                <fieldset>
                    {{> afQuickField name="suppliers"}}
                </fieldset>
                <button type="submit" class="btn btn-primary">Insert</button>

            {{/autoForm}}
        </div>
    </div>
    </div>

</template>
acomito commented 8 years ago

It seems to work with comerc:autoform-selectize

Schemas = {};

Schemas.Tags = new SimpleSchema({
    innerTags: {
            type: [String],
            autoform: {
                type: "selectize",
                afFieldInput: {
                    multiple: true,
                    options: function () {
                        return [
                            {label: "2013", value: 2013},
                            {label: "2014", value: 2014},
                            {label: "2015", value: 2015}
                        ];
                    }
            }
        }
    }
});

Schemas.Product = new SimpleSchema({
    tags: {
        type: [Schemas.Tags],
    }
});

Products = new Mongo.Collection("products");

Products.attachSchema(Schemas.Product);

Products.allow({
    insert: function () { return true; },
    update: function () { return true; },
    remove: function () { return true; }
});
<head>
<title>universe-test</title>
</head>

<body>

{{> AddProduct}}

</body>

<template name="AddProduct">

    <div class="container">

        {{#autoForm id="AddProduct" collection="Products"  type="insert"}}
            <fieldset>
                {{> afQuickField name="tags"}}
            </fieldset>
            <button type="submit" class="btn btn-primary">Insert</button>
        {{/autoForm}}

    </div>

</template>
MichalW commented 8 years ago

I tried to reproduce the problem. But it looks like it works

https://github.com/vazco/meteor-universe-autoform-select-demo/commit/6641349426c9e6a9cb8b32e2eb401f4d58e640e3#diff-7c23afb97b0457a6a65f5de480d0b735L7

nloui commented 8 years ago

+1 - having the same issue

list: { type: [Object] }, "list.$.item": { type: String, optional: false, autoform: { label: false, type: "universe-select", afFieldInput: { multiple: false, create: true, createMethod: function(label,value) { console.log(value); }, options: function() { return Items.find({category: Session.get('category')}).map(function (c) { return {label: c.title, value: c._id}; }); } } }

thearabbit commented 8 years ago

I have the sample problem with array field, it is reset value when I click add more. +1

artjomg commented 8 years ago

+1 same here. Array of single universe selects guides to reset after a next one is added via autofrm "+" button.

bluefangs commented 8 years ago

I seem to have the exact same problem. Has there been a resolution / workaround for this?

chneau commented 8 years ago

I use a custom Autoform template for my arrays containing a universe-select. Plus I use "optionsMethod" it works great. If it's an update Autoform, be sure to reset the form with AutoForm._forceResetFormValues. (Another problem I had before was document being updated too often, Tracker.nonreactive solved it for updates Autoforms)

Not sure if it can be of any help but here it is. EDIT: Try to use an optionsMethod first, I remember it solved my problem)

thearabbit commented 8 years ago

Thanks for your sharing, I will try soon.

kestarumper commented 4 years ago

We've decided to archive some of our repositories as we are no longer using nor willing to maintain them. Part of this process involves closing related issues and PRs. If you still need help, do contact us on opensource@vazco.eu.