fix: menu SSR (#319)

- replace DOM-dependent `className` ternary with explicit param
ninja · Apr 21, 2022 · 3e61a97 · 3e61a97
1 parent dff2245
commit 3e61a97
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/lib/components/menu/button.tsx b/src/lib/components/menu/button.tsx
@@ -30,7 +30,7 @@ export function ButtonMenu({
 		refMenu,
 		style,
 		setExpanded,
-	} = useMenu<HTMLButtonElement>({ classNameOverride, id });
+	} = useMenu<HTMLButtonElement>({ classNameOverride, element: "Button", id });
 
 	return (
 		<fieldset className={className} ref={refFieldset}>

diff --git a/src/lib/components/menu/index.ts b/src/lib/components/menu/index.ts
@@ -32,12 +32,14 @@ export type MenuOption =
 
 export function useMenu<T>({
 	classNameOverride,
+	element,
 	flex,
 	id,
 }: {
 	flex?: boolean;
 	id: string;
 	classNameOverride?: string;
+	element: "Button" | "Input";
 }) {
 	const [expanded, setExpanded] = useState(false);
 	const refControl = useRef<T | null>(null);
@@ -98,8 +100,7 @@ export function useMenu<T>({
 		className: classNames({
 			[styles.fieldset]: true,
 			[styles.flex]: flex,
-			[refControl instanceof HTMLInputElement ? styles.input : styles.button]:
-				true,
+			[element === "Button" ? styles.button : styles.input]: true,
 			classNameOverride,
 		}),
 		expanded,

diff --git a/src/lib/components/menu/input.tsx b/src/lib/components/menu/input.tsx
@@ -37,7 +37,12 @@ export const InputMenu = forwardRef<
 		refMenu,
 		setExpanded,
 		style,
-	} = useMenu<HTMLInputElement>({ classNameOverride, flex, id });
+	} = useMenu<HTMLInputElement>({
+		classNameOverride,
+		element: "Input",
+		flex,
+		id,
+	});
 
 	return (
 		<fieldset className={className} ref={refFieldset}>