From fe3ca8b8bcd0fc1a3c524d4a00f3561e4bfa1033 Mon Sep 17 00:00:00 2001
From: Johan Lahti <johanlahti@users.noreply.github.com>
Date: Tue, 5 Dec 2023 14:26:00 +0100
Subject: [PATCH] fix(sn-filter-pane): reset zoom for all scenarios (#392)

---
 .../src/components/ListboxGrid/ListboxGrid.tsx        |  4 ++++
 .../src/components/ListboxPopoverContainer.tsx        | 11 -----------
 packages/sn-filter-pane/src/utils/reset-zoom.ts       | 11 +++++++++++
 3 files changed, 15 insertions(+), 11 deletions(-)
 create mode 100644 packages/sn-filter-pane/src/utils/reset-zoom.ts

diff --git a/packages/sn-filter-pane/src/components/ListboxGrid/ListboxGrid.tsx b/packages/sn-filter-pane/src/components/ListboxGrid/ListboxGrid.tsx
index 32c5f5a8..43ff8c0e 100644
--- a/packages/sn-filter-pane/src/components/ListboxGrid/ListboxGrid.tsx
+++ b/packages/sn-filter-pane/src/components/ListboxGrid/ListboxGrid.tsx
@@ -21,6 +21,7 @@ import KEYS from '../keys';
 import useFocusListener from '../../hooks/use-focus-listener';
 import findNextIndex from './find-next-index';
 import { IEnv } from '../../types/types';
+import resetZoom from '../../utils/reset-zoom';
 
 function ListboxGrid({ stores }: { stores: IStores }) {
   const { store, resourceStore } = stores;
@@ -89,6 +90,8 @@ function ListboxGrid({ stores }: { stores: IStores }) {
     preventDefaultBehavior(event);
   };
 
+  const handleFocus = sense?.isSmallDevice?.() ? () => resetZoom() : undefined;
+
   useFocusListener(gridRef, keyboard);
 
   const isRtl = options.direction === 'rtl';
@@ -116,6 +119,7 @@ function ListboxGrid({ stores }: { stores: IStores }) {
         className="filter-pane-container"
         container
         onKeyDown={handleKeyDown}
+        onFocus={handleFocus}
         sx={{ flexDirection: isRtl ? 'row-reverse' : 'row' }}
         columns={columns?.length}
         ref={gridRef as unknown as () => HTMLObjectElement}
diff --git a/packages/sn-filter-pane/src/components/ListboxPopoverContainer.tsx b/packages/sn-filter-pane/src/components/ListboxPopoverContainer.tsx
index 85748f15..c3bc3525 100644
--- a/packages/sn-filter-pane/src/components/ListboxPopoverContainer.tsx
+++ b/packages/sn-filter-pane/src/components/ListboxPopoverContainer.tsx
@@ -61,13 +61,6 @@ const StyledPopover = styled(Popover, { shouldForwardProp: (p: string) => !['isS
   } : {},
 }));
 
-function resetZoom() {
-  const viewportMetaTag = document.querySelector('meta[name="viewport"]');
-  if (viewportMetaTag instanceof HTMLMetaElement) {
-    viewportMetaTag.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
-  }
-}
-
 /**
  * If a single resource is passed to this component a FoldedListbox is rendered.
  * When the FoldedListbox is clicked, a Listbox is rendered in a Popover.
@@ -87,10 +80,6 @@ export const ListboxPopoverContainer = ({ resources, stores }: FoldedPopoverProp
   const handleOpen = ({ event }: FoldedListboxClickEvent | { event: React.MouseEvent<HTMLButtonElement, MouseEvent> }) => {
     if (event.currentTarget.contains(event.target as Node) && !constraints?.active) {
       setPopoverOpen(true);
-      if (isSmallDevice) {
-        // Autofocus can cause the browser to zoom so we need to reset zoom.
-        resetZoom();
-      }
     }
   };
   const handleClose = () => {
diff --git a/packages/sn-filter-pane/src/utils/reset-zoom.ts b/packages/sn-filter-pane/src/utils/reset-zoom.ts
new file mode 100644
index 00000000..ac713cdb
--- /dev/null
+++ b/packages/sn-filter-pane/src/utils/reset-zoom.ts
@@ -0,0 +1,11 @@
+/**
+ * Run this on small devices to reset the zoom. Required when focusing
+ * an input field and the browser auto zooms the page. Browsers do not
+ * expose any API for handling this currently.
+ */
+export default function resetZoom() {
+  const viewportMetaTag = document.querySelector('meta[name="viewport"]');
+  if (viewportMetaTag instanceof HTMLMetaElement) {
+    viewportMetaTag.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
+  }
+}