diff --git a/packages/react-core/src/next/components/Dropdown/Dropdown.tsx b/packages/react-core/src/next/components/Dropdown/Dropdown.tsx index f61e9c66672..7b26cfb63fb 100644 --- a/packages/react-core/src/next/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/next/components/Dropdown/Dropdown.tsx @@ -23,9 +23,11 @@ export interface DropdownProps extends MenuProps { isScrollable?: boolean; /** Min width of the menu. */ minWidth?: string; + /** @hide Forwarded ref */ + innerRef?: React.Ref; } -export const Dropdown: React.FunctionComponent = ({ +const DropdownBase: React.FunctionComponent = ({ children, className, onSelect, @@ -35,13 +37,14 @@ export const Dropdown: React.FunctionComponent = ({ isPlain, isScrollable, minWidth, + innerRef, ...props }: DropdownProps) => { const localMenuRef = React.useRef(); const toggleRef = React.useRef(); const containerRef = React.useRef(); - const menuRef = (props.innerRef as React.RefObject) || localMenuRef; + const menuRef = (innerRef as React.RefObject) || localMenuRef; React.useEffect(() => { const handleMenuKeys = (event: KeyboardEvent) => { if (!isOpen && toggleRef.current?.contains(event.target as Node)) { @@ -112,4 +115,8 @@ export const Dropdown: React.FunctionComponent = ({ ); }; + +export const Dropdown = React.forwardRef((props: DropdownProps, ref: React.Ref) => ( + +)); Dropdown.displayName = 'Dropdown'; diff --git a/packages/react-core/src/next/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/next/components/Dropdown/examples/DropdownBasic.tsx index 4627344197f..d0dac9e1567 100644 --- a/packages/react-core/src/next/components/Dropdown/examples/DropdownBasic.tsx +++ b/packages/react-core/src/next/components/Dropdown/examples/DropdownBasic.tsx @@ -4,7 +4,6 @@ import { Divider, MenuToggle } from '@patternfly/react-core'; export const DropdownBasic: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); - const menuRef = React.useRef(null); const onToggleClick = () => { setIsOpen(!isOpen); @@ -18,7 +17,6 @@ export const DropdownBasic: React.FunctionComponent = () => { return ( setIsOpen(isOpen)} diff --git a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx b/packages/react-core/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx index e675975046b..801381081eb 100644 --- a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx +++ b/packages/react-core/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx @@ -4,7 +4,6 @@ import { MenuToggle } from '@patternfly/react-core'; export const DropdownWithDescriptions: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); - const menuRef = React.useRef(null); const onToggleClick = () => { setIsOpen(!isOpen); @@ -18,7 +17,6 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => { return ( { const [isOpen, setIsOpen] = React.useState(false); - const menuRef = React.useRef(null); const onToggleClick = () => { setIsOpen(!isOpen); @@ -18,7 +17,6 @@ export const DropdownWithGroups: React.FunctionComponent = () => { return ( setIsOpen(isOpen)} diff --git a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx b/packages/react-core/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx index 22f0d584b40..153b3e706ec 100644 --- a/packages/react-core/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx +++ b/packages/react-core/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx @@ -5,7 +5,6 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico export const DropdownWithKebab: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); - const menuRef = React.useRef(null); const onToggleClick = () => { setIsOpen(!isOpen); @@ -19,7 +18,6 @@ export const DropdownWithKebab: React.FunctionComponent = () => { return (