From e54bf142c39743913d982a1f1709629b4b034969 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 30 May 2023 11:50:29 -0400
Subject: [PATCH] perf: passive event listener for focus visible (#27568)

Issue number: resolves #27566

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The `touchstart` listener for focus visible is not marked as passive.
This causes a browser delay in case `touchstart` calls
`ev.preventDefault()`. However, we are not doing that in this block of
code.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added `passive: true` to the `touchstart` listener to avoid the
browser delay.

Note that this is only needed for touch and wheel events which is why I
only modified `touchstart`:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---
 core/src/utils/focus-visible.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/utils/focus-visible.ts b/core/src/utils/focus-visible.ts
index 7e48c4bbb2..97db5096e5 100644
--- a/core/src/utils/focus-visible.ts
+++ b/core/src/utils/focus-visible.ts
@@ -59,7 +59,7 @@ export const startFocusVisible = (rootEl?: HTMLElement) => {
   ref.addEventListener('keydown', onKeydown);
   ref.addEventListener('focusin', onFocusin);
   ref.addEventListener('focusout', onFocusout);
-  ref.addEventListener('touchstart', pointerDown);
+  ref.addEventListener('touchstart', pointerDown, { passive: true });
   ref.addEventListener('mousedown', pointerDown);
 
   const destroy = () => {