From 9ce3a9686284e7a68134c7de75b45ffd7878e4ae Mon Sep 17 00:00:00 2001
From: Whitewater <me@waterwater.moe>
Date: Tue, 16 May 2023 03:01:27 -0700
Subject: [PATCH] fix: unexpected undefined class in popup (#2394)

---
 .../app-sidebar/app-updater-button/index.tsx         |  1 -
 packages/component/src/theme/theme.css.ts            |  6 ++++++
 packages/component/src/ui/popper/popper.tsx          | 12 +++++++++---
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/component/src/components/app-sidebar/app-updater-button/index.tsx b/packages/component/src/components/app-sidebar/app-updater-button/index.tsx
index df05bf422a..571bb92234 100644
--- a/packages/component/src/components/app-sidebar/app-updater-button/index.tsx
+++ b/packages/component/src/components/app-sidebar/app-updater-button/index.tsx
@@ -15,7 +15,6 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
 
   return (
     <button
-      data-testid="new-page-button"
       style={style}
       className={clsx([styles.root, className])}
       onClick={() => {
diff --git a/packages/component/src/theme/theme.css.ts b/packages/component/src/theme/theme.css.ts
index 3bc8b0dbb5..299c8f3bbf 100644
--- a/packages/component/src/theme/theme.css.ts
+++ b/packages/component/src/theme/theme.css.ts
@@ -15,3 +15,9 @@ globalStyle('html', {
 globalStyle('html[data-theme="dark"]', {
   vars: darkCssVariables,
 });
+
+if (process.env.NODE_ENV === 'development') {
+  globalStyle('.undefined', {
+    border: '5px solid red !important',
+  });
+}
diff --git a/packages/component/src/ui/popper/popper.tsx b/packages/component/src/ui/popper/popper.tsx
index 3ce60c67fd..fb4f69158e 100644
--- a/packages/component/src/ui/popper/popper.tsx
+++ b/packages/component/src/ui/popper/popper.tsx
@@ -97,6 +97,10 @@ export const Popper = ({
     };
   });
 
+  const mergedClass = [anchorClassName, children.props.className]
+    .filter(Boolean)
+    .join(' ');
+
   return (
     <ClickAwayListener
       onClickAway={() => {
@@ -122,9 +126,11 @@ export const Popper = ({
           },
           onPointerEnter: onPointerEnterHandler,
           onPointerLeave: onPointerLeaveHandler,
-          className: `${anchorClassName ? anchorClassName + ' ' : ''}${
-            children.props.className
-          }`,
+          ...(mergedClass
+            ? {
+                className: mergedClass,
+              }
+            : {}),
         })}
         {content && (
           <BasicStyledPopper