@openshift-assisted/ui-lib 2.41.1 → 2.42.0

package/lib/common/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { FormGroup, Tooltip } from '@patternfly/react-core';
+import {
+  FormGroup,
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+} from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { getFieldId, StaticField } from '../..';
 import { useField } from 'formik';
@@ -55,29 +62,35 @@ const ControlPlaneNodesDropdown = ({
     );
   });
 
-  const onControlPlaneSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
-    const val = e?.currentTarget.id as string;
-    setValue(toNumber(val));
+  const onControlPlaneSelect = (
+    e?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ) => {
+    setValue(toNumber(value));
     setControlPlanelOpen(false);
   };
 
   return !isDisabled ? (
     <FormGroup isInline fieldId={fieldId} label={t('ai:Number of control plane nodes')} isRequired>
       <Dropdown
-        toggle={
-          <DropdownToggle
-            onToggle={() => setControlPlanelOpen(!controlPlanelOpen)}
-            className="pf-u-w-100"
-          >
-            {selectedValue ? selectedValue : '3'}
-          </DropdownToggle>
-        }
-        name="controlPlaneCount"
         isOpen={controlPlanelOpen}
         onSelect={onControlPlaneSelect}
-        dropdownItems={dropdownItems}
-        className="pf-u-w-100"
-      />
+        onOpenChange={() => setControlPlanelOpen(!controlPlanelOpen)}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            className="pf-v5-u-w-100"
+            ref={toggleRef}
+            isFullWidth
+            onClick={() => setControlPlanelOpen(!controlPlanelOpen)}
+            isExpanded={controlPlanelOpen}
+          >
+            {selectedValue ? selectedValue : '3'}
+          </MenuToggle>
+        )}
+        shouldFocusToggleOnSelect
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
     </FormGroup>
   ) : (
     <StaticField

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionControlGroup.tsx

@@ -42,16 +42,20 @@ const DiskEncryptionControlGroup = ({
   const {
     enableDiskEncryptionOnMasters,
     enableDiskEncryptionOnWorkers,
+    enableDiskEncryptionOnArbiters,
     diskEncryptionMode,
     diskEncryptionTangServers,
   } = values;
   const fieldId = 'diskEncryption';
 
-  const hasEnabledDiskEncryption = enableDiskEncryptionOnMasters || enableDiskEncryptionOnWorkers;
+  const hasEnabledDiskEncryption =
+    enableDiskEncryptionOnMasters ||
+    enableDiskEncryptionOnWorkers ||
+    enableDiskEncryptionOnArbiters;
   const { setFieldValue, setFieldTouched } = useFormikContext<ClusterDetailsValues>();
 
   React.useEffect(() => {
-    if (!enableDiskEncryptionOnWorkers && !enableDiskEncryptionOnMasters) {
+    if (!hasEnabledDiskEncryption) {
       if (diskEncryptionMode !== 'tpmv2') {
         setFieldValue('diskEncryptionMode', 'tpmv2');
       }
@@ -61,12 +65,11 @@ const DiskEncryptionControlGroup = ({
       }
     }
   }, [
-    enableDiskEncryptionOnMasters,
-    enableDiskEncryptionOnWorkers,
     diskEncryptionMode,
     diskEncryptionTangServers,
     setFieldTouched,
     setFieldValue,
+    hasEnabledDiskEncryption,
   ]);
 
   React.useEffect(() => {
@@ -102,8 +105,20 @@ const DiskEncryptionControlGroup = ({
             />
           </StackItem>
         </RenderIf>
+        <StackItem>
+          <SwitchField
+            tooltipProps={tooltipProps}
+            name="enableDiskEncryptionOnArbiters"
+            label={t('ai:Arbiter')}
+            isDisabled={isDisabled}
+          />
+        </StackItem>
         <RenderIf
-          condition={enableDiskEncryptionOnMasters || (enableDiskEncryptionOnWorkers && !isSNO)}
+          condition={
+            enableDiskEncryptionOnMasters ||
+            (enableDiskEncryptionOnWorkers && !isSNO) ||
+            enableDiskEncryptionOnArbiters
+          }
         >
           <StackItem>
             <DiskEncryptionMode

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionValues.ts

@@ -8,6 +8,7 @@ export type TangServer = {
 export interface DiskEncryptionValues {
   enableDiskEncryptionOnMasters?: boolean;
   enableDiskEncryptionOnWorkers: boolean;
+  enableDiskEncryptionOnArbiters: boolean;
   diskEncryptionMode: DiskEncryption['mode'];
   diskEncryptionTangServers: TangServer[];
 }

package/lib/common/components/clusterWizard/clusterDetailsValidation.ts

@@ -83,6 +83,9 @@ export const getClusterDetailsInitialValues = ({
     customOpenshiftSelect: null,
     userManagedNetworking: cluster?.userManagedNetworking || false,
     controlPlaneCount: cluster?.controlPlaneCount || 3,
+    enableDiskEncryptionOnArbiters: ['all', 'arbiters'].includes(
+      cluster?.diskEncryption?.enableOn ?? 'none',
+    ),
   };
 };
 

package/lib/common/components/clusterWizard/types.ts

@@ -27,6 +27,7 @@ export type ClusterDetailsValues = {
   useRedHatDnsService: boolean;
   enableDiskEncryptionOnMasters: boolean;
   enableDiskEncryptionOnWorkers: boolean;
+  enableDiskEncryptionOnArbiters: boolean;
   diskEncryptionMode: DiskEncryption['mode'];
   diskEncryptionTangServers: TangServer[];
   diskEncryption: DiskEncryption;

package/lib/common/components/hosts/DiskRole.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 import {
   Disk,
   DiskRole as DiskRoleValue,
@@ -83,7 +88,7 @@ const DiskRoleDropdown: React.FC<DiskRoleDropdownProps> = ({
   ];
 
   const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
+    (event?: React.MouseEvent<Element, MouseEvent>) => {
       const asyncFunc = async () => {
         if (event?.currentTarget.id) {
           setDisabled(true);
@@ -98,28 +103,29 @@ const DiskRoleDropdown: React.FC<DiskRoleDropdownProps> = ({
   );
 
   const currentRoleLabel = getCurrentDiskRoleLabel(disk, installationDiskId, t);
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isDisabled={isDisabled}
-        className="pf-v5-c-button pf-m-link pf-m-inline"
-      >
-        {currentRoleLabel}
-      </DropdownToggle>
-    ),
-    [setOpen, currentRoleLabel, isDisabled],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      variant="plainText"
+      ref={toggleRef}
+      isFullWidth
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+    >
+      {currentRoleLabel}
+    </MenuToggle>
   );
 
   return (
     <Dropdown
+      onOpenChange={() => setOpen(!isOpen)}
       onSelect={onSelect}
-      dropdownItems={dropdownItems}
       toggle={toggle}
       isOpen={isOpen}
       isPlain
-    />
+    >
+      <DropdownList>{dropdownItems}</DropdownList>
+    </Dropdown>
   );
 };
 

package/lib/common/components/hosts/HostToolbarActions.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type ChangeHostnameActionProps = {

package/lib/common/components/hosts/TableToolbar.tsx

@@ -11,14 +11,13 @@ import {
   ToolbarItem,
   ToolbarProps,
   Tooltip,
-} from '@patternfly/react-core';
-import {
   Dropdown,
   DropdownItem,
-  DropdownToggle,
-  DropdownToggleCheckbox,
-} from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+  MenuToggleCheckbox,
+} from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 import './TableToolbar.css';
@@ -52,6 +51,8 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
   const [selectOpen, setSelectOpen] = React.useState(false);
   const onSelectToggle = React.useCallback(() => setSelectOpen(!selectOpen), [selectOpen]);
   const onActionsToggle = React.useCallback(() => setActionsOpen(!actionsOpen), [actionsOpen]);
+  const onSelectAll = () => setSelectedIDs(itemIDs);
+  const onSelectNone = () => setSelectedIDs([]);
 
   React.useEffect(() => {
     if (!selectedIDs.every((id) => itemIDs.includes(id))) {
@@ -72,57 +73,62 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
   const actionsDropdown = (
     <Dropdown
       onSelect={onActionsToggle}
-      toggle={
-        <DropdownToggle
-          onToggle={onActionsToggle}
-          toggleIndicator={CaretDownIcon}
-          isDisabled={isDisabled}
-        >
+      onOpenChange={onActionsToggle}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle ref={toggleRef} isFullWidth onClick={onActionsToggle} isExpanded={actionsOpen}>
           {t('ai:Actions')}
-        </DropdownToggle>
-      }
+        </MenuToggle>
+      )}
       isOpen={actionsOpen}
-      dropdownItems={actions}
-    />
+    >
+      {actions}
+    </Dropdown>
+  );
+
+  const SelectDropdown = (
+    <Dropdown
+      onSelect={onSelectToggle}
+      onOpenChange={onSelectToggle}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          isFullWidth
+          onClick={onSelectToggle}
+          isExpanded={selectOpen}
+          splitButtonOptions={{
+            items: [
+              <MenuToggleCheckbox
+                id="select-checkbox"
+                key="select-checkbox"
+                aria-label="Select all"
+                onChange={(checked, _event) => (checked ? onSelectAll() : onSelectNone())}
+                isChecked={isChecked}
+              >
+                {selectedIDs.length} {t('ai:selected')}
+              </MenuToggleCheckbox>,
+            ],
+          }}
+        />
+      )}
+      isOpen={selectOpen}
+    >
+      <DropdownList>
+        <DropdownItem id={'select-all'} key="select-all" onClick={onSelectAll}>
+          {t('ai:Select all')}
+        </DropdownItem>
+        <DropdownItem id={'select-none'} key="select-none" onClick={onSelectNone}>
+          {t('ai:Select none')}
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
   );
 
-  const onSelectAll = () => setSelectedIDs(itemIDs);
-  const onSelectNone = () => setSelectedIDs([]);
   return (
     <Split hasGutter>
       <SplitItem isFilled>
         <Toolbar className="table-toolbar" clearAllFilters={clearAllFilters}>
           <ToolbarContent className="table-toolbar__content">
-            <ToolbarItem>
-              <Dropdown
-                onSelect={onSelectToggle}
-                toggle={
-                  <DropdownToggle
-                    splitButtonItems={[
-                      <DropdownToggleCheckbox
-                        id="select-checkbox"
-                        key="select-checkbox"
-                        aria-label={t('ai:Select all')}
-                        onChange={(_event, checked) => (checked ? onSelectAll() : onSelectNone())}
-                        isChecked={isChecked}
-                      >
-                        {selectedIDs.length} {t('ai:selected')}
-                      </DropdownToggleCheckbox>,
-                    ]}
-                    onToggle={onSelectToggle}
-                  />
-                }
-                isOpen={selectOpen}
-                dropdownItems={[
-                  <DropdownItem key="select-all" onClick={onSelectAll}>
-                    {t('ai:Select all')}
-                  </DropdownItem>,
-                  <DropdownItem key="select-none" onClick={onSelectNone}>
-                    {t('ai:Select none')}
-                  </DropdownItem>,
-                ]}
-              />
-            </ToolbarItem>
+            <ToolbarItem>{SelectDropdown}</ToolbarItem>
             {children}
             <ToolbarItem>
               {isDisabled ? (

package/lib/common/components/operators/operatorSpecs.tsx

@@ -30,6 +30,7 @@ import {
   AUTHORINO_OPERATOR_LINK,
   CNV_LINK,
   FENCE_AGENTS_REMEDIATION_LINK,
+  getKmmDocsLink,
   getKubeDeschedulerLink,
   getLsoLink,
   getLvmsDocsLink,
@@ -38,9 +39,9 @@ import {
   getNodeFeatureDiscoveryLink,
   getNvidiaGpuLink,
   getServiceMeshLink,
-  KMM_LINK,
   MTV_LINK,
   NODE_HEALTHCHECK_LINK,
+  NODE_MAINTENANCE_LINK,
   ODF_LINK,
   ODF_REQUIREMENTS_LINK,
   OPENSHIFT_AI_LINK,
@@ -54,6 +55,7 @@ import {
 import { getMajorMinorVersion } from '../../utils';
 import { useNewFeatureSupportLevel } from '../newFeatureSupportLevels';
 
+// TODO check if it's unused and it can be deleted in favor of "isMajorMinorVersionEqualOrGreater"
 export const isOCPVersionEqualsOrMore = (
   openshiftVersion: string,
   ocpVersionToCompare: string,
@@ -146,9 +148,10 @@ export const getOperatorSpecs = (useLVMS?: boolean): { [key: string]: OperatorSp
     [OPERATOR_NAME_KMM]: {
       title: 'Kernel Module Management',
       featureId: 'KMM',
-      Description: () => (
+      Description: ({ openshiftVersion }) => (
         <>
-          Management of kernel modules. <ExternalLink href={KMM_LINK}>Learn more</ExternalLink>
+          Management of kernel modules.{' '}
+          <ExternalLink href={getKmmDocsLink(openshiftVersion)}>Learn more</ExternalLink>
         </>
       ),
     },
@@ -214,7 +217,7 @@ export const getOperatorSpecs = (useLVMS?: boolean): { [key: string]: OperatorSp
       Description: () => (
         <>
           Place nodes in maintenance mode.{' '}
-          <ExternalLink href={NODE_HEALTHCHECK_LINK}>Learn more</ExternalLink>
+          <ExternalLink href={NODE_MAINTENANCE_LINK}>Learn more</ExternalLink>
         </>
       ),
       notStandalone: true,

package/lib/common/components/storage/DisksTable.tsx

@@ -217,7 +217,7 @@ const DisksTable = ({
       <Tbody>
         {rows.map((row, i) => (
           // eslint-disable-next-line no-console
-          <Tr key={`disk-row-${row.key}`} data-testid={`disk-row-${row.key}-row${i}`}>
+          <Tr key={`disk-row-${row.key}`} data-testid={`disk-row-${row.key}-host-${host.id}`}>
             {row.cells.map((cell, j) => (
               <Td key={`cell-${i}-${j}`} {...cell.props}>
                 {cell.title}

package/lib/common/components/ui/ClusterEventsToolbar.tsx

@@ -235,6 +235,7 @@ const ClusterEventsToolbar = ({
               isOpen={isHostExpanded}
               onSelect={(e, value) => onHostSelect(value as string, isSelectEventChecked(e))}
               onOpenChange={onHostToggle}
+              isScrollable
               toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
                 <MenuToggle
                   id="cluster-events-hosts-dropdown-button"

package/lib/common/components/ui/OpenShiftVersionDropdown.tsx

@@ -5,15 +5,13 @@ import {
   FormHelperText,
   HelperTextItem,
   Button,
-} from '@patternfly/react-core';
-import {
   DropdownItem,
-  DropdownToggle,
+  MenuToggle,
+  MenuToggleElement,
   Dropdown,
   DropdownGroup,
-  DropdownSeparator,
-} from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+  Divider,
+} from '@patternfly/react-core';
 
 import { OpenshiftVersionOptionType } from '../../types';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
@@ -22,7 +20,6 @@ import { getFieldId } from './formik';
 import ExternalLink from './ExternalLink';
 import { OCP_RELEASES_PAGE } from '../../config';
 import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
-import './OpenShiftVersionDropdown.css';
 
 export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null;
 
@@ -77,13 +74,13 @@ export const OpenShiftVersionDropdown = ({
   let lastY: string | undefined = '';
   const dropdownItems = parsedVersionsForItems.parsedVersions.map(({ y, versions }) => {
     const items = versions.map(({ value, label }) => (
-      <DropdownItem key={value} id={value}>
+      <DropdownItem key={value} id={value} value={value}>
         {label}
       </DropdownItem>
     ));
 
     if (lastY !== null && y !== lastY) {
-      items.push(<DropdownSeparator key={`separator-${y || ''}`} />);
+      items.push(<Divider key={`separator-${y || ''}`} />);
     }
     lastY = y;
     return items;
@@ -93,28 +90,24 @@ export const OpenShiftVersionDropdown = ({
   let lastCustomY: string | undefined = '';
   const customDropdownItems = parsedVersionsForCustomItems.parsedVersions.map(({ y, versions }) => {
     const customItems = versions.map(({ value, label }) => (
-      <DropdownItem key={value} id={value}>
+      <DropdownItem key={value} id={value} value={value}>
         {label}
       </DropdownItem>
     ));
-
     if (lastCustomY !== null && y !== lastCustomY) {
-      customItems.push(<DropdownSeparator key={`separator-${y || ''}`} />);
+      customItems.push(<Divider key={`separator-${y || ''}`} />);
     }
     lastCustomY = y;
-
     return customItems;
   });
 
   const dropdownGroup = [
-    <DropdownGroup label="Latest releases" key="latest-releases">
-      {dropdownItems}
-    </DropdownGroup>,
-    <DropdownGroup
-      label="Custom releases"
-      key="custom-releases"
-      hidden={customDropdownItems.length === 0}
-    >
+    dropdownItems.length && (
+      <DropdownGroup label="Latest releases" key="latest-releases">
+        {dropdownItems}
+      </DropdownGroup>
+    ),
+    <DropdownGroup label="Custom releases" key="custom-releases">
       {customDropdownItems}
     </DropdownGroup>,
     <DropdownGroup key="all-available-versions">
@@ -132,9 +125,9 @@ export const OpenShiftVersionDropdown = ({
   ];
 
   const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      const newLabel = event?.currentTarget.innerText;
-      const newValue = event?.currentTarget.id || '';
+    (event?: React.MouseEvent<Element, MouseEvent>, val?: string | number) => {
+      const newLabel = event?.currentTarget.textContent;
+      const newValue = (val as string) || '';
       if (newLabel && newValue !== 'all-versions') {
         setCurrent(newLabel);
         setValue(newValue);
@@ -144,19 +137,18 @@ export const OpenShiftVersionDropdown = ({
     [setValue],
   );
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(!isDisabled && val)}
-        toggleIndicator={CaretDownIcon}
-        isDisabled={isDisabled}
-        isText
-        className="pf-v5-u-w-100"
-      >
-        {current}
-      </DropdownToggle>
-    ),
-    [setOpen, current, isDisabled],
+  const dropdownToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={fieldId}
+      className="pf-v5-u-w-100"
+      ref={toggleRef}
+      isFullWidth
+      onClick={() => setOpen(!isOpen)}
+      isDisabled={isDisabled}
+      isExpanded={isOpen}
+    >
+      {current}
+    </MenuToggle>
   );
 
   const helperText = getHelperText && getHelperText(field.value);
@@ -170,14 +162,16 @@ export const OpenShiftVersionDropdown = ({
     >
       <Dropdown
         {...field}
-        name={name}
-        id={fieldId}
-        onSelect={onSelect}
-        dropdownItems={dropdownGroup}
-        toggle={toggle}
+        id={`${fieldId}-dropdown`}
+        shouldFocusToggleOnSelect
         isOpen={isOpen}
-        className="pf-v5-u-w-100"
-      />
+        onSelect={onSelect}
+        onOpenChange={() => setOpen(!isOpen)}
+        toggle={dropdownToggle}
+      >
+        {dropdownGroup}
+      </Dropdown>
+
       {helperText && (
         <FormHelperText>
           <HelperText>

package/lib/common/components/ui/SimpleDropdown.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import {
   DropdownItem,
-  DropdownToggle,
+  MenuToggle,
+  MenuToggleElement,
   Dropdown,
-  DropdownProps,
-} from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+  DropdownPopperProps,
+} from '@patternfly/react-core';
 import { HostRole } from '../../../common/types/hosts';
 import './SimpleDropdown.css';
 
@@ -16,7 +16,7 @@ type SimpleDropdownProps = {
   setValue: (value?: string) => void;
   isDisabled: boolean;
   idPrefix?: string;
-  menuAppendTo?: DropdownProps['menuAppendTo'];
+  menuAppendTo?: DropdownPopperProps['appendTo'];
 };
 
 export const SimpleDropdown = ({
@@ -36,37 +36,38 @@ export const SimpleDropdown = ({
   ));
 
   const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
+    (event?: React.MouseEvent<Element, MouseEvent>) => {
       setValue(event?.currentTarget.id);
       setOpen(false);
     },
     [setValue, setOpen],
   );
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(!isDisabled && val)}
-        toggleIndicator={CaretDownIcon}
-        isDisabled={isDisabled}
-        id={idPrefix ? `${idPrefix}-dropdown-toggle-items` : undefined}
-        className="role-dropdown"
-      >
-        {current || defaultValue}
-      </DropdownToggle>
-    ),
-    [setOpen, current, isDisabled, defaultValue, idPrefix],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={idPrefix ? `${idPrefix}-dropdown-toggle-items` : undefined}
+      className="role-dropdown"
+      ref={toggleRef}
+      variant="plainText"
+      onClick={() => setOpen(!isOpen)}
+      isDisabled={isDisabled}
+      isExpanded={isOpen}
+    >
+      {current || defaultValue}
+    </MenuToggle>
   );
 
   return (
     <Dropdown
       onSelect={onSelect}
-      dropdownItems={dropdownItems}
+      onOpenChange={() => setOpen(!isOpen)}
       toggle={toggle}
       isOpen={isOpen}
       isPlain
       id={idPrefix ? `${idPrefix}-dropdown-toggle` : undefined}
-      menuAppendTo={menuAppendTo}
-    />
+      popperProps={{ appendTo: menuAppendTo }}
+    >
+      {dropdownItems}
+    </Dropdown>
   );
 };