fix(antd/next): fix FormItem useOverflow bug (#2830)

alibaba · Feb 16, 2022 · 5e88de2 · 5e88de2
1 parent 55d28ed
commit 5e88de2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/packages/antd/src/form-item/index.tsx b/packages/antd/src/form-item/index.tsx
@@ -123,7 +123,7 @@ export const BaseItem: React.FC<IFormItemProps> = ({ children, ...props }) => {
   const formLayout = useFormItemLayout(props)
   const { containerRef, contentRef, overflow } = useOverflow<
     HTMLDivElement,
-    HTMLLabelElement
+    HTMLSpanElement
   >()
   const {
     label,
@@ -218,8 +218,10 @@ export const BaseItem: React.FC<IFormItemProps> = ({ children, ...props }) => {
   const renderLabelText = () => {
     const labelChildren = (
       <div className={`${prefixCls}-label-content`} ref={containerRef}>
-        {asterisk && <span className={`${prefixCls}-asterisk`}>{'*'}</span>}
-        <label ref={contentRef}>{label}</label>
+        <span ref={contentRef}>
+          {asterisk && <span className={`${prefixCls}-asterisk`}>{'*'}</span>}
+          <label>{label}</label>
+        </span>
       </div>
     )
 

diff --git a/packages/next/src/form-item/index.tsx b/packages/next/src/form-item/index.tsx
@@ -124,7 +124,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
   const formLayout = useFormItemLayout(others)
   const { containerRef, contentRef, overflow } = useOverflow<
     HTMLDivElement,
-    HTMLLabelElement
+    HTMLSpanElement
   >()
   const {
     label,
@@ -216,10 +216,12 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
   const renderLabelText = () => {
     const labelChildren = (
       <div className={cls(`${prefixCls}-label-content`)} ref={containerRef}>
-        {asterisk && (
-          <span className={cls(`${prefixCls}-asterisk`)}>{'*'}</span>
-        )}
-        <label ref={contentRef}>{label}</label>
+        <span ref={contentRef}>
+          {asterisk && (
+            <span className={cls(`${prefixCls}-asterisk`)}>{'*'}</span>
+          )}
+          <label>{label}</label>
+        </span>
       </div>
     )