[BUG] Selected value is visible twice in the choices of the "Select" component

[Baloche]

Environment

• Formio.js version: 4.11.0

• Browser: Chrome

Steps to Reproduce

Please see this fiddle This is the example from the guide (https://formio.github.io/formio.js/app/examples/select.html) with an added property : minSearch: 2

• Click on the input
• type the first letters of "Hooli" to get the choices suggestions
• select "Hooli"
• click on the input again : "Hooli" is now visible twice in the available choices.

Expected behaviour

After selecting a value, it should not be present twice in the available choices. I think there should be the last fetched choices with a single occurence of the selected one.

Observed behaviour

The last fetched choices are gone and the selected value is visible twice.

[wag110894]

Hello @Baloche, This is expected. If you do not want to have it show up twice, you will need to get rid of the valueProperty. I hope that this helps.

Thank you.

[Baloche]

Thanks for the answer @wag110894, I just tried to remove the valueProperty but it still does not work. The selected value still shows up twice in the choices 😕

[randallknutson]

The issue here is that if the value does not show up in the first set of results from the server then there is nothing in the list of options to match the current value to. The select must add it to the list then so it can be selected. Then when the search occurs again it will show the result a second time. There isn't a lot we can do about this because of the way the underlying data works.

[Baloche]

The problem here is that even before the search occurs again, the value already appears twice in the result :

[Baloche]

After looking at the source code in the Select.js component, I understand that the list is filled by calling the setChoices(choices, value, label, replaceChoices) method from ChoicesJS.

Maybe the replaceChoices argument is not set properly at some moment ?

I think the full choices list should be replaced each time we call the setChoices method. Today it is not the case, sometimes it's replaced, sometimes elements are added to the previous list.

In this way, because we build the choices list ourselves, we should more easily avoid bugs like this one. What do you think ?

[travist]

We recently added a new feature to the Select where it will only display the Unique values.

https://github.com/formio/formio.js/commit/e1c5444dea53dac0041a734595fae4fd0eca8c7c#diff-d8fc1e0640335585f45d7a1c8be83bcd

Can you confirm that you have this option enabled?

[Baloche]

I just tried : uniqueValues (which has now been renamed to uniqueOptions) does not resolve the problem 😕

[travist]

There is another property that you should try to set called idPath (https://github.com/formio/formio.js/blob/master/src/components/select/editForm/Select.edit.data.js#L265). This property allows you to provide a path to what you would like to use as the "id" for each value in the select, and the uniqueness will be based on this path.

[Baloche]

Nope, still visible twice 😕

Here is my component JSON, updated with the properties you suggested :

{
  "type": "select",
  "label": "Companies",
  "key": "companies",
  "placeholder": "Select a company",
  "dataSrc": "url",
  "data": {
    "url": "https://example.form.io/company/submission"
  },
  "limit": 10,
  "valueProperty": "data.name",
  "searchField": "data.name__regex",
  "template": "<span>{{ item.data.name }}</span>",
  "minSearch": 2,
  "idPath": "data.name",
  "uniqueOptions": true
}

The bug is also reproducible in the builder from the documentation page : https://formio.github.io/formio.js/app/builder

[Baloche]

Could you reconsider opening this issue ? I might be able to submit a PR to fix this :)

[anupjha]

Is this fixed yet ?

[Adadlp]

is this fixed?

[olgabann]

We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!