fix(@clayui/color-picker): splotch should get focus if menu is closed…

… via 'esc'
liferay · Aug 11, 2020 · 85b52c6 · 85b52c6
1 parent e5c9994
commit 85b52c6
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/packages/clay-color-picker/src/index.tsx b/packages/clay-color-picker/src/index.tsx
@@ -233,6 +233,7 @@ const ClayColorPicker: React.FunctionComponent<IProps> = ({
 						active={active}
 						alignElementRef={triggerElementRef}
 						className="clay-color-dropdown-menu"
+						focusRefOnEsc={splotchRef}
 						onSetActive={setActive}
 						ref={dropdownContainerRef}
 					>

diff --git a/packages/clay-drop-down/src/Menu.tsx b/packages/clay-drop-down/src/Menu.tsx
@@ -132,6 +132,11 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	 */
 	hasRightSymbols?: boolean;
 
+	/**
+	 * Element ref to call focus() on after menu is closed via Escape key
+	 */
+	focusRefOnEsc?: React.RefObject<HTMLElement>;
+
 	/**
 	 * Function for setting the offset of the menu from the trigger.
 	 */
@@ -154,6 +159,7 @@ const ClayDropDownMenu = React.forwardRef<HTMLDivElement, IProps>(
 			className,
 			hasLeftSymbols,
 			hasRightSymbols,
+			focusRefOnEsc,
 			offsetFn = (points) =>
 				OFFSET_MAP[points.join('') as keyof typeof OFFSET_MAP] as [
 					number,
@@ -171,7 +177,8 @@ const ClayDropDownMenu = React.forwardRef<HTMLDivElement, IProps>(
 
 		useDropdownCloseInteractions(
 			[alignElementRef, subPortalRef],
-			onSetActive
+			onSetActive,
+			focusRefOnEsc
 		);
 
 		React.useLayoutEffect(() => {

diff --git a/packages/clay-drop-down/src/hooks.ts b/packages/clay-drop-down/src/hooks.ts
@@ -13,7 +13,8 @@ export function useDropdownCloseInteractions(
 	nodeRefs:
 		| React.RefObject<HTMLElement>
 		| Array<React.RefObject<HTMLElement>>,
-	setActive: (val: boolean) => void
+	setActive: (val: boolean) => void,
+	focusRefOnEsc?: React.RefObject<HTMLElement>
 ) {
 	React.useEffect(() => {
 		const handleClick = (event: MouseEvent) => {
@@ -32,8 +33,15 @@ export function useDropdownCloseInteractions(
 			}
 		};
 
-		const handleEsc = (event: KeyboardEvent) =>
-			event.key === Keys.Esc && setActive(false);
+		const handleEsc = (event: KeyboardEvent) => {
+			if (event.key === Keys.Esc) {
+				if (focusRefOnEsc && focusRefOnEsc.current) {
+					focusRefOnEsc.current.focus();
+				}
+
+				return setActive(false);
+			}
+		};
 
 		window.addEventListener('mousedown', handleClick);
 		window.addEventListener('keydown', handleEsc);