[Observability Onboarding] Scroll to Package List on collection click (…

…#180961) ## Summary Resolves #180814. When the user clicks a collection, we are presently focusing the search bar and scrolling to it. This patch will change the behavior to _not_ change the focus programmatically, and smooth scroll the package list into view. ### Note I am open to suggestions on how to make [this](https://github.com/elastic/kibana/pull/180961/files#diff-23a1716beb9bc5c1c0ef8b6f30f0f805fb7f148770f3dc82a035fcd4bbdb1658R94) less of a hack, but it make the experience better because we give the component time to render before doing the scroll. Here's a before/after: #### Before On initial click of the Azure collection, we only see two rows from the scroll. ![20240416120336](https://github.com/elastic/kibana/assets/18429259/665e99ed-861d-4ba1-acc4-8cf5422973e9) #### After With the delay, we see the full row. ![20240416122920](https://github.com/elastic/kibana/assets/18429259/2fd9f7c4-c81a-45a8-876f-eb2b1d94db73) --------- Co-authored-by: Joe Reuter <[email protected]>
elastic · Apr 22, 2024 · fa936db · fa936db
1 parent 0170f5e
commit fa936db
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 16 deletions.
diff --git a/...observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx b/...observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
@@ -81,18 +81,20 @@ export const OnboardingFlowForm: FunctionComponent = () => {
   const radioGroupId = useGeneratedHtmlId({ prefix: 'onboardingCategory' });
 
   const [searchParams, setSearchParams] = useSearchParams();
-  const packageListSearchBarRef = React.useRef<null | HTMLInputElement>(null);
+  const packageListRef = React.useRef<HTMLDivElement | null>(null);
   const [integrationSearch, setIntegrationSearch] = useState('');
 
   const createCollectionCardHandler = useCallback(
     (query: string) => () => {
       setIntegrationSearch(query);
-      if (packageListSearchBarRef.current) {
-        packageListSearchBarRef.current.focus();
-        packageListSearchBarRef.current.scrollIntoView({
-          behavior: 'auto',
-          block: 'center',
-        });
+      if (packageListRef.current) {
+        // adding a slight delay causes the search bar to be rendered
+        new Promise((r) => setTimeout(r, 10)).then(() =>
+          packageListRef.current?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+          })
+        );
       }
     },
     [setIntegrationSearch]
@@ -163,7 +165,7 @@ export const OnboardingFlowForm: FunctionComponent = () => {
             showSearchBar={true}
             searchQuery={integrationSearch}
             setSearchQuery={setIntegrationSearch}
-            ref={packageListSearchBarRef}
+            ref={packageListRef}
             customCards={customCards?.filter(({ name, type }) => type === 'generated')}
             joinCardLists
           />

diff --git a/...bservability_solution/observability_onboarding/public/application/packages_list/index.tsx b/...bservability_solution/observability_onboarding/public/application/packages_list/index.tsx
@@ -29,7 +29,7 @@ interface Props {
    */
   selectedCategory?: string;
   showSearchBar?: boolean;
-  searchBarRef?: React.Ref<HTMLInputElement>;
+  packageListRef?: React.Ref<HTMLDivElement>;
   searchQuery?: string;
   setSearchQuery?: React.Dispatch<React.SetStateAction<string>>;
   /**
@@ -48,7 +48,7 @@ const PackageListGridWrapper = ({
   selectedCategory = 'observability',
   useAvailablePackages,
   showSearchBar = false,
-  searchBarRef,
+  packageListRef,
   searchQuery,
   setSearchQuery,
   customCards,
@@ -79,7 +79,7 @@ const PackageListGridWrapper = ({
 
   return (
     <Suspense fallback={<Loading />}>
-      <div css={customMargin}>
+      <div css={customMargin} ref={packageListRef}>
         {showSearchBar && (
           <div
             css={css`
@@ -89,9 +89,6 @@ const PackageListGridWrapper = ({
             <EuiSearchBar
               box={{
                 incremental: true,
-                inputRef: (ref: any) => {
-                  (searchBarRef as React.MutableRefObject<HTMLInputElement>).current = ref;
-                },
               }}
               onChange={(arg) => {
                 if (setSearchQuery) {
@@ -125,7 +122,7 @@ const PackageListGridWrapper = ({
 };
 
 const WithAvailablePackages = React.forwardRef(
-  (props: Props, searchBarRef?: React.Ref<HTMLInputElement>) => {
+  (props: Props, packageListRef?: React.Ref<HTMLDivElement>) => {
     const ref = useRef<AvailablePackagesHookType | null>(null);
 
     const {
@@ -173,7 +170,7 @@ const WithAvailablePackages = React.forwardRef(
       <PackageListGridWrapper
         {...props}
         useAvailablePackages={ref.current}
-        searchBarRef={searchBarRef}
+        packageListRef={packageListRef}
       />
     );
   }