Estoy creando una aplicación de reacción que tiene un selector de fecha compuesto por antd
Código index.js simple:
import React from "react"; import ReactDOM from "react-dom"; import { DatePicker } from "antd"; import "antd/dist/antd.css"; import "./index.css"; ReactDOM.render( <div className="App"> <h1>Select date-picker scroll bug.</h1> <div style={{ marginTop: "16px", width: 500, overflow: "scroll", height: 400 }} > <DatePicker /> <div style={{ minHeight: 500 }}></div> </div> </div>, document.getElementById("root") );Ejemplo de trabajo:
Para reproducir : si el usuario hace clic en la entrada, se muestra el selector de fecha, pero cuando intentamos desplazarnos hacia abajo, el selector de fecha también se desplaza junto con la página.
Resultado esperado : el selector de fecha no debe desplazarse y debe estar debajo del cuadro de entrada.
Cualquier ayuda sería muy apreciable. Gracias por adelantado.
Esto se describe en sus preguntas frecuentes: https://ant.design/docs/react/faq#How-do-I-prevent-Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scrolling-with-the-page ?
position: "relative" al elemento principal.getPopupContainer={trigger => trigger.parentElement} a su DatePicker .