fix: improve upload component scrolling issue during form validation #45410

Wxh16144 · 2023-10-18T10:51:54Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

一个历史遗漏问题，表单滚动到错误位置需要在表单控件中绑定id，但是上传组件的 id 在一个隐藏的 input 上，所以 api 无法得到元素渲染的具体位置。所以需要将收入控件渲染在 dom 中，然后用 css 内联样式隐藏起来。

如果表单中有上传组件，则推荐 scrollToFirstError 以对象方式设置元素块在视口中居中显示。

scrollToFirstError={{
  block: 'center',
}}

📝 Changelog

Language	Changelog
🇺🇸 English	improve upload component scrolling issue during form validation
🇨🇳 Chinese	修复上传组件在表单滑动至校验失败位置错误

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

🚀 Summary

`🤖 Generated by Copilot at fcc79c3`

This pull request updates the rc-upload dependency and modifies the Upload component to fix a Safari bug and improve the style consistency and flexibility. It changes the files components/upload/style/index.ts, components/upload/Upload.tsx, and package.json.

🔍 Walkthrough

`🤖 Generated by Copilot at fcc79c3`

Fix upload button not clickable on Safari by adding custom styles and classNames to rc-upload component (link, link)
Update rc-upload dependency version to 4.4.0 in package.json to use the latest bug fixes and improvements (link)

stackblitz · 2023-10-18T10:51:57Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2023-10-18T10:52:07Z

argos-ci · 2023-10-18T11:06:45Z

The latest updates on your projects. Learn more about Argos notifications ↗︎

Waiting for the first build to start…

codecov · 2023-10-18T11:23:55Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (e665894) to head (2dbe65e).

Additional details and impacted files

@@            Coverage Diff            @@
##            master    #45410   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          743       743           
  Lines        12856     12854    -2     
  Branches      3364      3363    -1     
=========================================
- Hits         12856     12854    -2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

afc163 · 2023-10-20T09:38:32Z

components/upload/Upload.tsx

@@ -350,6 +350,12 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
    disabled: mergedDisabled,
    beforeUpload: mergedBeforeUpload,
    onChange: undefined,
