fix(Form): Enable scrolling for Selects

After updating patternfly to v6, the Select component is no longer scrollable. This commit enables the scrolling back by setting the `isScrollable` attribute.
KaotoIO · Jan 23, 2025 · 2dc1766 · 2dc1766
1 parent 3e1dd93
commit 2dc1766
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 1 deletion.
diff --git a/packages/ui/src/components/Form/bean/BeanReferenceField.tsx b/packages/ui/src/components/Form/bean/BeanReferenceField.tsx
@@ -280,6 +280,7 @@ const BeanReferenceFieldComponent = (props: BeanReferenceFieldProps) => {
     props,
     <>
       <Select
+        isScrollable
         id={`${props.name}-bean-select`}
         data-testid={`${props.name}-bean-select`}
         isOpen={isOpen}

diff --git a/packages/ui/src/components/Form/customField/TypeaheadEditor.tsx b/packages/ui/src/components/Form/customField/TypeaheadEditor.tsx
@@ -208,6 +208,7 @@ export const TypeaheadEditor: FunctionComponent<TypeaheadEditorProps> = (props)
     props.selectOptions && (
       <>
         <Select
+          isScrollable
           id="typeahead-select"
           isOpen={isOpen}
           selected={selected}

diff --git a/packages/ui/src/components/Form/customField/TypeaheadField.tsx b/packages/ui/src/components/Form/customField/TypeaheadField.tsx
@@ -205,6 +205,7 @@ export const TypeaheadField = connectField((props: TypeaheadProps) => {
   return wrapField(
     props,
     <Select
+      isScrollable
       id="create-typeahead-select"
       isOpen={isOpen}
       selected={selected}

diff --git a/packages/ui/src/components/MetadataEditor/PipeErrorHandlerEditor.tsx b/packages/ui/src/components/MetadataEditor/PipeErrorHandlerEditor.tsx
@@ -57,6 +57,7 @@ export const PipeErrorHandlerEditor: FunctionComponent<PropsWithChildren<PipeErr
   return (
     <>
       <Select
+        isScrollable
         id={'pipe-error-handler-select'}
         data-testid={'pipe-error-handler-select'}
         isOpen={isOpen}

diff --git a/...mponents/Visualization/ContextToolbar/DSLSelector/DSLSelectorToggle/DSLSelectorToggle.tsx b/...mponents/Visualization/ContextToolbar/DSLSelector/DSLSelectorToggle/DSLSelectorToggle.tsx
@@ -47,6 +47,7 @@ export const DSLSelectorToggle: FunctionComponent<ISourceTypeSelector> = (props)
 
   return (
     <Select
+      isScrollable
       id="dsl-list-select"
       isOpen={isOpen}
       selected={currentSchemaType}

diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.tsx b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.tsx
@@ -60,7 +60,7 @@ export const FlowsMenu: FunctionComponent = () => {
   );
 
   return (
-    <Select id="flows-list-select" isOpen={isOpen} onOpenChange={setIsOpen} toggle={toggle}>
+    <Select isScrollable id="flows-list-select" isOpen={isOpen} onOpenChange={setIsOpen} toggle={toggle}>
       <FlowsList
         onClose={() => {
           setIsOpen(false);

diff --git a/packages/ui/src/components/Visualization/EmptyState/FlowType/FlowTypeSelector.tsx b/packages/ui/src/components/Visualization/EmptyState/FlowType/FlowTypeSelector.tsx
@@ -87,6 +87,7 @@ export const FlowTypeSelector: FunctionComponent<ISourceTypeSelector> = (props)
 
   return (
     <Select
+      isScrollable
       id="dsl-list-select"
       isOpen={isOpen}
       selected={currentSchemaType}