[Bug] Choices.js not working correct

Pixelairport commented 4 years ago

Version

1.0.0

Reproduction link

https://joshuajohnson.co.uk/Choices/

Operating System

Mojave

Device

Mac

Browser & Version

Chrome

Steps to reproduce

What is expected?

Normally you should be able to input chars into the selectfield.

What is actually happening?

You cant insert characters. On click on the select field only a panel is opend where i can choose. But in original choices you can type in words and the list is searching for it.

Solution

Open the forum on the page, that i can discuss problems there.

Additional comments

I dont know what permium support means. The backend says premium support? Thats why i wrote already an email.

rarestoma commented 4 years ago

Hello @Pixelairport,

Thank you for working with our products.

Can you please give me a video or show me an example that is working too see clearly what happens?

Please check this link to see more informations about our support: https://www.creative-tim.com/support-terms.

Thank you, Rares

Pixelairport commented 4 years ago

Hi @rarestoma,

you can see it on the links:

On https://joshuajohnson.co.uk/Choices/ you can type in characters in "Multiple select input" fields.

On https://demos.creative-tim.com/argon-design-system-pro/docs/1.0/plugins/select.html only a dropdown is opened when I click into the field. But i want also to type in characters, if a list maybe has 10 or 100 entries.

Pixelairport commented 4 years ago

This seems to be the first thing. After put this into my css the typeinput is working. But there is now missing that i can use arrow keys in the dropdown and also the delete key does not work to delete the last selected option.

/* Fix choices.js field to allow typeinput / .choices__input--cloned { display: inline-block !important; border: none; }

rarestoma commented 4 years ago

Hi @Pixelairport,

I verified now and we will update it in our next version to work properly.

For the moment pleas remove from the js from '$("#choices-multiple-default")[0]' the search, delimeter and editItems options. Then add in the header, so the arrows keys in dropdown and delete key will work properly. Then it needs restyling so add in the css:

.choices[data-type*=select-multiple] .choices__button, 
.choices[data-type*=text] .choices__button{
border-left: none;
}

and

.choices__list--multiple .choices__item{
    background-color: #fff;
    border: 1px solid #fff;
}

This is just a fast solution, we will have to make it work in our next update.

I hope it helps.

All the best, Rares

Pixelairport commented 4 years ago

Does not really help... i decided to switch to element ui and use the select field from there. That works now. Took me too much time to use argon select field. But thx. Maybe in the next version it works.

elephantux commented 4 years ago

The problem is still unresolved! You can also not see the highlight of the selected item and when you point the cursor (or move the keys).

I am very upset with such small and unpleasant errors in a product that costs almost $100.

elephantux commented 4 years ago

To highlight selections and show search field just update this lines in coices.scss:

.choices[data-type*="select-one"],
.choices[data-type*="select-multiple"] {
    // comment lines below
    //.choices__input--cloned {
    //    display: none;
    //}

    // and add this lines
    .choices__item {
        &.is-highlighted {
            background: $primary;
            color: $white;
        }
    }
}

rarestoma commented 4 years ago

Hi @elephantux,

Thank you for helping us, I hope we will do an update as soon as possible to fix this issue.

All the best, Rares

creativetimofficial / ct-argon-design-system-pro