Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DateInput]: DateInput的选择框被Modal遮盖 #616

Closed
star-hamster opened this issue Mar 4, 2022 · 0 comments
Closed

[DateInput]: DateInput的选择框被Modal遮盖 #616

star-hamster opened this issue Mar 4, 2022 · 0 comments

Comments

@star-hamster
Copy link
Contributor

描述错误

DateInput的选择框被Modal遮盖

错误复现

重现行为的步骤:

  1. 打开弹窗
  2. 点击DateInput
  3. DateInput的选择框被弹窗遮挡

示例

import React from 'react';
import ReactDOM from 'react-dom';
import { DateInput,DateInputRange, Notify, Button, Form, Row, Col,Modal } from 'uiw';

function Demo(){
  const form = React.useRef(null)

  const resetDateRange = () => {
    form.current.resetForm()
  }

  const setDateRange = () => {
    form.current.setFields({dateRange:[new Date(),new Date()]})
  }

  return (
    <Modal
      title="模态对话框"
      isOpen={true}
    >
      <Form
        ref={form}
        onSubmit={({ initial, current }) => {
          if (current.date) {
            Notify.success({
              title: '提交成功!',
              description: `表单提交时间成功,时间为:${current.date}`,
            });
          } else {
            Notify.error({
              title: '提交失败!',
              description: `表单提交时间成功,时间为:${current.date},将自动填充初始化值!`,
            });
          }
        }}
        fields={{
          date: {
            initialValue: '2019/02/17',
            labelClassName: 'fieldLabel',
            labelFor: 'date-inline',
            children: <DateInput datePickerProps={{ todayButton: '今天' }} id="date-inline" />
          },
          dateRange: {
            initialValue: ['2019/02/17', '2019/02/20'],
            labelClassName: 'fieldLabel',
            labelFor: 'date-inline',
            children: <DateInputRange datePickerProps={{ todayButton: '今天' }} id="date-inline" />
          },
        }}
      >
        {({ fields, state, canSubmit }) => {
          return (
            <div>
              <Row gutter={10}>
                <Col fixed>{fields.date}</Col>
              </Row>
              <Row gutter={10}>
                <Col fixed>{fields.dateRange}</Col>
              </Row>
              <Row gutter={10}>
                <Col>
                  <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
                  <Button onClick={resetDateRange} >重置</Button>
                  <Button onClick={setDateRange}>setValue</Button>
                </Col>
              </Row>
            </div>
          )
        }}
      </Form>
    </Modal>
  )
}

ReactDOM.render(<Demo />, _mount_);

预期行为

DateInput的选择框在弹窗之上。

截图

image

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

  • UIW:4.13.5
  • 操作系统:macOS
  • 浏览器:Chrome
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant