NotAllowedError on datetime-local input when swiping between applications

I’ve got an Angular Material datetime-local input like so:

<input
  matInput
  #startDatePicker
  type="datetime-local"
  step="1"
  formControlName="startDate"
  placeholder="Select start date"
  (focus)="startDatePicker.showPicker()"
  max="9999-12-31T23:59:59"
  required />

If I focus the input to open the calendar picker and either swipe to a fullscreen app then swipe back, or even just change tabs then change back, I get:

NotAllowedError: Failed to execute 'showPicker' on 'HTMLInputElement': HTMLInputElement::showPicker() requires a user gesture.

From what I understand, it’s specifically wanting a click or touch from the user. That said, I’d prefer to use (focus) instead of (click) on the input just in case someone wants to Tab into it to focus it.

I assume the Mac/Chrome is “re-focusing” the last selected input when I return to the window by itself, thus causing the error. I’d appreciate any advice:

• Is there a way to suppress the “re-focus” entirely?
• Should I just suppress the error itself in my application?
• Or is there another way I could swap out (focus) and get my desired similar functionality?

Thanks for your time!