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

[HussainTaj-arbisoft]

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

Screen.Recording.2024-04-03.at.4.30.19.PM.mov

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.

ocw-studio/static/js/components/widgets/RelationField.tsx

Line 268 in 312382d

const response = await fetchOptions(inputValue, true, options.length)

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.

ocw-studio/static/js/components/widgets/RelationField.tsx

Line 267 in 312382d

async (inputValue: string, options: Option[]) => {