Fix Bug 67194 - Mobile. Fixed input focus for iPad

packages/shared/components/filter/index.tsx

@@ -28,6 +28,8 @@ import React from "react";
 import { useTheme } from "styled-components";
 import { useTranslation } from "react-i18next";
 
+import { isTablet, isIOS } from "react-device-detect";
+
 import { DeviceType, FilterGroups } from "../../enums";
 
 import { TViewSelectorOption, ViewSelector } from "../view-selector";
@@ -175,6 +177,19 @@ const FilterInput = React.memo(
       [selectedItems, removeSelectedItem],
     );
 
+    const onInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+      if (isTablet && isIOS) {
+        const scrollEvent = () => {
+          e.preventDefault();
+          e.stopPropagation();
+          window.scrollTo(0, 0);
+          window.onscroll = () => {};
+        };
+
+        window.onscroll = scrollEvent;
+      }
+    };
+
     React.useEffect(() => {
       return () => {
         mountRef.current = false;
@@ -191,6 +206,7 @@ const FilterInput = React.memo(
             onClearSearch={onClearSearch}
             id="filter_search-input"
             size={InputSize.base}
+            onFocus={onInputFocus}
           />
           <FilterButton
             id="filter-button"

packages/shared/components/search-input/SearchInput.tsx

@@ -53,6 +53,7 @@ const SearchInput = ({
   name,
   isDisabled = false,
   placeholder,
+  onFocus,
   children,
 }: SearchInputProps) => {
   const timerId = React.useRef<null | ReturnType<typeof setTimeout>>(null);
@@ -162,6 +163,7 @@ const SearchInput = ({
         value={inputValue}
         placeholder={placeholder}
         onChange={onInputChange}
+        onFocus={onFocus}
       >
         {children}
       </InputBlock>

packages/shared/components/search-input/SearchInput.types.ts

@@ -62,4 +62,6 @@ export interface SearchInputProps {
   children?: React.ReactNode;
   /** Accepts css style */
   style?: React.CSSProperties;
+  /** The callback function that is called when the field is focused  */
+  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
 }