search

mitodl / ocw-studio

Open Source Courseware authoring tool
BSD 3-Clause "New" or "Revised" License
7 stars 3 forks source link

RelationField auto-fetch/auto-fill options results in duplicate values for initially empty lists #2138

Open HussainTaj-arbisoft opened 3 months ago

HussainTaj-arbisoft commented 3 months ago

Please view the following view to see what the issue is about.

https://github.com/mitodl/ocw-studio/assets/71316217/7f686cd7-e81d-49f2-9a38-3d47d2ea022d

Please see this RC course for an example.

When does this occur?

This issue appears when a multi-select list already contains the top results (as returned by the API). Since selected items are not a part of the options list, they are removed from the options, and an empty list is generated. An empty list triggers a fetch until the options list is sufficiently populated or until the API says it has no more data.

What is the likely cause?

The following might be the source of the issue.

https://github.com/mitodl/ocw-studio/blob/312382d326c0b6475dc23cfaf68bf50ea30a1ed5/static/js/components/widgets/RelationField.tsx#L268

The third parameter to fetchOptions is an offset forwarded to the API request. I believe options to be visible options only. Combined with FEATURE_SORTABLE_SELECT_HIDE_SELECTED=true it causes the duplicate options problem.

Expected Behavior

The options list does not show duplicates.

Current Behavior

The options list shows duplicates.

Steps to Reproduce

The environment must have the following variables

FEATURE_SELECT_FIELD_INFINITE_SCROLL=true
FEATURE_SORTABLE_SELECT_HIDE_SELECTED=true
  1. Create a course with at least 21 resources.
  2. Create a menu and add the top 8 resources to it.
  3. Edit the first resource and open the select field to observe the issue.

Possible Solution

I believe we'll have to separately track the running offset. The loadOptions function has a third argument called additional which we can utilize to track the running offset. Docs.

https://github.com/mitodl/ocw-studio/blob/312382d326c0b6475dc23cfaf68bf50ea30a1ed5/static/js/components/widgets/RelationField.tsx#L267