List widget with +200 options refuses to load completely

[pmpinto]

Describe the bug
I have a list widget (country picker) with more than 200 entries.
2 issues occur:

1. When editing an already existing record, the value in the country field (let's say united_kingdom) to which this list is writing/reading appears at the top of the list, before the A.
2. After clicking, the options appear, but when scrolling it always gets stuck in the 20th item. When searching though, it works.

Not sure if these 2 are related though.

To Reproduce

1. Have a list field
2. Give it a list of more than 200 options
3. Save a record with a value that's below the 20th position on the list
4. Go back to edit that record

Expected behavior
All options to be available, or at least for it to lazy load them as I scroll.

Screenshots

Applicable Versions:

• Netlify CMS version: 2.14.6
• Git provider: GitHub
• OS: macOS 11.0.1
• Browser version: Brave v1.16.76
• Node.JS version: 12.17.0

CMS configuration

collections:
  - name: 'data'
    label: 'Data'
    files:
      - label: 'Countries'
        name: 'country_list'
        file: '_data/country_flags.yml'
        fields:
          - name: 'country_flags'
            label: 'Country flags'
            widget: 'list'
            summary: '{{name}}'
            field:
              name: 'name'
              label: 'Name'
              widget: 'string'

      - label: 'People'
        name: 'people_list'
        file: '_data/people.yml'
        fields:
          - name: 'people'
            label: 'People'
            widget: 'list'
            summary: '{{name}}'
            fields:
              - name: 'name'
                 label: 'Name'
                 widget: 'string'

              - name: 'country'
                 label: 'Country'
                 widget: 'relation'
                 collection: 'data'
                 multiple: false
                 file: 'country_list'
                 search_fields: ['country_flags.*']
                 display_fields: ['country_flags.*']
                 value_field: 'country_flags.*'

_data/country_flags.yml:

country_flags:
  - abu_dhabi
  - afghanistan
  - albania
  - algeria
  …
  - united_kingdom
  …

_data/people.yml:

people:
  - name: 'John Doe'
    country: 'united_kingdom'

[erezrokah]

Hi @pmpinto, can you clarify if this issue is about loading country_flags list widget or loading country relation widget referencing the country_list file?

[pmpinto]

Hey @erezrokah!
The country list on its own is fine, it completely loads and renders all the +200 options on the page.
The issue seems to be related to the relation part.

Does this help?