From cb46af6ffc04ca0f0d214385667774b5aca50780 Mon Sep 17 00:00:00 2001
From: Valerio <vabarjs@gmail.com>
Date: Mon, 27 Jun 2022 16:07:10 +0200
Subject: [PATCH 1/3] fix(SearchInput): use popper to control the popup in
 advanced search

---
 .../components/SearchInput/SearchInput.tsx    | 20 ++++++++++++++-----
 .../__snapshots__/SearchInput.test.tsx.snap   |  6 ++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx
index e74ccb2f560..4613ff5bb2f 100644
--- a/packages/react-core/src/components/SearchInput/SearchInput.tsx
+++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/SearchInput/search-input';
 import { Button, ButtonVariant } from '../Button';
 import { Badge } from '../Badge';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
@@ -12,6 +11,7 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 import { AdvancedSearchMenu } from './AdvancedSearchMenu';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
 import { InputGroup } from '../InputGroup';
+import { Popper } from '../../helpers';
 
 export interface SearchAttribute {
   /** The search attribute's value to be provided in the search input's query string.
@@ -277,11 +277,9 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   if (!!onSearch || attributes.length > 0 || !!onToggleAdvancedSearch) {
     if (attributes.length > 0) {
-      return (
-        <div className={css(className, styles.searchInput)} ref={searchInputRef} {...props}>
-          {buildSearchTextInputGroupWithExtraButtons()}
+      const advancedSearch = (
+        <span>
           <AdvancedSearchMenu
-            className={styles.searchInputMenu}
             value={value}
             parentRef={searchInputRef}
             parentInputRef={searchInputInputRef}
@@ -298,6 +296,18 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
             getAttrValueMap={getAttrValueMap}
             isSearchMenuOpen={isSearchMenuOpen}
           />
+        </span>
+      );
+
+      return (
+        <div className={css(className)} ref={searchInputRef} {...props}>
+          <Popper
+            trigger={buildSearchTextInputGroupWithExtraButtons({ id: 'custom-advanced-search' })}
+            popper={advancedSearch}
+            isVisible={isSearchMenuOpen}
+            enableFlip={false}
+            appendTo={() => document.querySelector('#custom-advanced-search')}
+          />
         </div>
       );
     }
diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
index 37a92b570dc..269154aa7b4 100644
--- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
+++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
@@ -3,10 +3,11 @@
 exports[`SearchInput advanced search 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-search-input"
+    class=""
   >
     <div
       class="pf-c-input-group"
+      id="custom-advanced-search"
     >
       <div
         class="pf-c-text-input-group"
@@ -125,10 +126,11 @@ exports[`SearchInput advanced search 1`] = `
 exports[`SearchInput advanced search with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-search-input"
+    class=""
   >
     <div
       class="pf-c-input-group"
+      id="custom-advanced-search"
     >
       <div
         class="pf-c-text-input-group"

From da06c6a81fb9a320f7e1e05763983c4c2bfbed19 Mon Sep 17 00:00:00 2001
From: valerio bartolini <vabarjs@gmail.com>
Date: Wed, 6 Jul 2022 07:54:47 +0200
Subject: [PATCH 2/3] refactor(Search input): update PR comments

---
 .../components/SearchInput/SearchInput.tsx    | 29 +++++++++++++++----
 .../__snapshots__/SearchInput.test.tsx.snap   |  2 --
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx
index 4613ff5bb2f..e49601376b5 100644
--- a/packages/react-core/src/components/SearchInput/SearchInput.tsx
+++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx
@@ -83,6 +83,13 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** Delimiter in the query string for pairing attributes with search values.
    * Required whenever attributes are passed as props */
   advancedSearchDelimiter?: string;
+  /** The container to append the menu to.
+   * If your menu is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * appendTo={() => document.body}
+   * appendTo={document.getElementById('target')}
+   */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
@@ -112,6 +119,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   nextNavigationButtonAriaLabel = 'Next',
   submitSearchButtonLabel = 'Search',
   isDisabled = false,
+  appendTo,
   ...props
 }: SearchInputProps) => {
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
@@ -277,7 +285,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   if (!!onSearch || attributes.length > 0 || !!onToggleAdvancedSearch) {
     if (attributes.length > 0) {
-      const advancedSearch = (
+      const AdvancedSearch = (
         <span>
           <AdvancedSearchMenu
             value={value}
@@ -299,17 +307,26 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         </span>
       );
 
-      return (
+      const AdvancedSearchWithPopper = (
         <div className={css(className)} ref={searchInputRef} {...props}>
           <Popper
-            trigger={buildSearchTextInputGroupWithExtraButtons({ id: 'custom-advanced-search' })}
-            popper={advancedSearch}
+            trigger={buildSearchTextInputGroupWithExtraButtons()}
+            popper={AdvancedSearch}
             isVisible={isSearchMenuOpen}
-            enableFlip={false}
-            appendTo={() => document.querySelector('#custom-advanced-search')}
+            enableFlip={true}
+            appendTo={() => appendTo || searchInputRef.current}
           />
         </div>
       );
+
+      const AdvancedSearchInline = (
+        <div className={css(className)} ref={searchInputRef} {...props}>
+          {buildSearchTextInputGroupWithExtraButtons()}
+          {AdvancedSearch}
+        </div>
+      );
+
+      return appendTo !== 'inline' ? AdvancedSearchWithPopper : AdvancedSearchInline;
     }
 
     return buildSearchTextInputGroupWithExtraButtons({ ...searchInputProps });
diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
index 269154aa7b4..e047b1779c8 100644
--- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
+++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
@@ -7,7 +7,6 @@ exports[`SearchInput advanced search 1`] = `
   >
     <div
       class="pf-c-input-group"
-      id="custom-advanced-search"
     >
       <div
         class="pf-c-text-input-group"
@@ -130,7 +129,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
   >
     <div
       class="pf-c-input-group"
-      id="custom-advanced-search"
     >
       <div
         class="pf-c-text-input-group"

From f726d500d97e99b623eb6b36a2054456f03f6e6c Mon Sep 17 00:00:00 2001
From: valerio bartolini <vabarjs@gmail.com>
Date: Fri, 8 Jul 2022 09:07:41 +0200
Subject: [PATCH 3/3] refactor(SearchInput): add unit tets

---
 .../__tests__/SearchInput.test.tsx            |  37 ++++
 .../__snapshots__/SearchInput.test.tsx.snap   | 193 +++++++++++++++++-
 2 files changed, 228 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx b/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx
index a85ab0bf115..b25f1583085 100644
--- a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx
+++ b/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx
@@ -81,6 +81,7 @@ describe('SearchInput', () => {
   test('advanced search with custom attributes', () => {
     const { asFragment } = render(
       <SearchInput
+        data-testid="test-id"
         attributes={[
           { attr: 'username', display: 'Username' },
           { attr: 'firstname', display: 'First name' }
@@ -102,7 +103,43 @@ describe('SearchInput', () => {
 
     userEvent.click(screen.getByRole('button', { name: 'Search' }));
 
+    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('First name'))
+
     expect(props.onSearch).toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('advanced search with custom attributes and appendTo="inline', () => {
+    const {container}  = render(
+    <SearchInput
+        data-testid="test-id"
+        attributes={[
+          { attr: 'test', display: 'test' },
+        ]}
+        appendTo='inline'
+      />
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    
+    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('test'))
+  });
+
+  test('advanced search with custom attributes and appendTo external DOM element', () => {
+    const {container}  = render(
+    <SearchInput
+        data-testid="test-id"
+        attributes={[
+          { attr: 'test', display: 'test' },
+        ]}
+        appendTo={document.body}
+      />
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    
+    expect(screen.getByTestId('test-id')).not.toContainElement(screen.getByText('test'))
+    expect(document.body).toContainElement(screen.getByText('test'))
+  });
 });
diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
index e047b1779c8..0c2789a4311 100644
--- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
+++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
@@ -126,6 +126,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
 <DocumentFragment>
   <div
     class=""
+    data-testid="test-id"
   >
     <div
       class="pf-c-input-group"
@@ -194,9 +195,9 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       </div>
       <button
         aria-disabled="false"
-        aria-expanded="false"
+        aria-expanded="true"
         aria-label="Open advanced search"
-        class="pf-c-button pf-m-control"
+        class="pf-c-button pf-m-control pf-m-expanded"
         data-ouia-component-id="OUIA-Generated-Button-control-8"
         data-ouia-component-type="PF4/Button"
         data-ouia-safe="true"
@@ -240,6 +241,194 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
         </svg>
       </button>
     </div>
+    <span
+      class=""
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; width: 0px;"
+    >
+      <div
+        class="pf-c-panel pf-m-raised"
+      >
+        <div
+          class="pf-c-panel__main"
+        >
+          <div
+            class="pf-c-panel__main-body"
+          >
+            <form
+              class="pf-c-form"
+              novalidate=""
+            >
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-label"
+                >
+                  <label
+                    class="pf-c-form__label"
+                    for="username_0"
+                  >
+                    <span
+                      class="pf-c-form__label-text"
+                    >
+                      Username
+                    </span>
+                  </label>
+                   
+                </div>
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="pf-c-form-control"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                    data-ouia-component-type="PF4/TextInput"
+                    data-ouia-safe="true"
+                    id="username_0"
+                    type="text"
+                    value="player"
+                  />
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-label"
+                >
+                  <label
+                    class="pf-c-form__label"
+                    for="firstname_1"
+                  >
+                    <span
+                      class="pf-c-form__label-text"
+                    >
+                      First name
+                    </span>
+                  </label>
+                   
+                </div>
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="pf-c-form-control"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+                    data-ouia-component-type="PF4/TextInput"
+                    data-ouia-safe="true"
+                    id="firstname_1"
+                    type="text"
+                    value="john"
+                  />
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-label"
+                >
+                  <label
+                    class="pf-c-form__label"
+                    for="pf-random-id-2"
+                  >
+                    <span
+                      class="pf-c-form__label-text"
+                    >
+                      Has words
+                    </span>
+                  </label>
+                   
+                </div>
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="pf-c-form-control"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+                    data-ouia-component-type="PF4/TextInput"
+                    data-ouia-safe="true"
+                    id="pf-random-id-2"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <button
+                    aria-disabled="false"
+                    class="pf-c-button pf-m-link pf-m-inline"
+                    data-ouia-component-id="OUIA-Generated-Button-link-1"
+                    data-ouia-component-type="PF4/Button"
+                    data-ouia-safe="true"
+                    type="button"
+                  >
+                    Link
+                    <span
+                      class="pf-c-button__icon pf-m-end"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style="vertical-align: -0.125em;"
+                        viewBox="0 0 448 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group pf-m-action"
+              >
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <div
+                    class="pf-c-form__actions"
+                  >
+                    <button
+                      aria-disabled="false"
+                      class="pf-c-button pf-m-primary"
+                      data-ouia-component-id="OUIA-Generated-Button-primary-1"
+                      data-ouia-component-type="PF4/Button"
+                      data-ouia-safe="true"
+                      type="submit"
+                    >
+                      Search
+                    </button>
+                    <button
+                      aria-disabled="false"
+                      class="pf-c-button pf-m-link"
+                      data-ouia-component-id="OUIA-Generated-Button-link-2"
+                      data-ouia-component-type="PF4/Button"
+                      data-ouia-safe="true"
+                      type="reset"
+                    >
+                      Reset
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </span>
   </div>
 </DocumentFragment>
 `;