Relation widget misbehaviour when searched elements have identical value in valueField

[Mayaela]

Describe the bug
The relation widget doesn't allow the user to select an element in the dropdown result list if there is one element higher up with the same value in its valueField. It will display the first element with the same value instead of the one you clicked on.
Then, if you open the dropdown list again, all the options with the same value in valueField appeared as selected (blue background, cf. screenshot below).
If you use the multiple choices configuration and repeat the same process, it doesn't work either: if you click on a project at the bottom of the list, if there was another project above with the same value, the widget will select the highest in the list. If you click again on the drop-down, your initial choice will not show at all. It won't be offered as an option. Only the other projects with values that are different from the one already selected will show in the list.

To Reproduce

1. Create a collection with a least two fields like these :
   ex:

- name: "projects"
  label: "Projects"
  label_singular: "Project"
  folder: "content/project"
  create: true
  extension: json
  identifier_field: title
  fields:
    - { label: "Project name", name: "title", widget: "string"}
    - label: "Project's rating"
      name: "rating"
      widget: "number"
      valueType: "float"
      min: 0
      max: 5
      step: 0.1
      default: 0

2. Go to your netlify cms admin dashboard and add at least two projects to your projects collections. Make sure to set the same rating for two of the projects. ex: 4,6

3. Create a collection with a field that uses the relation widget like this :

- name: "projectPage"
  label: "Project Pages"
  folder: "content/projectPage"
  create: true
  extension: json
  identifier_field: project1logo
  fields:
    - label: "Project 1 Logo"
      name: "project1Logo"
      widget: "image"
    - label: "Project 1 Rating"
      name: "project1Rating"
      widget: "relation"
      collection: "projects"
      searchFields: ["title"]
      valueField: "rating"
      displayFields: ["title", "rating"]

4. Save your config changes and go back to netlify cms admin dashboard.
   Create a new project page in your Project Pages Collection.
   Go to the relation widget "Project 1 Rating" and try to select a project that has the same rating value as one above it in the dropdown list (cf. screenshot).
   The widget will display the name and rating of the project with the same rating (valueField) that was the highest in the list.
   Click again to show the dropdown list and you'll see that several projects are selected instead of the one you clicked on.

5. If you change your config file and add "multiple: true" to your Relation widget and then go back to the admin dashboard, you will be able in theory to select several projects in the "Project 1 Rating" widget. If you try again to click on a project at the bottom of the list, if there was another project above with the same value, the widget will still display the highest in the list. If you click again on the drop-down, your initial choice won't be offered as an option. Only the other projects with values that are different from the one already selected will show in the list.

6. You can use React Dev Tools to check the metadatafields of the relation widget React component, you can see that the project's data that you first selected is well registered in there. But the children of the component have the highest project data registered as value and display it.

Expected behavior
The relation widget should allow the user to select and display any element listed even if several elements have the same value in their valueField.

Screenshots

Applicable Versions:

• Netlify CMS version: 2.9.7
• Git provider: Gitlab
• OS: MacOs Mojave
• Browser version : Chrome 76.0.3809.100
• Node.JS version: v10.15.1
• gatsby: 2.13.83
• gatsby-plugin-netlify-cms: 4.1.11

Additional context
Using Gatsby

[barthc]

IMHO I don't think this is an issue with the widget, the widget uses of the selected value to identify the right option and in this case, would always be the first match.

I suggest you try making the dropdown option unique. For example, over here https://medium.com/@nidhinkumar/react-select-852e90d549df the user is making use of timestamp to achieve that.

[erquhart]

Yep, if valueField is not unique, you're creating a relation that could match any entry with that value, so the widget is behaving within reason.

[Mayaela]

Hey. Thanks for your answers. The searchField is the title, not the rating. The titles are all different and the relation should be based on them not on the value field. If it were a blog and I were trying to show a writer's information based on his/her email address, and two writers happen to have the same age, profession or name, the widget would not be linked to the writer I searched for with the searchfield (email address). A "relation" implies a connection to an object based on the searchfield as an identifier, and then you display whatever value you choose from this item. If the widget is using the value as the identifier, then it's not a relation widget but just a search widget based on value and the searchfield would be useless since it's not returning the item that I search for.

[erquhart]

Consider the nuts and bolts. Netlify CMS is only a UI, it stores everything right in your files via Git. If we only stored the rating in your file, how would we know which project a rating was related to? Another CMS could do this pretty simply, but it would have a relational database running on a server somewhere. We're trying to forego that.

So relations require unique values. That means values that must be relations should be stored separately and referenced via a unique identifier (probably not even the title because that could change). Ideally you would have a file with an array of all project objects, each including a unique id, but we're not yet able to relate to a file of values that way - the current approach would be to place each project into its own entry, including a unique id field, and set the relation widget to search that collection of projects.