search

salesforce / design-system-react

Salesforce Lightning Design System for React
https://design-system-react-site.herokuapp.com/
BSD 3-Clause "New" or "Revised" License
913 stars 415 forks source link

Datepicker: datepicker jumps when opened in a small viewport #3050

Open xulingzhihou opened 2 years ago

xulingzhihou commented 2 years ago

When rendered as a portal element menuPosition="overflowBoundaryElement" and display area is small, we observe jumpy behavior when opening datapicker by clicking on the calendar icon.

image image

We believe it is caused by https://github.com/salesforce/design-system-react/blob/030b978cd74f582d71b6bc0c35e15e12922b002e/components/date-picker/date-picker.jsx#L557 when it is trying to focus on the dateCell, browser unnecessarily scrolls and results in the jumpy behavior.

Our proposed fix is setting preventScroll to true, this.selectedDateCell.focus({preventScroll: true});

welcome[bot] commented 2 years ago

Thanks for opening your first issue! :wave: If you have found this library helpful, please star it. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread.