Antd Datepicker position is top:0 at some point

  antd, javascript, react-redux-form, reactjs

I am using antd date picker, when I add the components dynamically, which have that picker component, the position of the popup goes to top:0, Only at first add task, it working fine, at the 3rd and fourth task it shows the issue in datepicker placement.

File where I add the date picker:

import React, {useEffect, useState} from "react";
import { Form, Input, Button,TimePicker,DatePicker, Space } from 'antd';
import moment from 'moment';
import {useSelector} from "react-redux";
import actions from "../redux/actions";
import store from "../redux/store";
import tasks from "../redux/reducers";

const TaskForm = ({count,taskData}) => {
    const [form] = Form.useForm();
    const taskDetails=useSelector((state)=>{
        const {taskCount,task}=state?.reducers
        return {taskCount,task}
    })

    const{taskCount,task}=taskDetails;
  
    const onCancelTask=(e)=>{
        console.log(e.target)
    }
  

    const{userData}=taskData;
    let{assigned_user,task_time,task_date,task_msg}=userData;
    task_time=new Date(task_time * 1000).toISOString().substr(11, 8);
    task_time=moment(task_time, ["h:mm a"]).format("HH:mm")
    return (
        <div key={`createTask${count}`} id={`task${count}`}>
        <form onChange={(e)=>fieldsChange(e)} onSubmit={onFinish} id={`form${count}`}>
            <label>
                Task Description
                <input type="text" name="task_msg" defaultValue={task_msg??task_msg}  />
            </label>
            <label>
               Task Date
                <Space direction="vertical">
                        <DatePicker name={"data_picker"}   onChange={(date, dateString) => onDateChange(date, dateString, count)} defaultValue={ moment(task_date, 'YYYY-MM-DD')}  />
                    </Space>
            </label>
            <label>
                    Task Time
                    <Space direction="vertical">
                        <TimePicker   onChange={(time, timeString) => onTimeChange(time, timeString, count)}
                                      defaultValue={moment(task_time, 'H:mm a')}
                                      format="h:mm a" use12Hours  />
                    </Space>
                </label>
            <label>
               Assigned User
                <input type="text" name="assigned_user" defaultValue={assigned_user??assigned_user}/>
            </label>
            <Button htmlType={"submit"}>Submit</Button>
            <Button htmlType={"button"} id={`cancelButton${count}`} onClick={(e)=>onCancelTask(e)}>Cancel</Button>
        </form>
        </div>
    );
};

export default TaskForm;

Source: Ask Javascript Questions

LEAVE A COMMENT