Unable to select "Input variable names" value from dropdown, when many options are defined and a "Search values" filter is used

Summary

There seems to be a frontend bug in our /pipelines/new page/form-group or pipeline-form-ci-variable-value-dropdown.

Steps to reproduce

In the example below:

  1. try manually starting a new pipeline
  2. For any MODULE_TARGET…x, select some value directly from the dropdown menu ✅
  3. For any other MODULE_TARGET…y, filter for a short substring like SD select a value. ✅
  4. For any other MODULE_TARGET…z, filter for a longer substring like SDK- and try selecting a value. ❌
  5. In the N_OPTIONs dropdown, filter for deb and select the matching value ✅

Due to 3. vs. 4. vs. 5. I think the combination of long options list with long search filter causes this problem.

Example Project: katrinleinweber_premium_group/638894

What is the current bug behavior?

At 4. the dropdown UI kinda "locks up" so that no selection is possible, no Clearing either, etc. Reloading the page is required.

What is the expected correct behavior?

Regardless of the number of ENV VAR options: defined and Search value filter applied, the selection should work.

Alternatively, in case of a maximum options number, a linting/validating error should be displayed when saving or pushing the .gitlab-ci.yml file.

Workaround

Using our POST /projects/:id/pipeline API endpoint with variable values being supplied as [{ 'key': 'MODULE_TARGET1', 'value': '…'}, {'key': 'MODULE_TARGET2', 'value': '…'}, {…}] works. But this lacks the overview benefits of the dropdown UI, so I would consider this a rather "complex workaround" for now.

Relevant logs and/or screenshots (from browser dev tools)

TypeError: can't access property "key", e is undefined
    VueJS 24
        Ir
        S
        S
        S
        S
        S
        S
        S
        S
        Bo
        _update
        i
        get
        run
        vi
        jn
        wn
        promise callback*bn
        jn
        bi
        update
        notify
        set
        set
    callback listbox.js:880
    VueJS 4
    input listbox_search_input.js:42
    VueJS 3
    n helpers.ts:117
    setupOnce browserapierrors.ts:214
    kn dom.ts:95
    VueJS 28
console.ts:39:14
    sn console.ts:39
    VueJS 12
    callback listbox.js:880
    VueJS 4
    input listbox_search_input.js:42
    VueJS 3
    n helpers.ts:117
    (Async: EventListener.handleEvent)
    setupOnce browserapierrors.ts:214
    kn dom.ts:95
    VueJS 28

Output of checks

This bug happens on GitLab.com, as of 18.3.0-pre 14314bcf.

Customer reproduced this in v17.11.5-ee

Results of GitLab environment info

Results of GitLab application Check

Possible fixes

Patch release information for backports

If the bug fix needs to be backported in a patch release to a version under the maintenance policy, please follow the steps on the patch release runbook for GitLab engineers.

Refer to the internal "Release Information" dashboard for information about the next patch release, including the targeted versions, expected release date, and current status.

High-severity bug remediation

To remediate high-severity issues requiring an internal release for single-tenant SaaS instances, refer to the internal release process for engineers.

Edited by 🤖 GitLab Bot 🤖