Skip to Content (Press Enter)
UserImage.jpg
Quentin P
107Views
2Comments
Solved
Reactive DatePicker focus and scroll issue
Question
Reactive
OutSystems UI

We encountered this issue during our testing. It's not critical and there are workarounds but I was curious if anyone has any insights on how to fix it.

I created a sample screen to test this here: https://personal-iju9dkwv.outsystemscloud.com/TestReactive/FormWithDatePicker

Steps:

  1. Reduce the height of your browser window such that opening a datepicker widget will cause it to be partially off-screen.
  2. Click on a day that is not in the current month (in the example above, either 30 or 31 July).
  3. As in the above screenshot, the focus of the window seems to move to the (now hidden) date picker and push the rest of the screen out of the viewport. Resizing the window appears to fix it but is there any way we can refocus the window automatically?
1
0
07 Aug 2023
Copy Link
UserImage.jpg
Quentin P
Solution

I've made some findings after further testing on this issue. Adding here in case anyone wants to fix this in their own projects.

When the calendar is opened and subsequently closed, the HTML element seems to remain at its original position with its visibility just set to hidden (or more accurately, it is typically set as hidden but set to visible when it is in its open state). If we inspect the page in a browser and unset the visibility and opacity this can be seen to affect the position of the entire page, as below.

Adding this CSS in our theme seems to work to fix the issue. Basically it "flattens" the calendar container element when it is closed so that it doesn't affect the scroll on the page.

This can be tested out here.

Without fix: https://personal-iju9dkwv.outsystemscloud.com/TestReactive/FormWithDatePicker

With fix: https://personal-iju9dkwv.outsystemscloud.com/TestReactive/FormWithDatePickerFlattened 

See solution in context
2
0
10 Aug 2023
Copy Link
UserImage.jpg
Quentin P

Bump for visibility.

0
0
08 Aug 2023
Copy Link
UserImage.jpg
Quentin P
Solution

I've made some findings after further testing on this issue. Adding here in case anyone wants to fix this in their own projects.

When the calendar is opened and subsequently closed, the HTML element seems to remain at its original position with its visibility just set to hidden (or more accurately, it is typically set as hidden but set to visible when it is in its open state). If we inspect the page in a browser and unset the visibility and opacity this can be seen to affect the position of the entire page, as below.

Adding this CSS in our theme seems to work to fix the issue. Basically it "flattens" the calendar container element when it is closed so that it doesn't affect the scroll on the page.

This can be tested out here.

Without fix: https://personal-iju9dkwv.outsystemscloud.com/TestReactive/FormWithDatePicker

With fix: https://personal-iju9dkwv.outsystemscloud.com/TestReactive/FormWithDatePickerFlattened 

2
0
10 Aug 2023
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.