Describe the bug

When a user clears the input of an AutoComplete in a PrimeVue Form component with initial values, the label reverts to the label of the initial value, though the model is correctly updated to an empty string.

I believe the problem is as follows:

The input value is computed in AutoComplete as:

        inputValue() {
            if (this.$filled) {
                if (typeof this.d_value === 'object') {
                    const label = this.getOptionLabel(this.d_value);

                    return label != null ? label : this.d_value;
                } else {
                    return this.d_value;
                }
            } else {
                return '';
            }
        }

this.$filled is always true because $filled is computed in BaseEditableHolder as:

        $filled() {
            return isNotEmpty(this.d_value);
        }

and this.d_value is never empty.

As far as I can tell, input changes the form's state and triggers a recompute of $formValue. The state value is an empty string, which makes $formValue undefined.

        $formValue() {
            return this.findNonEmpty(this.$pcFormField?.$field?.value, this.$pcForm?.getFieldState(this.$formName)?.value);
        }

That triggers the $formValue watcher:

        $formValue: {
            immediate: false,
            handler(newValue) {
                if (this.$pcForm?.getFieldState(this.$formName) && newValue !== this.d_value) {
                    this.d_value = newValue;
                }
            }
        }

newValue is undefined and d_value is an empty string, so d_value becomes undefined. This might be the problem. Since d_value changed, $formDefaultValue is recomputed:

        $formDefaultValue() {
            return this.findNonEmpty(this.d_value, this.$pcFormField?.initialValue, this.$pcForm?.initialValues?.[this.$formName]);
        }

Since d_value is undefined, we end up with the initial value again. I don't understand why d_value is part of this. This could also be the problem.

        $formDefaultValue: {
            immediate: true,
            handler(newValue) {
                this.d_value !== newValue && (this.d_value = newValue);
            }
        }

d_value is undefined and newValue is the initial value, so we set d_value to newValue.

As a result, $formDefaultValue is recomputed again. That triggers the $formDefaultValue watcher again, but this time nothing happens because newValue and d_value are the same.

Now we're back at the beginning and we take the label from d_value, which is the initial value.

When used outside of a Form, d_value is initialized as

        return {
            d_value: this.defaultValue || this.modelValue
        }

It's updated only when the props change by the following watchers:

        modelValue(newValue) {
            this.d_value = newValue;
        },
        defaultValue(newValue) {
            this.d_value = newValue;
        }

This seems like the correct behavior.

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-eeqtqzws?file=src%2FApp.vue,package.json

Environment

@primevue/forms: 4.3.3

Vue version

3.5.13

PrimeVue version

4.3.3

Node version

23.11.0

Browser(s)

No response

Steps to reproduce the behavior

Go to the reproducer. Hit backspace in the AutoComplete until you see the problem.

Expected behavior

The AutoComplete should be blank.