From 236eda213d2b0372cfbf7f8104379bb8e4645848 Mon Sep 17 00:00:00 2001
From: Johan Lahti <johanlahti@gmail.com>
Date: Tue, 10 Oct 2023 11:10:05 +0200
Subject: [PATCH] refactor: reset zoom when opening a listbox on   small
 devices

---
 .../src/components/ListboxPopoverContainer.tsx        | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/sn-filter-pane/src/components/ListboxPopoverContainer.tsx b/packages/sn-filter-pane/src/components/ListboxPopoverContainer.tsx
index 9cfb77c5..d9a2f39a 100644
--- a/packages/sn-filter-pane/src/components/ListboxPopoverContainer.tsx
+++ b/packages/sn-filter-pane/src/components/ListboxPopoverContainer.tsx
@@ -65,6 +65,13 @@ 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.
@@ -85,6 +92,10 @@ 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 = () => {