As I work on my Angular app, I encountered an odd problem with the menu component specifically on my Samsung S20 phone (it functions properly in desktop Chrome). The issue arises when I focus on an input field in PicksComponent and then click the hamburger button to toggle the menu. The menu briefly appears, then disappears, and the input field loses focus. However, when I click the hamburger button again, it works as expected. It's puzzling because there shouldn't be any direct communication between MenuComponent and PicksComponent.

app-component.html

<main id="container">
<div class='banner'>websitename</div>
<app-menu></app-menu>
<div id="routerOutlet">
<router-outlet></router-outlet>
</div>
</main>

menu-component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { ManageLoginService } from "../manage-login.service";

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  constructor(private router: Router,private manageLoginService : ManageLoginService) { }

  mobileWidth: number = 500;
  screenWidth: number = window.innerWidth;
  displayMenuItems: boolean = false;
  loggedIn : boolean = false;

  logout() {
    localStorage.clear();
    this.router.navigateByUrl("/login");
  }

  checkMenu() {
    this.screenWidth = window.innerWidth;
    if(this.screenWidth > this.mobileWidth) {
      this.displayMenuItems = true;
    }
    else {
      this.displayMenuItems = false;
    }
  }

  toggleMenu() {
    this.displayMenuItems = !this.displayMenuItems;
  }

  ngOnInit() {
    this.checkMenu();
    this.manageLoginService.isUserLoggedIn.subscribe(loggedInStatus => this.loggedIn = loggedInStatus)
  }

}
</ul>

picks-component.ts

import { Component, OnInit,ViewChild,ElementRef} from '@angular/core';
import { Router } from "@angular/router";
import { DataService } from "../data.service";

@Component({
  selector: 'app-picks',
  templateUrl: './picks.component.html',
  styleUrls: ['./picks.component.css'],
})

export class PicksComponent implements OnInit {
  constructor(private dataService : DataService,private router: Router) { }

  @ViewChild("playerOne",{static:false}) playerOneField: ElementRef;
  @ViewChild("playerTwo",{static:false}) playerTwoField: ElementRef;
  @ViewChild("playerThree",{static:false}) playerThreeField: ElementRef;
  @ViewChild("playerFour",{static:false}) playerFourField: ElementRef;
  @ViewChild("playerFive",{static:false}) playerFiveField: ElementRef;

  title: string = 'Submit Picks';
  suggestions : any = {"playerOne":[],"playerTwo":[],"playerThree":[],"playerFour":[],"playerFive":[]};
  picks : any = {"playerOne":"","playerTwo":"","playerThree":"","playerFour":"","playerFive":""};
  picksForm : any = {"token":"","players":this.picks};
  enableSuggestions: boolean = true;
  formResponse : any;
  formValid : boolean = true;
  formErrors : string;
  keys : any;
  picksSubmitted : boolean = false;

  focus(elementName : any): void {
    this[elementName].nativeElement.focus();
  }

  displayPlayers(player :any) {
    console.log("HMM");
    localStorage.setItem("picks",JSON.stringify(this.picks));
    if(this.picks[player].length >= 3 && this.enableSuggestions) {
      this.dataService.getSuggestions(this.picks[player]).subscribe(suggestions => this.suggestions[player] = suggestions);
    }
    else {
      this.enableSuggestions = true;
      this.suggestions[player] = [];
    }
  }

  submitForm(form :any) {
    if(this.validateForm()) {
      this.picksForm.token = localStorage.getItem("token");
      this.dataService.sendEmail(form).subscribe(formResponse => this.processResponse(formResponse));
    }
    else {
      this.formValid = false;
    }
  }

  processResponse(response :any) {
    this.formResponse = response;
    if(this.formResponse.error) {
      this.formValid = false;
      this.formErrors = this.formResponse.message;
    }
    else {
      localStorage.removeItem("picks");
      this.picksSubmitted = true;
    }
  }

  select(suggestion : any,player :any) {
    this.enableSuggestions = false;
    this.picks[player] = suggestion.forename + " " + suggestion.surname;
    this.suggestions[player] = [];
    localStorage.setItem("picks",JSON.stringify(this.picks));
  }

  resetForm() {
    this.picks.playerOne = "";
    this.picks.playerTwo = "";
    this.picks.playerThree = "";
    this.picks.playerFour = "";
    this.picks.playerFive = "";
  }

  hideSuggestions() {
    this.suggestions.playerOne = [];
    this.suggestions.playerTwo = [];
    this.suggestions.playerThree = [];
    this.suggestions.playerFour = [];
    this.suggestions.playerFive = [];
  }

  validateForm() : boolean {
    // Create array from object
    this.keys = Object.values(this.picks);
    // Iterate over array
    for(const key of this.keys) {
      if(key.length < 2) {
        this.formErrors = "Please do not leave any picks blank.";
        return false;
      }
    }
    return true;
  }

  ngOnInit() {
    if(localStorage.getItem("picks")) {
      this.picks = JSON.parse(localStorage.getItem("picks"));
      this.picksForm = {"token":"","players":this.picks};
    }
    setTimeout (() => { this.hideSuggestions(); }, 1000);
  }
}

Does anyone have any insights into what might be causing this issue? Feel free to ask for more code if needed. I'm unsure if it's related to mobile Chrome or if I made an error, as I'm relatively new to Angular.