Merge pull request #28674 from ant-design/master

2024-12-15 17:31:25 +08:00 · 2021-01-04 18:03:33 +08:00 · 2021-01-04 18:03:33 +08:00 · 64f86cb5ff
commit 64f86cb5ff
parent 9689e3e8eb 3ac343333a
14 changed files with 247 additions and 26 deletions
--- a/.github/workflows/issue-check-inactive.yml
+++ b/.github/workflows/issue-check-inactive.yml
@ -9,7 +9,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: check-inactive
-        uses: actions-cool/issues-helper@v1.4
+        uses: actions-cool/issues-helper@v1.7
        with:
          actions: 'check-inactive'
          token: ${{ secrets.ANT_BOT_TOKEN }}
--- a/.github/workflows/issue-close-require.yml
+++ b/.github/workflows/issue-close-require.yml
@ -9,7 +9,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: need reproduce
-        uses: actions-cool/issues-helper@v1.4
+        uses: actions-cool/issues-helper@v1.7
        with:
          actions: 'close-issues'
          token: ${{ secrets.ANT_BOT_TOKEN }}
@ -17,7 +17,7 @@ jobs:
          inactive-day: 3
      
      - name: needs more info
-        uses: actions-cool/issues-helper@v1.4
+        uses: actions-cool/issues-helper@v1.7
        with:
          actions: 'close-issues'
          token: ${{ secrets.ANT_BOT_TOKEN }}
--- a/.github/workflows/issue-open-check.yml
+++ b/.github/workflows/issue-open-check.yml
@ -60,7 +60,7 @@ jobs:
            * Ant Design Pro Preview : https://prosite.z23.web.core.windows.net
            
      - name: check-ie
-        if: contains(github.event.issue.body, 'ant-design-issue-helper') == true && (contains(github.event.issue.title, 'IE') == true || contains(github.event.issue.title, 'Internet Explorer') == true)
+        if: contains(github.event.issue.body, 'ant-design-issue-helper') == true && (contains(github.event.issue.title, 'IE9') == true || contains(github.event.issue.title, 'IE 9') == true || contains(github.event.issue.title, 'IE10') == true || contains(github.event.issue.title, 'IE 10') == true || contains(github.event.issue.title, 'IE11') == true || contains(github.event.issue.title, 'IE 11') == true || contains(github.event.issue.title, 'Internet Explorer') == true)
        uses: actions-cool/issues-helper@v1.2
        with:
          actions: 'add-labels'
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,8 +15,67 @@ timeline: true

 ---