+    styles: {
+      input: { display: 'unset', visibility: 'hidden' },


这两个样式为啥不放 style/index.ts 里面？

rc-upload 里面默认存在 display none 逻辑，https://github.com/react-component/upload/pull/518/files

那要不要改 rc-upload？rc-upload 再加个滚动 demo

rc-upload 没有form 滚动错误的操作。验证这个 PR 估计得本地验证了。从 issue copy 了一份可以复现代码

import React from 'react'; import { Form, Select, InputNumber, Switch, Radio, Slider, Button, Upload, Rate, } from 'antd'; import { UploadOutlined, InboxOutlined } from '@ant-design/icons'; const { Option } = Select; const formItemLayout = { labelCol: { span: 6, }, wrapperCol: { span: 14, }, }; const MUpload = (props) => { const { id, ..._props } = props; return ( <span id={id}> <Upload {..._props}>{props.children}</Upload> </span> ); }; const normFile = (e) => { console.log('Upload event:', e); if (Array.isArray(e)) { return e; } return e && e.fileList; }; const Demo = () => { const onFinish = (values) => { console.log('Received values of form: ', values); }; return ( <Form {...formItemLayout} onFinish={onFinish} scrollToFirstError={{ block: 'center', }} initialValues={{ 'input-number': 3, 'checkbox-group': ['A', 'B'], rate: 3.5, }} > <Form.Item wrapperCol={{ span: 12, offset: 6, }} > <Button type="primary" htmlType="submit"> Submit start </Button> </Form.Item> <br /> <Form.Item label="Plain Text"> <span className="ant-form-text">China</span> </Form.Item> <Form.Item name="select" label="Select" hasFeedback // rules={[ // { // required: true, // message: 'Please select your country!', // }, // ]} > <Select placeholder="Please select a country"> <Option value="china">China</Option> <Option value="usa">U.S.A</Option> </Select> </Form.Item> <Form.Item name="upload" label="Upload" valuePropName="fileList" getValueFromEvent={normFile} rules={[ { required: true, message: 'Please select your country!', }, ]} extra="longgggggggggggggggggggggggggggggggggg" > <MUpload id="upload" name="logo" action="/upload.do" listType="picture"> <Button> <UploadOutlined /> 点击上传 </Button> </MUpload> </Form.Item> <Form.Item name="select-multiple" label="Select[multiple]" // rules={[ // { // required: true, // message: 'Please select your favourite colors!', // type: 'array', // }, // ]} > <Select mode="multiple" placeholder="Please select favourite colors"> <Option value="red">Red</Option> <Option value="green">Green</Option> <Option value="blue">Blue</Option> </Select> </Form.Item> <Form.Item label="InputNumber"> <Form.Item name="input-number" noStyle> <InputNumber min={1} max={10} /> </Form.Item> <span className="ant-form-text"> machines</span> </Form.Item> <Form.Item name="switch" label="Switch" valuePropName="checked"> <Switch /> </Form.Item> <Form.Item name="slider" label="Slider"> <Slider marks={{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F', }} /> </Form.Item> <Form.Item name="radio-group" label="Radio.Group"> <Radio.Group> <Radio value="a">item 1</Radio> <Radio value="b">item 2</Radio> <Radio value="c">item 3</Radio> </Radio.Group> </Form.Item> <Form.Item name="radio-button" label="Radio.Button" // rules={[ // { // required: true, // message: 'Please pick an item!', // }, // ]} > <Radio.Group> <Radio.Button value="a">item 1</Radio.Button> <Radio.Button value="b">item 2</Radio.Button> <Radio.Button value="c">item 3</Radio.Button> </Radio.Group> </Form.Item> <Form.Item name="rate" label="Rate"> <Rate /> </Form.Item> <Form.Item label="Dragger"> <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle rules={[ { required: true, message: 'Please select your country!', }, ]} > <Upload.Dragger name="files" action="/upload.do"> <p className="ant-upload-drag-icon"> <InboxOutlined /> </p> <p className="ant-upload-text"> Click or drag file to this area to upload </p> <p className="ant-upload-hint"> Support for a single or bulk upload. </p> </Upload.Dragger> </Form.Item> </Form.Item> <Form.Item label="Plain Text"> <span style={{ display: 'inline-block', height: 200 }} className="ant-form-text">China</span> </Form.Item> <Form.Item wrapperCol={{ span: 12, offset: 6, }} > <Button type="primary" htmlType="submit"> Submit end </Button> </Form.Item> </Form> ); }; export default Demo;

不一定是 Form 的 scrollToFirstError，可以自己写个滚动的方法，验证

滚动没啥问题，这个 pr 解决的还是 upload 的 input 是一个 display: none 的问题

components/upload/style/index.ts

github-actions · 2024-03-31T16:36:38Z

👁 Visual Regression Report for PR #45410 Passed ✅

🎯 Target branch: master (e665894)
📖 View Full Report ↗︎

🎊 Congrats! No visual-regression diff found.

codesandbox-ci · 2024-03-31T17:01:57Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Wxh16144 · 2024-03-31T17:02:50Z

ant-design/components/form/style/index.ts

Lines 87 to 89 in 287dd69

    
           'input[type="file"]': { 
        
             display: 'block', 
        
           },

这段代码应该可以删除了 @MadCcc review 一下? blame 是你2年前的提交

Wxh16144 · 2024-03-31T17:03:50Z

ready~

Wxh16144 · 2024-04-01T04:46:00Z

我估计的 Preview Deploy 挂了是因为之前的 surge key 部署的不能对其进行覆盖导致的🤔

Wxh16144 · 2024-04-01T04:47:02Z

我看看 jsdom 能不能模拟滚动写个单元测试

zombieJ · 2024-04-01T05:01:05Z

感觉可以优化一下 Form 的逻辑，先看看子元素支不支持 ref，然后如果支持先用 ref 滚动，不行再 id 滚动

Wxh16144 · 2024-04-18T02:33:07Z

感觉可以优化一下 Form 的逻辑，先看看子元素支不支持 ref，然后如果支持先用 ref 滚动，不行再 id 滚动

已在 #48211 换方案修复～

Wxh16144 force-pushed the wuxh/fix-28869 branch from fcc79c3 to 1cb6802 Compare October 18, 2023 10:53

afc163 reviewed Oct 20, 2023

View reviewed changes

Wxh16144 commented Oct 20, 2023

View reviewed changes

components/upload/style/index.ts Outdated Show resolved Hide resolved

Wxh16144 marked this pull request as draft October 20, 2023 10:35

fix: improve upload component scrolling issue during form validation

797f7f1

Wxh16144 force-pushed the wuxh/fix-28869 branch from 1cb6802 to 797f7f1 Compare March 31, 2024 16:36

Wxh16144 added 2 commits April 1, 2024 00:40

chore: fix lint

215bc73

chore: update snap

6c0ff6a

Wxh16144 force-pushed the wuxh/fix-28869 branch from d589642 to 6c0ff6a Compare March 31, 2024 16:57

Wxh16144 marked this pull request as ready for review March 31, 2024 17:03

Wxh16144 requested a review from crazyair March 31, 2024 17:04

Wxh16144 and others added 2 commits April 1, 2024 09:59

Merge branch 'master' into wuxh/fix-28869

bed79e7

Merge branch 'master' into wuxh/fix-28869

2dbe65e

This comment was marked as off-topic.

Sign in to view

This was referenced Apr 1, 2024

feat(upload): support ref.nativeElenent #48210

Merged

feat(form): improve scrollToField logic #48211

Merged

Wxh16144 closed this Apr 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: improve upload component scrolling issue during form validation #45410

fix: improve upload component scrolling issue during form validation #45410

Wxh16144 commented Oct 18, 2023 •

edited

Loading

stackblitz bot commented Oct 18, 2023

github-actions bot commented Oct 18, 2023 •

edited

Loading

argos-ci bot commented Oct 18, 2023 •

edited

Loading

codecov bot commented Oct 18, 2023 •

edited

Loading

afc163 Oct 20, 2023

Wxh16144 Oct 20, 2023

crazyair Apr 1, 2024

Wxh16144 Apr 1, 2024

crazyair Apr 1, 2024

Wxh16144 Apr 1, 2024

github-actions bot commented Mar 31, 2024 •

edited

Loading

codesandbox-ci bot commented Mar 31, 2024 •

edited

Loading

Wxh16144 commented Mar 31, 2024

Wxh16144 commented Mar 31, 2024

This comment was marked as off-topic.

Wxh16144 commented Apr 1, 2024

Wxh16144 commented Apr 1, 2024

zombieJ commented Apr 1, 2024

Wxh16144 commented Apr 18, 2024

fix: improve upload component scrolling issue during form validation #45410

fix: improve upload component scrolling issue during form validation #45410

Conversation

Wxh16144 commented Oct 18, 2023 • edited Loading

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self-Check before Merge

🚀 Summary

🤖 Generated by Copilot at fcc79c3

🔍 Walkthrough

🤖 Generated by Copilot at fcc79c3

stackblitz bot commented Oct 18, 2023

github-actions bot commented Oct 18, 2023 • edited Loading

argos-ci bot commented Oct 18, 2023 • edited Loading

codecov bot commented Oct 18, 2023 • edited Loading

Codecov Report

afc163 Oct 20, 2023

Choose a reason for hiding this comment

Wxh16144 Oct 20, 2023

Choose a reason for hiding this comment

crazyair Apr 1, 2024

Choose a reason for hiding this comment

Wxh16144 Apr 1, 2024

Choose a reason for hiding this comment

crazyair Apr 1, 2024

Choose a reason for hiding this comment

Wxh16144 Apr 1, 2024

Choose a reason for hiding this comment

github-actions bot commented Mar 31, 2024 • edited Loading

👁 Visual Regression Report for PR #45410 Passed ✅

codesandbox-ci bot commented Mar 31, 2024 • edited Loading

Wxh16144 commented Mar 31, 2024

Wxh16144 commented Mar 31, 2024

This comment was marked as off-topic.

Wxh16144 commented Apr 1, 2024

Wxh16144 commented Apr 1, 2024

zombieJ commented Apr 1, 2024

Wxh16144 commented Apr 18, 2024

Wxh16144 commented Oct 18, 2023 •

edited

Loading

`🤖 Generated by Copilot at fcc79c3`

`🤖 Generated by Copilot at fcc79c3`

github-actions bot commented Oct 18, 2023 •

edited

Loading

argos-ci bot commented Oct 18, 2023 •

edited

Loading

codecov bot commented Oct 18, 2023 •

edited

Loading

github-actions bot commented Mar 31, 2024 •

edited

Loading

codesandbox-ci bot commented Mar 31, 2024 •

edited

Loading