The functionality required:

There is an input box with a MatAutoComplete attached to it. When in focus, the autocomplete panel opens and shows the options; the user then uses arrow keys to activate an option and press Enter to select it. Then after selection, the autocomplete panel closes and in the next Enter, it saves it.

The way I was handling it was (Angular 8):

1. User focuses on input, panel opens automatically
2. User selects the option by pressing Enter
3. The Enter event is - If Panel isOpen: Do not do anything; else: Save Input
4. So when the user pressed enter on the option: isOpen was true before the panel closes automatically.
5. But the next time the user presses Enter, isOpen is false and the input is saved.

Then I upgraded to Angular 11:

The Enter event function which checks for isOpen always returns false (It closes the panel 1st and then returns isOpen value) This results in input being saved with just one enter (not good). I event tried preventDefault to no avail.

Any suggestions or solutions will be appreciated!