+## 4.10.0
+
+`2021-01-04`
+
+🎉 Happy New Year!
+
+- 🐞 Fix the compatibility issue of less 4.0.0.
+- 🐞 Fix the problem of cursor jumping when Typography is editable. [#28545](https://github.com/ant-design/ant-design/pull/28545)
+- 🐞 Fix the problem that repeatedly clicking on expanded nodes when Tree dynamically loads data will lead to wrong status.[#28349](https://github.com/ant-design/ant-design/issues/28349) [@liuchao233](https://github.com/react-component/tree/pull/401)
+- 🐞 Fix the problem that TreeSelect & Select cannot open the dropdown menu when it's `searchValue` has value. [#28574](https://github.com/ant-design/ant-design/pull/28574)
+- 🐞 Fix Dropdown disabled menu item link style. [#28578](https://github.com/ant-design/ant-design/pull/28578)
+- 🐞 Fix Progress `steps` display accuracy issue. [#28530](https://github.com/ant-design/ant-design/pull/28530) [@gaoryrt](https://github.com/gaoryrt)
+- 🐞 Fix Radio align issue in Chrome. [#28616](https://github.com/ant-design/ant-design/pull/28616)
+- 🐞 Fix Collapse arrow position not aligned when change @collapse-header-padding variable. [#28507](https://github.com/ant-design/ant-design/pull/28507)
+- 💄 Optimize the white border style of Card images. [#28624](https://github.com/ant-design/ant-design/pull/28624)
+- Input
+  - 🐞 Fix TextArea value get cut when input chinese words. [#28456](https://github.com/ant-design/ant-design/pull/28456)
+  - 🆕 The `showCount` property of Input.TextArea now supports passing in a method to customize the display format of the number. [#28145](https://github.com/ant-design/ant-design/pull/28145) [@MrHeer](https://github.com/MrHeer)
+  - 🆕 Input `focus` supports configuring the cursor position when getting focus. [#28602](https://github.com/ant-design/ant-design/pull/28602)
+- Modal
+  - 🆕 Modal.method adds an `afterClose` callback that will be triggered after the Modal is completely closed. [#28053](https://github.com/ant-design/ant-design/pull/28053) [@liuchao233](https://github.com/liuchao233)
+  - 🐞 Fix the problem that Modal can be dragged outside the viewport. [#28438](https://github.com/ant-design/ant-design/pull/28527) [@mumiao](https://github.com/mumiao)
+- Table
+  - 🐞 Fix the problem that Table childrenColumnName and checkStrictly={false} cannot be used together. [#28568](https://github.com/ant-design/ant-design/pull/28568)
+  - 🐞 Fix Table selection abnormal behavior when inside Checkbox.Group. [#28576](https://github.com/ant-design/ant-design/pull/28576)
+  - 🐞 Fix the problem that the sticky header style is messy when there is no data. [#28323](https://github.com/ant-design/ant-design/issues/28323)
+  - 🐞 Fix the problem that `onChange` listener always receives empty list as `filters` parameter if use a custom `filterDropdown`. [#28627](https://github.com/ant-design/ant-design/pull/28627) [@Meowu](https://github.com/Meowu)
+  - 🆕 Adds `expandable.columnWidth` to customize the width of the expanded column. [#28249](https://github.com/ant-design/ant-design/pull/28249)
+  - 🆕 Adds clear all option from selection. [#28580](https://github.com/ant-design/ant-design/pull/28580) [@n0ruSh](https://github.com/ant-design/ant-design/pull/285)
+- Image
+  - 🐞 Fix the misalignment issue of Image component.[#28439](https://github.com/ant-design/ant-design/pull/28439) [@MoeCasts](https://github.com/MoeCasts)
+  - 💄 Adds preview style. [#28235](https://github.com/ant-design/ant-design/pull/28235)
+  - 🆕 Adds functionality for zoom in\out by sliding the wheel. [#react-component/image/52](https://github.com/react-component/image/pull/52) [@OmriGM](https://github.com/OmriGM)
+  - 🆕 Support separate settings url for preview images. [#react-component/image/56](https://github.com/react-component/image/pull/56) [@wangcch](https://github.com/wangcch)
+- Upload
+  - 🐞 Fix a warning even when not using `transformFile`. [#28455](https://github.com/ant-design/ant-design/pull/28455) [@YanYuanFE](https://github.com/YanYuanFE)
+  - 🐞 Fix Upload `fileList` cannot work with data that is produced by immer. [#28636](https://github.com/ant-design/ant-design/pull/28636) [@mumiao](https://github.com/mumiao)
+  - 🆕 Upload adds a new `maxCount` property to limit the number of files. [#28367](https://github.com/ant-design/ant-design/pull/28367)
+- DatePicker
+  - 🚀 Optimize the logic of `disabledDate`. [#react-component/picker/191](https://github.com/react-component/picker/pull/191)
+  - 🆕 Adds `onKeyDown` callback. [#react-component/picker/138](https://github.com/react-component/picker/pull/138) [@conquera99](https://github.com/react-component/picker/pull/138)
+- Select
+  - 🐞 Fix issue where `options` update does not trigger the selection box content update. [#react-component/select/580](https://github.com/react-component/select/pull/580) [@jameslahm](https://github.com/jameslahm)
+  - 🐞 Fix the problem that the dropdown box cannot be opened after clicking the option with `tagRender`. [react-component/select/582](https://github.com/react-component/select/pull/582) [@mumiao](https://github.com/mumiao)
+  - 🐞 Fix the problem that `tokenSeparators` can not recognize the separator correctly under Chinese input method. [#28564](https://github.com/ant-design/ant-design/issues/28564)
+  - 🆕 Adds `scrollTo` to the `ref`. [#react-component/select/565](https://github.com/react-component/select/pull/565)
+  - 🆕 `maxTagCount` supports `responsive` in `multiple` mode. [#28520](https://github.com/ant-design/ant-design/pull/28520)
+- 🆕 Slider add a new `range.draggableTrack` prop. [#28592](https://github.com/ant-design/ant-design/pull/28592)
+- 🆕 Descriptions support setting `labelStyle` & `contentStyle` directly. [#28613](https://github.com/ant-design/ant-design/pull/28613)
+- 🆕 message added a new `onClick` callback that will be triggered when the message is clicked. [#28148](https://github.com/ant-design/ant-design/pull/28148) [@ZeroTo0ne](https://github.com/ant-design/ant-design/pull/28148)
+- 🆕 The `scrollToFirstError` property of the Form adds support for setting the position for scrolling. [#28272](https://github.com/ant-design/ant-design/pull/28272) [@vouis](https://github.com/vouis)
+- 🆕 Steps support reponsive which allows to turn off reponsive change. [#28459](https://github.com/ant-design/ant-design/pull/28459)
+- 🌐 Localization
+  - 🇭🇷 Improved Croatian language support. [#28458](https://github.com/ant-design/ant-design/pull/28458)
+- TypeScript
+  - ⚒️ Fix `title` type of PageHeader. [#28374](https://github.com/ant-design/ant-design/pull/28374) [@zhukovvandrei](https://github.com/zhukovvandrei)
+
 ## 4.9.4

+`2020-12-16`
+
 - 🐞 Fix Menu delayed hover color transition in Chrome. [#28372](https://github.com/ant-design/ant-design/pull/28372)
 - 🐞 Fix Tree node connection line position problem. [#28354](https://github.com/ant-design/ant-design/pull/28354) [@maksnester](https://github.com/maksnester)
 - 💄 Fix Table fixed column `z-index` which makes Dropdown not showing on top. [#28346](https://github.com/ant-design/ant-design/pull/28346)
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,8 +15,67 @@ timeline: true

 ---

+## 4.10.0
+
+`2021-01-04`
+
+🎉 新年快乐！
+
+- 🐞 修复不兼容 less 4.0.0 的问题。
+- 🐞 修复 Typography 可编辑态光标跳动的问题。[#28545](https://github.com/ant-design/ant-design/pull/28545)
+- 🐞 修复 Tree 动态加载数据时重复点击展开节点会导致状态错误的问题。[#28349](https://github.com/ant-design/ant-design/issues/28349) [@liuchao233](https://github.com/react-component/tree/pull/401)
+- 🐞 修复 TreeSelect & Select `searchValue` 在受控且有值时，下拉菜单无法打开的问题。[#28574](https://github.com/ant-design/ant-design/pull/28574)
+- 🐞 修复 Dropdown 禁用菜单项内的链接样式。[#28578](https://github.com/ant-design/ant-design/pull/28578)
+- 🐞 修复 Progress `steps` 显示精度问题。[#28530](https://github.com/ant-design/ant-design/pull/28530) [@gaoryrt](https://github.com/gaoryrt)
+- 🐞 修复 Radio 在 Chrome 下的对齐样式问题。[#28616](https://github.com/ant-design/ant-design/pull/28616)
+- 🐞 修复 Collapse 修改 `@collapse-header-padding` 时箭头位置不居中的问题。[#28507](https://github.com/ant-design/ant-design/pull/28507)
+- 💄 优化 Card 图片白边样式。[#28624](https://github.com/ant-design/ant-design/pull/28624)
+- Input
+  - 🐞 修复 Input.TextArea 有 `maxLength` 时输入中文被截断的问题。[#28456](https://github.com/ant-design/ant-design/pull/28456)
+  - 🆕 Input.TextArea 的 `showCount` 属性现在支持传入一个方法来自定义数字的展示格式了。[#28145](https://github.com/ant-design/ant-design/pull/28145) [@MrHeer](https://github.com/MrHeer)
+  - 🆕 Input `focus` 支持配置获取焦点时的光标位置。[#28602](https://github.com/ant-design/ant-design/pull/28602)
+- Modal
+  - 🐞 修复 Modal 可以被拖拽到窗口外的问题。[#28438](https://github.com/ant-design/ant-design/pull/28527) [@mumiao](https://github.com/mumiao)
+  - 🆕 Modal.method 新增 `afterClose` 回调，会在 Modal 完全关闭后触发。[#28053](https://github.com/ant-design/ant-design/pull/28053) [@liuchao233](https://github.com/liuchao233)
+- Table
+  - 🐞 修复 `childrenColumnName` 和 `checkStrictly={false}` 无法一起使用的问题。[#28568](https://github.com/ant-design/ant-design/pull/28568)
+  - 🐞 修复 Checkbox.Group 内选择行为异常的问题。[#28576](https://github.com/ant-design/ant-design/pull/28576)
+  - 🐞 修复无数据时固定表头样式错乱的问题。[#28323](https://github.com/ant-design/ant-design/issues/28323)
+  - 🐞 修复自定义 `filterDropdown` 时 `onChange` 事件的 `filters` 参数总是接收空数组的问题。[#28627](https://github.com/ant-design/ant-design/pull/28627) [@Meowu](https://github.com/Meowu)
+  - 🆕 新增 `expandable.columnWidth` 以自定义展开列的宽度。[#28249](https://github.com/ant-design/ant-design/pull/28249)
+  - 🆕 选择项新增清空所有选项。[#28580](https://github.com/ant-design/ant-design/pull/28580) [@n0ruSh](https://github.com/ant-design/ant-design/pull/285)
+- Image
+  - 🐞 修复错位问题。[#28439](https://github.com/ant-design/ant-design/pull/28439) [@MoeCasts](https://github.com/MoeCasts)
+  - 💄 添加预览样式。[#28235](https://github.com/ant-design/ant-design/pull/28235)
+  - 🆕 支持使用鼠标滚轮缩放图片。[#react-component/image/52](https://github.com/react-component/image/pull/52) [@OmriGM](https://github.com/OmriGM)
+  - 🆕 支持单独设置预览图片。[#react-component/image/56](https://github.com/react-component/image/pull/56) [@wangcch](https://github.com/wangcch)
+- Upload
+  - 🐞 修复不使用 `transformFile` 时也会有警告的问题。[#28455](https://github.com/ant-design/ant-design/pull/28455) [@YanYuanFE](https://github.com/YanYuanFE)
+  - 🐞 修复 Upload 的 `fileList` 和 immer 数据配合使用报错问题。[#28636](https://github.com/ant-design/ant-design/pull/28636) [@mumiao](https://github.com/mumiao)
+  - 🆕 Upload 新增 `maxCount` 属性以限制文件数量。[#28367](https://github.com/ant-design/ant-design/pull/28367)
+- DatePicker
+  - 🚀 优化 `disabledDate` 逻辑。[#react-component/picker/191](https://github.com/react-component/picker/pull/191)
+  - 🆕 新增 `onKeyDown` 回调。[#react-component/picker/138](https://github.com/react-component/picker/pull/138) [@conquera99](https://github.com/react-component/picker/pull/138)
+- Select
+  - 🐞 修复 `options` 更新不会触发选择框内容更新的问题。[#react-component/select/580](https://github.com/react-component/select/pull/580) [@jameslahm](https://github.com/jameslahm)
+  - 🐞 修复使用 `tagRender` 后点击选项无法打开下拉框的问题。[react-component/select/582](https://github.com/react-component/select/pull/582) [@mumiao](https://github.com/mumiao)
+  - 🐞 修复 `tokenSeparators` 在中文输入法下无法正确识别分隔符的问题。[#28564](https://github.com/ant-design/ant-design/issues/28564)
+  - 🆕 `ref` 新增 `scrollTo` 方法。[#react-component/select/565](https://github.com/react-component/select/pull/565)
+  - 🆕 多选模式下 `maxTagCount` 支持 `responsive`。[#28520](https://github.com/ant-design/ant-design/pull/28520)
+- 🆕 Slider 新增 range.draggableTrack 以支持范围刻度整体可拖拽。[#28592](https://github.com/ant-design/ant-design/pull/28592)
+- 🆕 `message` 新增 `onClick` 回调，会在消息被点击时触发。[#28148](https://github.com/ant-design/ant-design/pull/28148) [@ZeroTo0ne](https://github.com/ant-design/ant-design/pull/28148)
+- 🆕 Descriptions 上可以统一设置 `labelStyle` 和 `contentStyle`。 [#28613](https://github.com/ant-design/ant-design/pull/28613)
+- 🆕 Form 的 `scrollToFirstError` 属性支持设置滚动的位置参数。[#28272](https://github.com/ant-design/ant-design/pull/28272) [@vouis](https://github.com/vouis)
+- 🆕 Steps 新增 reponsive 属性用于关闭响应式样式。[#28459](https://github.com/ant-design/ant-design/pull/28459)
+- 🌐 国际化
+  - 🇭🇷 改进克罗地亚语的支持。[#28458](https://github.com/ant-design/ant-design/pull/28458)
+- TypeScript
+  - 🛠 修复 PageHeader 的 `title` 的类型问题。[#28374](https://github.com/ant-design/ant-design/pull/28374) [@zhukovvandrei](https://github.com/zhukovvandrei)
+
 ## 4.9.4

+`2020-12-16`
+
 - 🐞 修复 Menu 在 Chrome 下 hover 色延迟变化的问题。[#28372](https://github.com/ant-design/ant-design/pull/28372)
 - 🐞 修复 Tree 的节点连接线在滚动时位置偏移的问题。[#28354](https://github.com/ant-design/ant-design/pull/28354) [@maksnester](https://github.com/maksnester)
 - 💄 修复 Table 固定列 `z-index` 样式让 Dropdown 无法展示在最顶层的问题。[#28346](https://github.com/ant-design/ant-design/pull/28346)
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@ -138,9 +138,9 @@
  }

  &-bordered &-cover {
+    margin-top: -1px;
    margin-right: -1px;
    margin-left: -1px;
-    transform: translateY(-1px);
  }

  &-cover {
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@ -36,7 +36,7 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca

 > When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined then `value`, `defaultValue`, and `id` props of `Input` are automatically set.

-The rest of the props of Input are exactly the same as the original [input](https://facebook.github.io/react/docs/events.html#supported-events).
+The rest of the props of Input are exactly the same as the original [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes).

 ### Input.TextArea

--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@ -37,7 +37,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg

 > 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。

-Input 的其他属性和 React 自带的 [input](https://facebook.github.io/react/docs/events.html#supported-events) 一致。
+Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes) 一致。

 ### Input.TextArea

--- a/components/notification/style/index.less
+++ b/components/notification/style/index.less
@ -206,8 +206,6 @@
  0% {
    max-height: 150px;
    margin-bottom: @notification-margin-bottom;
-    padding-top: @notification-padding-vertical;
-    padding-bottom: @notification-padding-vertical;
    opacity: 1;
  }
  100% {
--- a/components/table/tests/Table.filter.test.js
+++ b/components/table/tests/Table.filter.test.js
@ -304,6 +304,34 @@ describe('Table.filter', () => {
    expect(wrapper.find('tbody tr').length).toBe(4);
  });

+  it('should handle filteredValue and non-array filterValue as expected', () => {
+    const wrapper = mount(
+      createTable({
+        columns: [
+          {
+            ...column,
+            filteredValue: ['Lucy', 12, true],
+          },
+        ],
+      }),
+    );
+    function getFilterMenu() {
+      return wrapper.find('FilterDropdown');
+    }
+
+    expect(getFilterMenu().props().filterState.filteredKeys).toEqual(['Lucy', '12', 'true']);
+
+    wrapper.setProps({
+      columns: [
+        {
+          ...column,
+          filteredValue: null,
+        },
+      ],
+    });
+    expect(getFilterMenu().props().filterState.filteredKeys).toEqual(null);
+  });
+
  it('can be controlled by filteredValue null', () => {
    const wrapper = mount(
      createTable({
@ -453,7 +481,7 @@ describe('Table.filter', () => {
    const wrapper = mount(createTable({ onChange: handleChange }));

    wrapper.find('.ant-dropdown-trigger').first().simulate('click');
-    wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').simulate('click');
+    wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');

    expect(handleChange).not.toHaveBeenCalled();
  });
@ -842,6 +870,42 @@ describe('Table.filter', () => {
    expect(onChange).not.toHaveBeenCalled();
  });

+  it('should trigger onChange with correct params if defines custom filterDropdown', () => {
+    const onChange = jest.fn();
+    const filterDropdown = ({ setSelectedKeys, confirm }) => (
+      <div>
+        <input onChange={e => setSelectedKeys([e.target.value])} />
+        <button className="confirm-btn" type="submit" onClick={confirm}>
+          Confirm
+        </button>
+      </div>
+    );
+    const wrapper = mount(
+      createTable({
+        onChange,
+        columns: [
+          {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            filterDropdown,
+          },
+        ],
+      }),
+    );
+    wrapper.find('.ant-dropdown-trigger').first().simulate('click');
+    wrapper
+      .find('input')
+      .first()
+      .simulate('change', { target: { value: 'test' } });
+    wrapper.find('.confirm-btn').first().simulate('click');
+    expect(onChange).toHaveBeenCalled();
+    onChange.mock.calls.forEach(([, currentFilters]) => {
+      const [, val] = Object.entries(currentFilters)[0];
+      expect(val).toEqual(['test']);
+    });
+  });
+
  // https://github.com/ant-design/ant-design/issues/17089
  it('not crash when dynamic change filter', () => {
    const onChange = jest.fn();
--- a/components/table/hooks/useFilter/index.tsx
+++ b/components/table/hooks/useFilter/index.tsx
@ -34,7 +34,9 @@ function collectFilterStates<RecordType>(
    } else if (column.filters || 'filterDropdown' in column || 'onFilter' in column) {
      if ('filteredValue' in column) {
        // Controlled
-        const filteredValues = (column.filteredValue || []).map(String);
+        const filteredValues = Array.isArray(column.filteredValue)
+          ? column.filteredValue.map(String)
+          : column.filteredValue;
        filterStates.push({
          column,
          key: getColumnKey(column, columnPos),
@ -121,17 +123,21 @@ function generateFilterInfo<RecordType>(filterStates: FilterState<RecordType>[])
  const currentFilters: Record<string, (Key | boolean)[] | null> = {};

  filterStates.forEach(({ key, filteredKeys, column }) => {
-    const { filters } = column;
-    const originKeys: ColumnFilterItem['value'][] = [];
-    if (Array.isArray(filteredKeys)) {
-      filters?.forEach((filter: ColumnFilterItem) => {
-        if (filteredKeys.includes(String(filter.value))) {
-          originKeys.push(filter.value);
-        }
-      });
-      currentFilters[key] = originKeys;
+    const { filters, filterDropdown } = column;
+    if (filterDropdown) {
+      currentFilters[key] = filteredKeys || null;
    } else {
-      currentFilters[key] = null;
+      const originKeys: ColumnFilterItem['value'][] = [];
+      if (Array.isArray(filteredKeys)) {
+        filters?.forEach((filter: ColumnFilterItem) => {
+          if (filteredKeys.includes(String(filter.value))) {
+            originKeys.push(filter.value);
+          }
+        });
+        currentFilters[key] = originKeys;
+      } else {
+        currentFilters[key] = null;
+      }
    }
  });

--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@ -162,22 +162,32 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
  };

  const handleRemove = (file: UploadFile) => {
+    let currentFile: UploadFile;
    Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(ret => {
      // Prevent removing file
      if (ret === false) {
        return;
      }

-      const removedFileList = removeFileItem(file, getFileList());
+      const fileList = getFileList();
+      const removedFileList = removeFileItem(file, fileList);

      if (removedFileList) {
-        file.status = 'removed';
+        currentFile = { ...file, status: 'removed' };
+        fileList?.some(item => {
+          const matchKey = currentFile.uid !== undefined ? 'uid' : 'name';
+          if (item[matchKey] === currentFile[matchKey]) {
+            item.status = 'removed';
+            return true;
+          }
+          return false;
+        });
        if (upload.current) {
-          upload.current.abort(file);
+          upload.current.abort(currentFile);
        }

        onInternalChange({
-          file,
+          file: currentFile,
          fileList: removedFileList,
        });
      }
--- a/components/upload/tests/upload.test.js
+++ b/components/upload/tests/upload.test.js
@ -2,6 +2,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
+import produce from 'immer';
 import Upload from '..';
 import Form from '../../form';
 import { T, fileToObject, getFileItem, removeFileItem } from '../utils';
@ -326,6 +327,29 @@ describe('Upload', () => {
      expect(targetItem).toEqual(fileList.slice(1));
    });

+    it('remove fileItem and fileList with immuable data', () => {
+      const file = { uid: '-3', name: 'item3.jpg' };
+      const fileList = produce(
+        [
+          {
+            uid: '-1',
+            name: 'item.jpg',
+          },
+          {
+            uid: '-2',
+            name: 'item2.jpg',
+          },
+        ],
+        draftState => {
+          draftState.push({
+            uid: '-3',
+            name: 'item3.jpg',
+          });
+        },
+      );
+      const targetItem = removeFileItem(file, fileList);
+      expect(targetItem).toEqual(fileList.slice(0, 2));
+    });
    it('should not be able to remove fileItem', () => {
      const file = { uid: '-3', name: 'item.jpg' };
      const fileList = [
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "4.9.4",
+  "version": "4.10.0",
  "description": "An enterprise-class UI design language and React components implementation",
  "title": "Ant Design",
  "keywords": [
@ -217,6 +217,7 @@
    "husky": "^4.0.3",
    "identity-obj-proxy": "^3.0.0",
    "ignore-emit-webpack-plugin": "^2.0.6",
+    "immer": "^8.0.0",
    "immutability-helper": "^3.0.0",
    "inquirer": "^7.1.0",
    "intersection-observer": "^0.12.0",