🐛[BUG]ProFormText和ProFormSelect设置了addonAfter之后，input和select部分的宽度变得无法控制

[ideaviewes]

🐛 bug 描述

ProFormText和ProFormSelect设置了addonAfter之后，input和select部分的宽度变得无法控制

📷 复现步骤

就给ProFormSelect 或者是ProFormText设置addonAfter后就会出现这种问题

🏞 期望结果

希望select部分的宽度可以充满父级元素除了addonAfter部分的宽度，类似于给select那部分设置flex:1的效果

💻 复现代码

        <ProFormSelect
          name={"pddLogisticsId"}
          label={"快递公司"}
          showSearch={true}
          debounceTime={500}
          placeholder={"请输入快递公司名称"}
          addonAfter={
            <Tooltip title={'设置当前的公司为默认快递公司'}>
              <Button type={"link"} size={"small"}>设置默认快递公司</Button>
            </Tooltip>
          }
          request={async (params) => {
            const response = await selectLogistics({title: params.keywords})
            return response.data;
          }}
          rules={[{required: true, message: "请选择快递公司"}]}
        />

© 版本信息

• ProComponents 版本: 2.8.9
• umi 版本：4.3.24
• 浏览器环境: chrome
• 开发环境 [e.g. mac OS] windows11 x64

🚑 其他信息

设置之前：

设置之后：

[dosubot]

这是一个已知的 bug，ProFormText 和 ProFormSelect 在设置 addonAfter 后，input/select 部分的宽度会变得不可控，主要原因是内部样式（如 width: max-content 和 maxWidth: 100%）导致主控件无法自适应剩余空间，未能实现类似 flex: 1 的效果。这个问题已经被多次反馈，维护者也有尝试修复，但目前在多个字段类型（如 ProFormText、ProFormSelect、ProFormDigit、ProFormCascader）上仍未完全解决，且没有官方推荐的完美解决方案[相关讨论1] [相关讨论2] [相关讨论3]。

有用户尝试通过给内部组件加 noStyle 属性来规避布局问题，但这样会导致校验提示丢失或报错，不推荐在生产环境使用[相关讨论4]。

目前建议的临时方案是通过自定义 CSS，定位到 input/select 的父级 wrapper，尝试手动加上 flex: 1 或 width: 100%，但实际效果依赖于具体 DOM 结构和 className，可能需要你根据实际情况微调。例如：

// 假设你能定位到 input/select 的 wrapper
.ant-form-item-control-input-content > .ant-select,
.ant-form-item-control-input-content > .ant-input {
  flex: 1;
  min-width: 0;
}

但请注意，这只是 workaround，可能会受后续组件升级影响。建议关注相关 issue，等待官方彻底修复。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[ideaviewes]

我看这个问题在2022年就已经提出来了，到现在还没解决吗？

[dosubot]

这个问题到现在（2025年）依然没有彻底解决，维护者多次确认 bug 存在，并且有尝试修复，但 ProFormText、ProFormSelect 等字段类型在设置 addonAfter 后宽度异常的问题依然存在[近期反馈1][相关历史讨论]。目前只有通过自定义 CSS 给 input/select 的父级 wrapper 加 flex: 1 这类 workaround，但这不是官方方案，升级后可能失效。根本原因和组件内部布局、以及部分上游 antd 组件的限制有关。建议关注相关 issue，等待后续官方修复。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[chenJJ-88]

这里自己设置一下 width 就行

[ideaviewes]

@chenJJ-88 ,

不管用

[chenJJ-88]

@chenJJ-88 ，

不管用

<ProFormText width={150} addonAfter={

             <Button type={"link"} size={"small"}>设置默认快递公司</Button>

         }  name="name" label="name" />

这样自己调整一下吧