fix: Popover / Tooltip jump when height change (#44976)

* chore: use dynamicInset

* test: update snapshot

* test: update snapshot

* chore: bump rc-trigger

* chore: update snapshot

components/_util/placements.ts

@@ -1,5 +1,6 @@
 /* eslint-disable default-case */
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
+
 import { getArrowOffset } from '../style/placementArrow';
 
 export interface AdjustOverflow {
@@ -155,6 +156,7 @@ export default function getPlacements(config: PlacementsConfig) {
     const placementInfo = {
       ...template,
       offset: [0, 0],
+      dynamicInset: true,
     };
     placementMap[key] = placementInfo;
 

components/popconfirm/__tests__/__snapshots__/index.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Popconfirm rtl render component should be rendered correctly in RTL dir
 exports[`Popconfirm should show overlay when trigger is clicked 1`] = `
 <div
   class="ant-popover ant-popconfirm ant-popover-placement-top"
-  style="--arrow-x: 0px; --arrow-y: 6px; left: 0px; top: -12px; box-sizing: border-box;"
+  style="--arrow-x: 0px; --arrow-y: 6px; left: 0px; top: -1000vh; box-sizing: border-box; bottom: 12px;"
 >
   <div
     class="ant-popover-arrow"

components/select/useBuiltinPlacements.tsx

@@ -1,4 +1,5 @@
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
+
 import type { PopupOverflow } from '../config-provider/context';
 
 const getBuiltInPlacements = (popupOverflow?: PopupOverflow): Record<string, AlignType> => {
@@ -11,9 +12,7 @@ const getBuiltInPlacements = (popupOverflow?: PopupOverflow): Record<string, Ali
       shiftY: true,
     },
     htmlRegion,
-    _experimental: {
-      dynamicInset: true,
-    },
+    dynamicInset: true,
   };
 
   return {

components/slider/__tests__/__snapshots__/index.test.tsx.snap

@@ -102,7 +102,7 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
 exports[`Slider should show tooltip when hovering slider handler 2`] = `
 <div
   class="ant-tooltip ant-zoom-big-fast-leave ant-zoom-big-fast-leave-start ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
-  style="--arrow-x: 0px; --arrow-y: 0px; left: 0px; top: 0px; box-sizing: border-box; pointer-events: none;"
+  style="--arrow-x: 0px; --arrow-y: 0px; left: 0px; top: -1000vh; box-sizing: border-box; bottom: 0px; pointer-events: none;"
 >
   <div
     class="ant-tooltip-arrow"

components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -66,11 +66,11 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </span>
   </div>
   <div
-    style="margin-left: 70px; display: flex; flex-wrap: nowrap; column-gap: 8px;"
+    style="margin-left: 78px; display: flex; flex-wrap: nowrap; column-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width: 70px;"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -100,7 +100,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 70px;"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -130,7 +130,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 70px;"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -160,7 +160,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    style="width: 70px; float: left; display: flex; flex-direction: column; row-gap: 8px;"
+    style="width: 78px; float: left; display: flex; flex-direction: column; row-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
@@ -251,7 +251,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    style="width: 70px; margin-left: 304px; display: flex; flex-direction: column; row-gap: 8px;"
+    style="width: 78px; margin-left: 336px; display: flex; flex-direction: column; row-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
@@ -342,11 +342,11 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    style="margin-left: 70px; clear: both; display: flex; flex-wrap: nowrap; column-gap: 8px;"
+    style="margin-left: 78px; clear: both; display: flex; flex-wrap: nowrap; column-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width: 70px;"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -376,7 +376,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 70px;"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -406,7 +406,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 70px;"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1640,10 +1640,11 @@ exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 2
 exports[`renders components/tooltip/demo/placement.tsx extend context correctly 1`] = `
 <div>
   <div
-    style="margin-left: 70px; white-space: nowrap;"
+    style="display: flex; margin-left: 78px; white-space: nowrap; column-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1673,6 +1674,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1702,6 +1704,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1731,10 +1734,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
   </div>
   <div
-    style="width: 70px; float: left;"
+    style="display: flex; flex-direction: column; width: 78px; float: left; row-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1764,6 +1768,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1793,6 +1798,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1822,10 +1828,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
   </div>
   <div
-    style="width: 70px; margin-left: 304px;"
+    style="display: flex; flex-direction: column; width: 78px; margin-left: 336px; row-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1855,6 +1862,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1884,6 +1892,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1913,10 +1922,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
   </div>
   <div
-    style="margin-left: 70px; clear: both; white-space: nowrap;"
+    style="display: flex; margin-left: 78px; clear: both; white-space: nowrap; column-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1946,6 +1956,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1975,6 +1986,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>

components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap

@@ -66,11 +66,11 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </span>
   </div>
   <div
-    style="margin-left:70px;display:flex;flex-wrap:nowrap;column-gap:8px"
+    style="margin-left:78px;display:flex;flex-wrap:nowrap;column-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width:70px"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -79,7 +79,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:70px"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -88,7 +88,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:70px"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -97,7 +97,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="width:70px;float:left;display:flex;flex-direction:column;row-gap:8px"
+    style="width:78px;float:left;display:flex;flex-direction:column;row-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
@@ -125,7 +125,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="width:70px;margin-left:304px;display:flex;flex-direction:column;row-gap:8px"
+    style="width:78px;margin-left:336px;display:flex;flex-direction:column;row-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
@@ -153,11 +153,11 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="margin-left:70px;clear:both;display:flex;flex-wrap:nowrap;column-gap:8px"
+    style="margin-left:78px;clear:both;display:flex;flex-wrap:nowrap;column-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width:70px"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -166,7 +166,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:70px"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -175,7 +175,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:70px"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -733,10 +733,11 @@ exports[`renders components/tooltip/demo/disabled.tsx correctly 1`] = `
 exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
 <div>
   <div
-    style="margin-left:70px;white-space:nowrap"
+    style="display:flex;margin-left:78px;white-space:nowrap;column-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -745,6 +746,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -753,6 +755,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -761,10 +764,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="width:70px;float:left"
+    style="display:flex;flex-direction:column;width:78px;float:left;row-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -773,6 +777,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -781,6 +786,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -789,10 +795,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="width:70px;margin-left:304px"
+    style="display:flex;flex-direction:column;width:78px;margin-left:336px;row-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -801,6 +808,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -809,6 +817,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -817,10 +826,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="margin-left:70px;clear:both;white-space:nowrap"
+    style="display:flex;margin-left:78px;clear:both;white-space:nowrap;column-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -829,6 +839,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -837,6 +848,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>

components/tooltip/demo/arrow.tsx

@@ -3,7 +3,7 @@ import { Button, Divider, Segmented, Tooltip } from 'antd';
 
 const text = <span>prompt text</span>;
 
-const buttonWidth = 70;
+const buttonWidth = 78;
 const gap = 8;
 
 const btnProps = {

components/tooltip/demo/placement.tsx

@@ -3,52 +3,83 @@ import { Button, Tooltip } from 'antd';
 
 const text = <span>prompt text</span>;
 
-const buttonWidth = 70;
+const buttonWidth = 78;
+const gap = 8;
+
+const btnProps = {
+  style: {
+    width: buttonWidth,
+  },
+};
 
 const App: React.FC = () => (
   <div>
-    <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
+    <div style={{ display: 'flex', marginLeft: buttonWidth, whiteSpace: 'nowrap', columnGap: gap }}>
       <Tooltip placement="topLeft" title={text}>
-        <Button>TL</Button>
+        <Button {...btnProps}>TL</Button>
       </Tooltip>
       <Tooltip placement="top" title={text}>
-        <Button>Top</Button>
+        <Button {...btnProps}>Top</Button>
       </Tooltip>
       <Tooltip placement="topRight" title={text}>
-        <Button>TR</Button>
+        <Button {...btnProps}>TR</Button>
       </Tooltip>
     </div>
-    <div style={{ width: buttonWidth, float: 'left' }}>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: buttonWidth,
+        float: 'left',
+        rowGap: gap,
+      }}
+    >
       <Tooltip placement="leftTop" title={text}>
-        <Button>LT</Button>
+        <Button {...btnProps}>LT</Button>
       </Tooltip>
       <Tooltip placement="left" title={text}>
-        <Button>Left</Button>
+        <Button {...btnProps}>Left</Button>
       </Tooltip>
       <Tooltip placement="leftBottom" title={text}>
-        <Button>LB</Button>
+        <Button {...btnProps}>LB</Button>
       </Tooltip>
     </div>
-    <div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: buttonWidth,
+        marginLeft: buttonWidth * 4 + 24,
+        rowGap: gap,
+      }}
+    >
       <Tooltip placement="rightTop" title={text}>
-        <Button>RT</Button>
+        <Button {...btnProps}>RT</Button>
       </Tooltip>
       <Tooltip placement="right" title={text}>
-        <Button>Right</Button>
+        <Button {...btnProps}>Right</Button>
       </Tooltip>
       <Tooltip placement="rightBottom" title={text}>
-        <Button>RB</Button>
+        <Button {...btnProps}>RB</Button>
       </Tooltip>
     </div>
-    <div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
+    <div
+      style={{
+        display: 'flex',
+        marginLeft: buttonWidth,
+        clear: 'both',
+        whiteSpace: 'nowrap',
+        columnGap: gap,
+      }}
+    >
       <Tooltip placement="bottomLeft" title={text}>
-        <Button>BL</Button>
+        <Button {...btnProps}>BL</Button>
       </Tooltip>
       <Tooltip placement="bottom" title={text}>
-        <Button>Bottom</Button>
+        <Button {...btnProps}>Bottom</Button>
       </Tooltip>
       <Tooltip placement="bottomRight" title={text}>
-        <Button>BR</Button>
+        <Button {...btnProps}>BR</Button>
       </Tooltip>
     </div>
   </div>

package.json

@@ -118,7 +118,7 @@
     "@rc-component/color-picker": "~1.4.1",
     "@rc-component/mutate-observer": "^1.1.0",
     "@rc-component/tour": "~1.10.0",
-    "@rc-component/trigger": "^1.15.6",
+    "@rc-component/trigger": "^1.16.0",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "dayjs": "^1.11.1",