diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx index 8cd404b36c1..c1678c1e26c 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -72,7 +72,7 @@ export interface DropdownProps extends MenuProps, OUIAProps { /** @beta Flag indicating the first menu item should be focused after opening the dropdown. */ shouldFocusFirstItemOnOpen?: boolean; /** Flag indicating if scroll on focus of the first menu item should occur. */ - preventScrollOnItemFocus?: boolean; + shouldpreventScrollOnItemFocus?: boolean; } const DropdownBase: React.FunctionComponent = ({ @@ -94,7 +94,7 @@ const DropdownBase: React.FunctionComponent = ({ menuHeight, maxMenuHeight, shouldFocusFirstItemOnOpen = true, - preventScrollOnItemFocus = true, + shouldpreventScrollOnItemFocus = true, ...props }: DropdownProps) => { const localMenuRef = React.useRef(); @@ -117,7 +117,7 @@ const DropdownBase: React.FunctionComponent = ({ ) { if (onOpenChangeKeys.includes(event.key)) { onOpenChange(false); - toggleRef.current?.focus({ preventScroll: preventScrollOnItemFocus }); + toggleRef.current?.focus({ preventScroll: shouldpreventScrollOnItemFocus }); } } }; @@ -128,7 +128,7 @@ const DropdownBase: React.FunctionComponent = ({ const firstElement = menuRef?.current?.querySelector( 'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])' ); - firstElement && (firstElement as HTMLElement).focus({ preventScroll: preventScrollOnItemFocus }); + firstElement && (firstElement as HTMLElement).focus({ preventScroll: shouldpreventScrollOnItemFocus }); } // If the event is not on the toggle and onOpenChange callback is provided, close the menu diff --git a/packages/react-core/src/components/Menu/MenuContainer.tsx b/packages/react-core/src/components/Menu/MenuContainer.tsx index 6349de255a5..857a5fc9192 100644 --- a/packages/react-core/src/components/Menu/MenuContainer.tsx +++ b/packages/react-core/src/components/Menu/MenuContainer.tsx @@ -38,7 +38,7 @@ export interface MenuContainerProps { /** Additional properties to pass to the Popper */ popperProps?: MenuPopperProps; /** Flag indicating if scroll on focus of the first menu item should occur. */ - preventScrollOnItemFocus?: boolean; + shouldpreventScrollOnItemFocus?: boolean; } /** @@ -55,7 +55,7 @@ export const MenuContainer: React.FunctionComponent = ({ zIndex = 9999, popperProps, onOpenChangeKeys = ['Escape', 'Tab'], - preventScrollOnItemFocus = true + shouldpreventScrollOnItemFocus = true }: MenuContainerProps) => { React.useEffect(() => { const handleMenuKeys = (event: KeyboardEvent) => { @@ -66,7 +66,7 @@ export const MenuContainer: React.FunctionComponent = ({ ) { if (onOpenChangeKeys.includes(event.key)) { onOpenChange(false); - toggleRef.current?.focus({ preventScroll: preventScrollOnItemFocus }); + toggleRef.current?.focus({ preventScroll: shouldpreventScrollOnItemFocus }); } } }; @@ -77,7 +77,7 @@ export const MenuContainer: React.FunctionComponent = ({ const firstElement = menuRef?.current?.querySelector( 'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])' ); - firstElement && (firstElement as HTMLElement).focus({ preventScroll: preventScrollOnItemFocus }); + firstElement && (firstElement as HTMLElement).focus({ preventScroll: shouldpreventScrollOnItemFocus }); } // If the event is not on the toggle and onOpenChange callback is provided, close the menu diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx index 23aa72f6566..f2a750ad812 100644 --- a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx +++ b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx @@ -57,7 +57,7 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps HTMLElement) | 'inline'; /** Flag indicating if scroll on focus of the first menu item should occur. */ - preventScrollOnItemFocus?: boolean; + shouldpreventScrollOnItemFocus?: boolean; } export const PaginationOptionsMenu: React.FunctionComponent = ({ @@ -83,7 +83,7 @@ export const PaginationOptionsMenu: React.FunctionComponent null as any, containerRef, appendTo, - preventScrollOnItemFocus = true + shouldpreventScrollOnItemFocus = true }: PaginationOptionsMenuProps) => { const [isOpen, setIsOpen] = React.useState(false); const toggleRef = React.useRef(null); @@ -126,7 +126,7 @@ export const PaginationOptionsMenu: React.FunctionComponent = ({ @@ -101,7 +101,7 @@ const SelectBase: React.FunctionComponent = ({ menuHeight, maxMenuHeight, isScrollable, - preventScrollOnItemFocus = true, + shouldpreventScrollOnItemFocus = true, ...props }: SelectProps & OUIAProps) => { const localMenuRef = React.useRef(); @@ -124,7 +124,7 @@ const SelectBase: React.FunctionComponent = ({ if (onOpenChangeKeys.includes(event.key)) { event.preventDefault(); onOpenChange(false); - toggleRef.current?.focus({ preventScroll: preventScrollOnItemFocus }); + toggleRef.current?.focus({ preventScroll: shouldpreventScrollOnItemFocus }); } } }; @@ -133,7 +133,7 @@ const SelectBase: React.FunctionComponent = ({ // toggle was opened, focus on first menu item if (isOpen && shouldFocusFirstItemOnOpen && toggleRef.current?.contains(event.target as Node)) { const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)'); - firstElement && (firstElement as HTMLElement).focus({ preventScroll: preventScrollOnItemFocus }); + firstElement && (firstElement as HTMLElement).focus({ preventScroll: shouldpreventScrollOnItemFocus }); } // If the event is not on the toggle and onOpenChange callback is provided, close the menu diff --git a/packages/react-core/src/components/Tabs/OverflowTab.tsx b/packages/react-core/src/components/Tabs/OverflowTab.tsx index 4db876c27b6..fe0c8dc1bf0 100644 --- a/packages/react-core/src/components/Tabs/OverflowTab.tsx +++ b/packages/react-core/src/components/Tabs/OverflowTab.tsx @@ -22,7 +22,7 @@ export interface OverflowTabProps extends React.HTMLProps { /** z-index of the overflow tab */ zIndex?: number; /** Flag indicating if scroll on focus of the first menu item should occur. */ - preventScrollOnItemFocus?: boolean; + shouldpreventScrollOnItemFocus?: boolean; } export const OverflowTab: React.FunctionComponent = ({ @@ -32,7 +32,7 @@ export const OverflowTab: React.FunctionComponent = ({ defaultTitleText = 'More', toggleAriaLabel, zIndex = 9999, - preventScrollOnItemFocus = true, + shouldpreventScrollOnItemFocus = true, ...props }: OverflowTabProps) => { const menuRef = React.useRef(); @@ -81,7 +81,7 @@ export const OverflowTab: React.FunctionComponent = ({ if (menuRef?.current) { const firstElement = menuRef.current.querySelector('li > button,input:not(:disabled)'); - firstElement && (firstElement as HTMLElement).focus({ preventScroll: preventScrollOnItemFocus }); + firstElement && (firstElement as HTMLElement).focus({ preventScroll: shouldpreventScrollOnItemFocus }); } };