[Component] [select] New select option can't be confirmed by the Enter key

[yuri1969]

Bug Type: Component

Environment

• Vue Version: 3.3.4
• Element Plus Version: 2.3.7
• Browser / OS: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0
• Build Tool: Vite

Reproduction

Related Component

• el-select

Reproduction Link

Element Plus Playground

Steps to reproduce

• Select Element Plus version 2.2.32
• Keep adding new select options by hitting the Enter key
• Select Element Plus 2.2.33 or newer
• Attempt to add new select options by hitting the Enter key

What is Expected?

The options can be confirmed by the Enter key.

What is actually happening?

You can confirm just the first option via the Enter key. Any other option can be confirmed by clicking only.

Additional comments

A change between 2.2.32 and 2.2.33 broke this behavior.

[kamesan012]

This change cause this issue.

Variable list changes when input changes, variable newList changes when you enter the value or click on the option.
Cause newList's length is over 1, optionsArray's reall value is newList, when you input some value, the new value is not in the optionsArray so that you can not pick the first option in the options.

const checkDefaultFirstOption = () => {
        // optionsArray used here
        const optionsInDropdown = optionsArray.value.filter(
            (n) => n.visible && !n.disabled && !n.states.groupDisabled
        )
        const userCreatedOption = optionsInDropdown.find((n) => n.created)
        const firstOriginOption = optionsInDropdown[0]
        states.hoverIndex = getValueIndex(
            optionsArray.value,
            userCreatedOption || firstOriginOption
        )
    }

fix

const optionsArray = computed(() => Array.from(states.options.values()))

But i don't know why they change this.

[yuri1969]

@kamesan012 It seems you are right. That particular commit dealt with remote search issues - 842fb2b.

[wzc520pyfm]

This problem seems to be fixable with #12635