pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

🐛[BUG] ProFormColorPicker未按照预期赋值及禁用透明色无效

Open bugfix2020 opened this issue 1 year ago • 1 comments

🐛 bug 描述

  1. 在ModalForm中使用 formRef.current?.setFieldsValue({ }) 为ProFormColorPicker设置颜色 仅点开组件后输入框内有值;
  2. ProFormColorPicker设置 fieldProps={{ disableAlpha: true }} 禁用透明色无效

📷 复现步骤

见下方复现代码

🏞 期望结果

图中红色框位置颜色同步及禁用透明效果

image

💻 复现代码

`tsx import { useState, useRef } from "react"; import { ModalForm, ProFormColorPicker } from "@ant-design/pro-components";

export default function App() { const [open, setOpen] = useState(false);

const formRef = useRef(null);

return ( <div className="App"> <button onClick={() => { setOpen(true); formRef.current?.setFieldsValue({ color: "#f00" }); }} /> <ModalForm grid layout="horizontal" width={450} open={open} onOpenChange={setOpen} formRef={formRef} autoFocusFirstInput modalProps={{ forceRender: true, destroyOnClose: true, maskClosable: false, }} submitTimeout={2000} > <ProFormColorPicker name="color" label="字幕颜色" rules={[{ required: true, message: "请选择字幕颜色" }]} placeholder="请选择字幕颜色" fieldProps={{ disableAlpha: true }} /> </ModalForm> ); } `

© 版本信息

  • "@ant-design/pro-components": "^2.6.48"
  • node v21.4.0
  • npm 10.2.4
  • Chrom 版本 121.0.6167.85(正式版本) (arm64)
  • 开发环境 [mac OS 14.3 (23D56)]

bugfix2020 avatar Feb 02 '24 09:02 bugfix2020

附codesandbox链接 https://codesandbox.io/p/sandbox/proformcolorpicker-bug-znj2fh?file=%2Fsrc%2FApp.js%3A6%2C1

bugfix2020 avatar Feb 02 '24 10:02 bugfix2020