fix(material/autocomplete): ensure selected option updates correctly on backspace

Bug: Select an option from the autocomplete and close it. The input field is updated accordingly. Then click inside the input field and press backspace to update the input's value. The autocomplete panel opens, but the selected option is not updated yet. Pressing another backspace triggers the update.

Problem and fix:
When the `_handleInput` function is called, `panelOpen` is still `false`, causing the selected option to not update correctly. The `_openPanelInternal` function needs to be called to ensure the panel is open before processing the selected option logic.

Author: IamFlok

src/material/autocomplete/autocomplete-trigger.ts

@@ -529,18 +529,6 @@ export class MatAutocompleteTrigger
 
       if (!value) {
         this._clearPreviousSelectedOption(null, false);
-      } else if (this.panelOpen && !this.autocomplete.requireSelection) {
-        // Note that we don't reset this when `requireSelection` is enabled,
-        // because the option will be reset when the panel is closed.
-        const selectedOption = this.autocomplete.options?.find(option => option.selected);
-
-        if (selectedOption) {
-          const display = this._getDisplayValue(selectedOption.value);
-
-          if (value !== display) {
-            selectedOption.deselect(false);
-          }
-        }
       }
 
       if (this._canOpen() && this._document.activeElement === event.target) {
@@ -553,6 +541,20 @@ export class MatAutocompleteTrigger
         this._valueOnLastKeydown = null;
         this._openPanelInternal(valueOnAttach);
       }
+
+       if (value && this.panelOpen && !this.autocomplete.requireSelection) {
+        // Note that we don't reset this when `requireSelection` is enabled,
+        // because the option will be reset when the panel is closed.
+        const selectedOption = this.autocomplete.options?.find(option => option.selected);
+
+        if (selectedOption) {
+          const display = this._getDisplayValue(selectedOption.value);
+
+          if (value !== display) {
+            selectedOption.deselect(false);
+          }
+        }
+      }
     }
   }