uiwjs / uiw

⚛️ @uiwjs A high quality UI Toolkit, A Component Library for React 16+.
https://uiwjs.github.io
MIT License
713 stars 120 forks source link

[SearchSelect<搜索选择器>]: 在表单使用时,样式出现问题 #793

Closed hy916 closed 2 years ago

hy916 commented 2 years ago

注意:根据下面内容复现错误问题,以方便测试。

描述错误

我在表单使用时,给予必填参数后,直接点击提交,提示的样式就出现问题了

错误复现

重现行为的步骤:

  1. 表单中添加必填参数
  2. 点击“提交按钮“
  3. 查看样式问题

示例代码

import ReactDOM from 'react-dom';
import React from 'react';
import { ProForm,useForm } from '@uiw-admin/components'
import { Button } from 'uiw'
const Demo = () => {
  const [state,setState] = React.useState({})
  const form = useForm()
   const [option] = React.useState([
    { value: 1, label: '苹果' },
    { value: 2, label: '西瓜' },
    { value: 3, label: '香蕉' },
    { value: 4, label: '东北大冻梨' },
    { value: 5, label: '香蕉' },
    { value: 6, label: '葡萄' },
    { value: 6, label: '哈密瓜' },
   ])
   const [loading, setLoading] = React.useState(false)
   // 模拟搜索
  const handleSearch = ( type = '' , name = '' ) => {
    if (type === 'searchSelect') {
      setLoading(true)
      setTimeout(() => {
        setLoading(false)
      }, 2000)
    }
  }
    return (
     <div>
       <ProForm
         form={form}
         title="通过form api进行表单提交"
         formType="card"
         formDatas={ [
              {
              label: 'searchSelect',
              key: 'searchSelect',
              widget: 'searchSelect',
              option: option,
              required:true,
                rules:[{ required: true, message: '请输入' }],
              widgetProps: {
                mode:"multiple",
                onSearch: handleSearch.bind(this,'searchSelect'),
                onChange: (value) => console.log('changevalue', value),
                onSelect: (value) => console.log('selectvalue', value),
                loading: loading,
                allowClear: true,
                showSearch: true,
                style:{ width:"100%" }
              },
            },
          ]}
       />
       <Button 
        style={{ marginTop:10,width:80 }} 
        type="primary" 
        onClick={async()=>{
          // 触发验证
          await form.submitvalidate();
          // 获取错误信息
          const errors = form.getError()
          if(errors && Object.keys(errors).length > 0 ) return
          const value = form.getFieldValues?.()
          setState(value)
         // 调用请求接口
       }}
       >
        保存
      </Button>
    </div>
  );
}
ReactDOM.render(<Demo />, _mount_);

预期行为

我在表单使用时,给予必填参数后,直接点击提交,提示的样式就出现问题了

截图

如图: 项目中使用:

image

文档中使用:

image

桌面(请填写以下信息):

nullptr-z commented 2 years ago

@hy916 已修复