From b05603124a2f4fc9630aad8e30daec2469e47774 Mon Sep 17 00:00:00 2001
From: Enrique Mingorance Cano <emingora@redhat.com>
Date: Tue, 10 Feb 2026 15:37:57 +0100
Subject: [PATCH 1/2] isScrollable added to every PfSelect from
 react-form-wizards components

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>
---
 .../packages/react-form-wizard/src/inputs/WizAsyncSelect.tsx     | 1 +
 .../packages/react-form-wizard/src/inputs/WizMultiSelect.tsx     | 1 +
 frontend/packages/react-form-wizard/src/inputs/WizSelect.tsx     | 1 +
 .../packages/react-form-wizard/src/inputs/WizSingleSelect.tsx    | 1 +
 4 files changed, 4 insertions(+)

diff --git a/frontend/packages/react-form-wizard/src/inputs/WizAsyncSelect.tsx b/frontend/packages/react-form-wizard/src/inputs/WizAsyncSelect.tsx
index dc69f175a97..9c036f05433 100644
--- a/frontend/packages/react-form-wizard/src/inputs/WizAsyncSelect.tsx
+++ b/frontend/packages/react-form-wizard/src/inputs/WizAsyncSelect.tsx
@@ -127,6 +127,7 @@ export function WizAsyncSelect(props: WizAsyncSelectProps) {
             selected={value}
             onSelect={(_event, value) => onSelect(value?.toString() ?? '')}
             shouldFocusFirstItemOnOpen={false}
+            isScrollable
           >
             <SelectListOptions
               allOptions={options}
diff --git a/frontend/packages/react-form-wizard/src/inputs/WizMultiSelect.tsx b/frontend/packages/react-form-wizard/src/inputs/WizMultiSelect.tsx
index 0f7f8ac9659..9abfe334beb 100644
--- a/frontend/packages/react-form-wizard/src/inputs/WizMultiSelect.tsx
+++ b/frontend/packages/react-form-wizard/src/inputs/WizMultiSelect.tsx
@@ -123,6 +123,7 @@ export function WizMultiSelect(props: WizMultiSelectProps) {
           )}
           selected={value}
           onSelect={(_event, value) => onSelect(value?.toString() ?? '')}
+          isScrollable
         >
           <SelectListOptions
             value={value}
diff --git a/frontend/packages/react-form-wizard/src/inputs/WizSelect.tsx b/frontend/packages/react-form-wizard/src/inputs/WizSelect.tsx
index ae83cd1b8e2..9cff9bbc449 100644
--- a/frontend/packages/react-form-wizard/src/inputs/WizSelect.tsx
+++ b/frontend/packages/react-form-wizard/src/inputs/WizSelect.tsx
@@ -190,6 +190,7 @@ function WizSelectBase<T = any>(props: SelectProps<T>) {
               popperProps={{ appendTo: 'inline' }}
               selected={value}
               onSelect={(_event, value) => onSelect(value?.toString() ?? '')}
+              isScrollable
             >
               <SelectListOptions
                 value={value}
diff --git a/frontend/packages/react-form-wizard/src/inputs/WizSingleSelect.tsx b/frontend/packages/react-form-wizard/src/inputs/WizSingleSelect.tsx
index 59260c57e57..16e5acd6247 100644
--- a/frontend/packages/react-form-wizard/src/inputs/WizSingleSelect.tsx
+++ b/frontend/packages/react-form-wizard/src/inputs/WizSingleSelect.tsx
@@ -106,6 +106,7 @@ export function WizSingleSelect(props: WizSingleSelectProps) {
               )}
               selected={value}
               onSelect={(_event, value) => onSelect(value?.toString() ?? '')}
+              isScrollable
             >
               <SelectListOptions
                 value={value}

From bbed566f6a78bf3609ebbae23a8cd7e26f2cffd8 Mon Sep 17 00:00:00 2001
From: Enrique Mingorance Cano <emingora@redhat.com>
Date: Tue, 10 Feb 2026 16:26:15 +0100
Subject: [PATCH 2/2] ControlPanelComboBox.js adapted

Signed-off-by: Enrique Mingorance Cano <emingora@redhat.com>
---
 .../controls/ControlPanelComboBox.js          | 52 +++++++++++--------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js b/frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js
index 5672a666d38..42de0ba6abe 100644
--- a/frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js
+++ b/frontend/src/components/TemplateEditor/controls/ControlPanelComboBox.js
@@ -168,6 +168,7 @@ class ControlPanelComboBox extends React.Component {
       'tf--list-box__menu-icon': true,
       'tf--list-box__menu-icon--open': isOpen,
     })
+    const toggleStyles = { height: isOpen ? '10%' : '100%' }
     const inputClasses = classNames({
       'pf-v6-c-form-control': true,
       input: true,
@@ -274,6 +275,7 @@ class ControlPanelComboBox extends React.Component {
                         ref={this.setToggleRef}
                         onClick={this.clickToggle.bind(this)}
                         onKeyPress={this.pressToggle.bind(this)}
+                        style={toggleStyles}
                       >
                         <svg
                           fillRule="evenodd"
@@ -292,39 +294,43 @@ class ControlPanelComboBox extends React.Component {
                   </div>
                   {!disabled && isOpen && (
                     <div
-                      role="button"
-                      className="tf--list-box__menu"
+                      className="pf-v6-c-menu pf-m-scrollable"
                       key={key}
                       id={key}
                       ref={this.setMenuRef}
+                      role="presentation"
                       onMouseDown={() => {
                         this.menuClick = true
                       }}
                       onMouseUp={() => {
                         this.menuClick = false
                       }}
-                      tabIndex="0"
                     >
-                      {items.map(({ label, id }) => {
-                        const itemClasses = classNames({
-                          'tf--list-box__menu-item': true,
-                          searching: searchText,
-                        })
-                        return (
-                          <div
-                            role="button"
-                            key={label}
-                            className={itemClasses}
-                            id={`${controlId}-item-${id}`}
-                            tabIndex="0"
-                            onMouseDown={() => this.setState({ preselect: true })}
-                            onClick={this.clickSelect.bind(this, label)}
-                            onKeyPress={this.pressSelect.bind(this, label)}
-                          >
-                            {this.renderLabel(label, searchText, active, control, simplified, describe)}
-                          </div>
-                        )
-                      })}
+                      <div className="pf-v6-c-menu__content">
+                        <ul role="listbox" aria-multiselectable="false" className="pf-v6-c-menu__list">
+                          {items.map(({ label, id }) => (
+                            <li key={label} className="pf-v6-c-menu__list-item" role="none">
+                              <button
+                                id={`${controlId}-item-${id}`}
+                                type="button"
+                                tabIndex={id === 0 ? 0 : -1}
+                                className="pf-v6-c-menu__item"
+                                role="option"
+                                aria-selected={label === active}
+                                onMouseDown={() => this.setState({ preselect: true })}
+                                onClick={this.clickSelect.bind(this, label)}
+                                onKeyPress={this.pressSelect.bind(this, label)}
+                              >
+                                <span className="pf-v6-c-menu__item-main">
+                                  <span className="pf-v6-c-menu__item-text">
+                                    {this.renderLabel(label, searchText, active, control, simplified, describe)}
+                                  </span>
+                                </span>
+                              </button>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
                     </div>
                   )}
                 </div>