juicy / juicy-select Goto Github PK

Seems that array property observer doesn't work properly:
options: { type: Array, value: [], observer: "optionsChanged" },

After options change dynamically the observer method doesn't fired. Based on polymer documentation https://www.polymer-project.org/1.0/docs/devguide/observers#array-observation
I've change it into:
properties: { options: { type: Array, value: [], notify: true }, },
observers: [ 'optionsChanged(options.*)' ]

And that works for me

Related issue: https://github.com/Starcounter/Blending/issues/169

I'm using juicy-select in BlendingEditor like this:

                            <juicy-select value="{{model.ChoosenLayoutKey$}}" options="{{model.Layouts}}" text-property="Name" value-property="Key">
                                <select class="blendingeditor-select">
                                </select>
                            </juicy-select>

As you can see the initial option that is showing up is the first layout (in this case LoginLayout).
Intuitive behavior would be, that model.ChoosenLayoutKey should also have an initial value, same as the client sees, but right now (if not set by a server) this value is empty.

I think that what client sees should be matching what view-model has to avoid misleading, so my suggestion is to set property in value attribute with initial value when juicy-select is created.

If options is null or empty, the current feature in juicy-select is to ignor captionText whether it is set or not. The desired functionality is that it should be added regardless of options.

I had to change the code bellow

if (!this.options || !this.options.length) {
    this.$select.innerHTML = "";
    return;
}

if (!this.multiple && this.captionText) {
    this.$select.innerHTML = "<option value=''>" + this.captionText + "</option>";
}

to this

if (!this.multiple && this.captionText) {
    this.$select.innerHTML = "<option value=''>" + this.captionText + "</option>";
} else if (!this.options || !this.options.length) {
    this.$select.innerHTML = "";
    return;
}

in order for juicy-select to behave according to the description.

There is not documented feature of juicy-select. The <select> element to use can be defined inside.

<juicy-select>
    <select class="form-control"></select>
</juicy-select>

Hey!

I've been trying to pull this in to get it working on some older elements. The instructions mention

bower install juicy-select --save

but when I do that, I get:

bower                        ENOTFOUND Package juicy-select not found

I've been attempting then to pull in the latest version via specifying the 1.0.0 release's commit:

    "juicy-select": "https://github.com/Juicy/juicy-select/commit/b8a0725560de0e4ca11b0e31801a1006751ede44"

but this results in pulling in a package with a single index file that's html, but not specified as that type of file (missing the .html). Even after changing that, it's not working.

I understand this might not be up there at all in priority, but figured I'd open this issue to let you know. If there's an easy way to reuse the existing code that I'm missing, I'd be really grateful if you filled me in on how to do that.

Lastly, I'd like to add a retroactive thanks for putting this out there!

As required by https://github.com/Starcounter/RebelsLounge/issues/140 and https://github.com/StarcounterApps/KitchenSink/pull/155

@ubbeK please read my comment for the commit: cc4705b.

Every time I'm using juicy-select I wonder what is a purpose of using it instead of plain HTML select. In general - normal select doesn't work properly. Can we add to readme some details why somebody should use it instead of standard one? For me - it is actually hard to find out. WDYT @miyconst?