[Select]Select.AutoComplete与Field混合使用时无法在重置Field后正确重置可选项

[zqh971026]

Component

Select

Reproduction link

https://hitu.antgroup-inc.cn/codeblocks/f2bece99

Code

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Button, Field, Form, Select } from '@alifd/next';
import '@alifd/next/dist/next.css';

const dataSource = ['a', 'b', 'c', 'd'].map((item) => ({
  label: item,
  value: item,
}));

const App = () => {
  const field = Field.useField();
  return (
    <div>
      <Form field={field}>
        <Form.Item label="Test">
          <Select.AutoComplete name="test" dataSource={dataSource} />
        </Form.Item>
      </Form>
      <Button onClick={() => field.resetToDefault()}>Reset</Button>
    </div>
  );
};

createRoot(document.getElementById('root')!).render(<App />);

Steps to reproduce

在Select中选择"a" -> 点击下方的Reset按钮 -> 重新点击Select，此时可选项只有"a"

[github-actions[bot]]

这是您为 Fusion/Next 提的第一个 issue，感谢您对 Fusion 的信任和支持，我们会尽快进行处理。

[eternalsky]

重置只会重置值，而不会重置其他属性。如果需要联动重置值，可以在调 reset 的时候自己把 dataSource 重置回来。

[zqh971026]

上述例子中，中传入的dataSource是固定的：

[
  {label: 'a', value: 'a'},
  {label: 'b', value: 'b'},
  {label: 'c', value: 'c'},
  {label: 'd', value: 'd'}
]

可选项的展示筛选是组件自行完成的，值重置后，应该会展示全部可选项才对。

[zqh971026]

@eternalsky

[zizairufengLT]

@zqh971026

目前快速的解决方法有两种：

1. 如果你的数据源不会变的话，推荐用children属性传入数据

   <Select.AutoComplete name="test">
   <Select.Option value={1}>1</Select.Option>
   <Select.Option value={2}>2</Select.Option>
   </Select.AutoComplete>

2. 如果数据源会动态变化的话，推荐用dataSource属性动态渲染数据，上述的代码可以将dataSource数组移到组件内

   
   const App = () => {
   const dataSource = ['a', 'b', 'c', 'd'].map((item) => ({
   label: item,
   value: item,
   }));
   const field = Field.useField();
   return (
   <div>
     <Form field={field}>
       <Form.Item label="Test">
         <Select.AutoComplete name="test" dataSource={dataSource} />
       </Form.Item>
     </Form>
     <Button onClick={() => field.resetToDefault()}>Reset</Button>
   </div>
   );
   };

createRoot(document.getElementById('root')!).render()

下个版本这个问题应该会修复，可以关注下

[eternalsky]

fix in 1.27.23, https://hitu.antgroup-inc.cn/codeblocks/c1b98471