ui: fix popover

packages/ui-default/components/discussion/history.page.tsx

@@ -28,9 +28,12 @@ function History({ payload }) {
     return history;
   }, { enabled: !!load });
   return (
-    <Popover usePortal interactionKind="hover" position="bottom" onOpening={() => setLoad(true)}>
+    <Popover
-      <span>{i18n('Edited')} <span className="icon icon-expand_more"></span></span>
+      usePortal
-      <ol className="menu">
+      interactionKind="hover"
+      position="bottom"
+      onOpening={() => setLoad(true)}
+      content={<ol className="menu">
         {(isLoading || isError) && (
           <li className="menu__item">
             <a className="menu__link">
@@ -47,7 +50,9 @@ function History({ payload }) {
             </a>
           </li>
         ))}
-      </ol>
+      </ol>}
+    >
+      <span>{i18n('Edited')} <span className="icon icon-expand_more"></span></span>
     </Popover>
   );
 }

packages/ui-default/components/discussion/reaction.page.tsx

@@ -38,9 +38,11 @@ function Reaction({ payload, ele }) {
   const [finish, updateFinish] = React.useState(false);
   if (finish) setTimeout(() => updateFinish(false), 1000);
   return (
-    <Popover usePortal interactionKind="hover" isOpen={finish ? false : (focus ? true : undefined)}>
+    <Popover
-      <span className="icon icon-emoji"></span>
+      usePortal
-      <div>
+      interactionKind="hover"
+      isOpen={finish ? false : (focus ? true : undefined)}
+      content={<div>
         {chunk(emojiList, elesPerRow).map((line, i) => (
           <div className="row" key={+i} style={{ paddingBottom: 4, paddingTop: 4 }}>
             {line.map((emoji) => (
@@ -60,6 +62,8 @@ function Reaction({ payload, ele }) {
           </div>
         </div>
       </div>
+      }>
+      <span className="icon icon-emoji"></span>
     </Popover>
   );
 }