fix: 修复 SelectInput 自适应换行问题 (#1500)

src/input/Input.tsx

@@ -6,6 +6,7 @@ import {
   CloseCircleFilledIcon as TdCloseCircleFilledIcon,
 } from 'tdesign-icons-react';
 import isFunction from 'lodash/isFunction';
+import useLayoutEffect from '../_util/useLayoutEffect';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 import useConfig from '../hooks/useConfig';
 import useGlobalIcon from '../hooks/useGlobalIcon';
@@ -133,10 +134,12 @@ const Input = forwardRefWithStatics(
     const labelContent = isFunction(label) ? label() : label;
     const suffixContent = isFunction(suffix) ? suffix() : suffix;
 
-    useEffect(() => {
-      if (!autoWidth) return;
-      if (inputPreRef.current?.offsetWidth === 0) return;
-      if (inputRef.current) inputRef.current.style.width = `${inputPreRef.current?.offsetWidth}px`;
+    useLayoutEffect(() => {
+      if (!autoWidth || !inputRef.current) return;
+      // 推迟到下一帧处理防止异步渲染 input 场景宽度计算为 0
+      requestAnimationFrame(() => {
+        inputRef.current.style.width = `${inputPreRef.current?.offsetWidth}px`;
+      });
     }, [autoWidth, value, placeholder, inputRef]);
 
     useEffect(() => {

src/select-input/_example/status.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { SelectInput } from 'tdesign-react';
+import { SelectInput, Space } from 'tdesign-react';
 
 const classStyles = `
 <style>
@@ -8,16 +8,6 @@ const classStyles = `
   color: var(--td-text-color-disabled);
   line-height: 32px;
 }
-.tdesign-demo-select-input-status > div {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.tdesign-demo-select-input-status .t-select-input__wrap {
-  width: 300px;
-  height: 32px;
-}
 </style>
 `;
 
@@ -30,82 +20,72 @@ const SelectInputStatus = () => {
   }, []);
 
   return (
-    <div className="tdesign-demo-select-input-status">
-      <div>
+    <Space direction="vertical" size={32}>
+      <Space>
         <span>禁用状态：</span>
         <SelectInput
           value={selectValue}
           disabled
           placeholder="Please Select"
           tips="这是禁用状态的文本"
           panel={<div className="tdesign-demo__select-empty">暂无数据</div>}
-        ></SelectInput>
-      </div>
-      <br />
-      <br />
+        />
+      </Space>
 
-      <div>
+      <Space>
         <span>只读状态：</span>
         <SelectInput
           value={selectValue}
           readonly
           placeholder="Please Select"
           tips="这是只读状态的文本提示"
           panel={<div className="tdesign-demo__select-empty-status">暂无数据</div>}
-        ></SelectInput>
-      </div>
-      <br />
-      <br />
+        />
+      </Space>
 
-      <div>
+      <Space>
         <span>成功状态：</span>
         <SelectInput
           value={selectValue}
           status="success"
           tips="校验通过文本提示"
           placeholder="Please Select"
           panel={<div className="tdesign-demo__select-empty-status">暂无数据</div>}
-        ></SelectInput>
-      </div>
-      <br />
-      <br />
+        />
+      </Space>
 
-      <div>
+      <Space>
         <span>警告状态：</span>
         <SelectInput
           value={selectValue}
           status="warning"
           tips="校验不通过文本提示"
           placeholder="Please Select"
           panel={<div className="tdesign-demo__select-empty-status">暂无数据</div>}
-        ></SelectInput>
-      </div>
-      <br />
-      <br />
+        />
+      </Space>
 
-      <div>
+      <Space>
         <span>错误状态：</span>
         <SelectInput
           value={selectValue}
           status="error"
           tips="校验存在严重问题文本提示"
           placeholder="Please Select"
           panel={<div className="tdesign-demo__select-empty-status">暂无数据</div>}
-        ></SelectInput>
-      </div>
-      <br />
-      <br />
+        />
+      </Space>
 
-      <div>
+      <Space>
         <span>加载状态：</span>
         <SelectInput
           loading={true}
           tips="处于加载状态的文本提示"
           placeholder="Please Select"
           panel={<div className="tdesign-demo__select-empty-status">加载中...</div>}
-        ></SelectInput>
-      </div>
-    </div>
+        />
+      </Space>
+    </Space>
   );
 };
 

test/ssr/__snapshots__/ssr.test.js.snap

@@ -748,7 +748,7 @@ exports[`ssr snapshot test renders ./src/select-input/_example/multiple.jsx corr
 
 exports[`ssr snapshot test renders ./src/select-input/_example/single.jsx correctly 1`] = `"<div data-reactroot=\\"\\"><div class=\\"t-select-input\\" style=\\"width:300px\\"><div class=\\"t-input__wrap\\" value=\\"tdesign-vue\\"><div class=\\"t-input t-size-m t-align-left t-is-default t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"tdesign-vue\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/select-input/_example/status.jsx correctly 1`] = `"<div class=\\"tdesign-demo-select-input-status\\" data-reactroot=\\"\\"><div><span>禁用状态：</span><div class=\\"t-select-input__wrap\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-is-disabled t-size-m t-align-left t-is-default t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\" disabled=\\"\\"/></div></div></div><div class=\\"t-input__tips t-input__tips--default\\">这是禁用状态的文本</div></div></div><br/><br/><div><span>只读状态：</span><div class=\\"t-select-input__wrap\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\"/></div></div></div><div class=\\"t-input__tips t-input__tips--default\\">这是只读状态的文本提示</div></div></div><br/><br/><div><span>成功状态：</span><div class=\\"t-select-input__wrap\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-success t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\"/></div></div></div><div class=\\"t-input__tips t-input__tips--success\\">校验通过文本提示</div></div></div><br/><br/><div><span>警告状态：</span><div class=\\"t-select-input__wrap\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-warning t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\"/></div></div></div><div class=\\"t-input__tips t-input__tips--warning\\">校验不通过文本提示</div></div></div><br/><br/><div><span>错误状态：</span><div class=\\"t-select-input__wrap\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-error t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\"/></div></div></div><div class=\\"t-input__tips t-input__tips--error\\">校验存在严重问题文本提示</div></div></div><br/><br/><div><span>加载状态：</span><div class=\\"t-select-input__wrap\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"\\" readonly=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><div class=\\"t-loading t-loading--center t-size-s\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 14 14\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><foreignObject x=\\"1\\" y=\\"1\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg></div></span></div></div></div><div class=\\"t-input__tips t-input__tips--default\\">处于加载状态的文本提示</div></div></div></div>"`;
+exports[`ssr snapshot test renders ./src/select-input/_example/status.jsx correctly 1`] = `"<div style=\\"gap:32px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><span>禁用状态：</span></div><div class=\\"t-space-item\\"><div class=\\"t-select-input__wrap\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-is-disabled t-size-m t-align-left t-is-default t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\" disabled=\\"\\"/></div></div></div><div class=\\"t-input__tips t-input__tips--default\\">这是禁用状态的文本</div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><span>只读状态：</span></div><div class=\\"t-space-item\\"><div class=\\"t-select-input__wrap\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\"/></div></div></div><div class=\\"t-input__tips t-input__tips--default\\">这是只读状态的文本提示</div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><span>成功状态：</span></div><div class=\\"t-space-item\\"><div class=\\"t-select-input__wrap\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-success t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\"/></div></div></div><div class=\\"t-input__tips t-input__tips--success\\">校验通过文本提示</div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><span>警告状态：</span></div><div class=\\"t-space-item\\"><div class=\\"t-select-input__wrap\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-warning t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\"/></div></div></div><div class=\\"t-input__tips t-input__tips--warning\\">校验不通过文本提示</div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><span>错误状态：</span></div><div class=\\"t-space-item\\"><div class=\\"t-select-input__wrap\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-error t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\"/></div></div></div><div class=\\"t-input__tips t-input__tips--error\\">校验存在严重问题文本提示</div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><span>加载状态：</span></div><div class=\\"t-space-item\\"><div class=\\"t-select-input__wrap\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"\\" readonly=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><div class=\\"t-loading t-loading--center t-size-s\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 14 14\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><foreignObject x=\\"1\\" y=\\"1\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg></div></span></div></div></div><div class=\\"t-input__tips t-input__tips--default\\">处于加载状态的文本提示</div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test renders ./src/select-input/_example/width.jsx correctly 1`] = `"<div class=\\"tdesign-demo__select-input-width\\" data-reactroot=\\"\\"><div><span>下拉框默认宽度：</span><div class=\\"t-demo-normal t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\"/></div></div></div></div><br/><div><span>下拉框最大宽度：</span><div class=\\"t-demo-normal t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\"/></div></div></div></div><br/><div><span>与内容宽度一致：</span><div class=\\"t-demo-normal t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\"/></div></div></div></div><br/><div><span>下拉框固定宽度：</span><div class=\\"t-demo-normal t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"TDesign\\"><div class=\\"t-input t-is-readonly t-size-m t-align-left t-is-default t-input--prefix\\"><div class=\\"t-input__prefix\\"></div><input type=\\"text\\" placeholder=\\"Please Select\\" class=\\"t-input__inner\\" value=\\"TDesign\\" readonly=\\"\\"/></div></div></div></div><br/></div>"`;