Tradeshift / tradeshift-ui

The Tradeshift UI Library & Framework
https://ui.tradeshift.com
Other
33 stars 45 forks source link

Cannot clear selected values of selector component #622

Closed DocGroth closed 5 years ago

DocGroth commented 6 years ago

Choose the section that applies to you and use the template to help us figure out how we can help you.


Bug report

Use "select multiple" http://ui.tradeshift.com/v10/#components/forms/

Sample Code: in HTML

in jQuery script

var selection = get_selection_from_object; . . . . . . if(selection == “value1”) { $(“#value1”).prop(“checked”, true); }

Tradeshift UI version affected

v10.0.25

Steps to reproduce

Problem description: We can't make the values of "TS selector multiple" checked/unchecked from jQuery.

The above is a sample code. There are 2 values "value1" and "value2". We're going to change the value1 from unchecked to checked. But this does NOT make option (id=“value1”) checked.

(internal reference of bug here: https://tradeshift.atlassian.net/browse/ZT-1131)

sampi commented 6 years ago

The first issue I see with your code, is that the <option /> element uses selected, not checked.

Here are some examples on how to use JQuery to manipulate multiple selects:

To select all options:

$('#my-multi-select option').prop('selected', true);

To select a single option:

$('#my-multi-select option[value="optionValue"]').prop('selected', true);

Besides using selected instead of checked, we did find a bug related to clearing the complete selection. There is a bugfix coming out very soon. In the meantime, this is how you can unselect options:

To unselect all options:

$('#my-multi-select option').prop('selected', false);

To unselect a single option:

$('#my-multi-select option[value="optionValue"]').prop('selected', false);
ghost commented 6 years ago

@sampi Hi sampi, will this work on version 11 beta? I have been developed a new app using v11 but it only works for selecting but unselect doesn't work with both attr and prop functions. Is there any change in this component for the version 11 ?