From 4868f5da24bea8fc0d90637a43c9b75ef2a0f6f1 Mon Sep 17 00:00:00 2001
From: mcoker <mcoker@redhat.com>
Date: Tue, 29 Aug 2023 19:19:36 -0500
Subject: [PATCH] fix(select): fixed deprecated menu filter styles

---
 .../deprecated/components/Select/Select.tsx   | 92 ++++++++++---------
 .../__snapshots__/Select.test.tsx.snap        | 14 ++-
 2 files changed, 56 insertions(+), 50 deletions(-)

diff --git a/packages/react-core/src/deprecated/components/Select/Select.tsx b/packages/react-core/src/deprecated/components/Select/Select.tsx
index fdaca5dc6f7..4dbc6a6d469 100644
--- a/packages/react-core/src/deprecated/components/Select/Select.tsx
+++ b/packages/react-core/src/deprecated/components/Select/Select.tsx
@@ -1149,54 +1149,56 @@ class Select extends React.Component<SelectProps & OUIAProps, SelectState> {
     if (hasInlineFilter) {
       const filterBox = (
         <React.Fragment>
-          <div key="inline-filter" className={css(styles.selectMenuSearch, formStyles.formControl)}>
-            <input
-              key="inline-filter-input"
-              type="search"
-              onChange={this.onChange}
-              placeholder={inlineFilterPlaceholderText}
-              onKeyDown={(event) => {
-                if (event.key === KeyTypes.ArrowUp) {
-                  this.handleMenuKeys(0, 0, 'up');
-                  event.preventDefault();
-                } else if (event.key === KeyTypes.ArrowDown) {
-                  this.handleMenuKeys(0, 0, 'down');
-                  event.preventDefault();
-                } else if (event.key === KeyTypes.ArrowLeft) {
-                  this.handleMenuKeys(0, 0, 'left');
-                  event.preventDefault();
-                } else if (event.key === KeyTypes.ArrowRight) {
-                  this.handleMenuKeys(0, 0, 'right');
-                  event.preventDefault();
-                } else if (event.key === KeyTypes.Tab && variant !== SelectVariant.checkbox && this.props.footer) {
-                  // tab to footer or close menu if shift key
-                  if (event.shiftKey) {
-                    this.onToggle(event, false);
-                  } else {
-                    const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
-                    if (tabbableItems.length > 0) {
-                      tabbableItems[0].focus();
-                      event.stopPropagation();
-                      event.preventDefault();
-                    } else {
-                      this.onToggle(event, false);
-                    }
-                  }
-                } else if (event.key === KeyTypes.Tab && variant === SelectVariant.checkbox) {
-                  // More modal-like experience for checkboxes
-                  // Let SelectOption handle this
-                  if (event.shiftKey) {
+          <div key="inline-filter" className={css(styles.selectMenuSearch)}>
+            <div key="inline-filter" className={css(formStyles.formControl)}>
+              <input
+                key="inline-filter-input"
+                type="search"
+                onChange={this.onChange}
+                placeholder={inlineFilterPlaceholderText}
+                onKeyDown={(event) => {
+                  if (event.key === KeyTypes.ArrowUp) {
                     this.handleMenuKeys(0, 0, 'up');
-                  } else {
+                    event.preventDefault();
+                  } else if (event.key === KeyTypes.ArrowDown) {
                     this.handleMenuKeys(0, 0, 'down');
+                    event.preventDefault();
+                  } else if (event.key === KeyTypes.ArrowLeft) {
+                    this.handleMenuKeys(0, 0, 'left');
+                    event.preventDefault();
+                  } else if (event.key === KeyTypes.ArrowRight) {
+                    this.handleMenuKeys(0, 0, 'right');
+                    event.preventDefault();
+                  } else if (event.key === KeyTypes.Tab && variant !== SelectVariant.checkbox && this.props.footer) {
+                    // tab to footer or close menu if shift key
+                    if (event.shiftKey) {
+                      this.onToggle(event, false);
+                    } else {
+                      const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
+                      if (tabbableItems.length > 0) {
+                        tabbableItems[0].focus();
+                        event.stopPropagation();
+                        event.preventDefault();
+                      } else {
+                        this.onToggle(event, false);
+                      }
+                    }
+                  } else if (event.key === KeyTypes.Tab && variant === SelectVariant.checkbox) {
+                    // More modal-like experience for checkboxes
+                    // Let SelectOption handle this
+                    if (event.shiftKey) {
+                      this.handleMenuKeys(0, 0, 'up');
+                    } else {
+                      this.handleMenuKeys(0, 0, 'down');
+                    }
+                    event.stopPropagation();
+                    event.preventDefault();
                   }
-                  event.stopPropagation();
-                  event.preventDefault();
-                }
-              }}
-              ref={this.filterRef}
-              autoComplete={inputAutoComplete}
-            />
+                }}
+                ref={this.filterRef}
+                autoComplete={inputAutoComplete}
+              />
+            </div>
           </div>
           <Divider key="inline-filter-divider" />
         </React.Fragment>
diff --git a/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
index 67bcfa67d8f..5f29634ec82 100644
--- a/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
@@ -1220,12 +1220,16 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         class="pf-v5-c-form__fieldset"
       >
         <div
-          class="pf-v5-c-select__menu-search pf-v5-c-form-control"
+          class="pf-v5-c-select__menu-search"
         >
-          <input
-            autocomplete="off"
-            type="search"
-          />
+          <div
+            class="pf-v5-c-form-control"
+          >
+            <input
+              autocomplete="off"
+              type="search"
+            />
+          </div>
         </div>
         <hr
           class="pf-v5-c-divider"