tdesign-react icon indicating copy to clipboard operation
tdesign-react copied to clipboard

[Select] 下拉选项的宽度,没有随着视窗的宽度变化而变化

Open javionlog opened this issue 2 months ago • 2 comments

tdesign-react 版本

1.15.3

重现链接

https://codesandbox.io/p/devbox/jm4gky

重现步骤

import { useState } from "react";
import { Button, Dialog, Form, Row, Col, Input, Select } from "tdesign-react";

function App() {
  const [visible, setVisible] = useState(false);
  const { FormItem, useForm } = Form;
  const [form] = useForm();
  const options = [
    {
      label: "苹果",
      value: "apple",
    },
    {
      label: "香蕉",
      value: "banana",
    },
  ];

  const colSpan = {
    xs: 12,
    sm: 12,
    md: 6,
    lg: 6,
    xl: 4,
    xxl: 4,
  };

  return (
    <div>
      <Button
        onClick={() => {
          form.reset();
          setVisible(true);
        }}
      >
        打开弹窗
      </Button>
      <Dialog visible={visible} onClose={() => setVisible(false)}>
        <Form form={form}>
          <Row gutter={[16, 16]}>
            <Col {...colSpan}>
              <FormItem name="item1">
                <Input clearable />
              </FormItem>
            </Col>
            <Col {...colSpan}>
              <FormItem name="item2">
                <Input clearable />
              </FormItem>
            </Col>
            <Col {...colSpan}>
              <FormItem name="item3">
                <Input clearable />
              </FormItem>
            </Col>
            <Col {...colSpan}>
              <FormItem name="item4">
                <Select options={options} clearable />
              </FormItem>
            </Col>
            <Col {...colSpan}>
              <FormItem name="item5">
                <Select options={options} clearable />
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Dialog>
    </div>
  );
}

export default App;

期望结果

Select 组件下拉选项宽度,可以随着视窗的宽度变化而变化

实际结果

Select 组件下拉选项宽度,没有随着视窗的宽度变化而变化

框架版本

React(19.0.0)

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

Image Image

javionlog avatar Sep 29 '25 09:09 javionlog

👋 @javionlog,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

github-actions[bot] avatar Sep 29 '25 09:09 github-actions[bot]

类似的 issue:https://github.com/Tencent/tdesign-react/issues/2850 未来会一起优化

RylanBot avatar Sep 29 '25 10:09 RylanBot