Skip to content

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

@javionlog

Description

@javionlog

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions