telus / tds-community

TELUS Design System Community Components

Home Page:https://tds.telus.com/community/index.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Difficult to re-open the DatePicker Overlay

billtelus opened this issue · comments

Description

This issue was created in tds-core repo, whereas it was supposed to be created in tds-community since tds-core does not have this feature.

I am reporting this issue based on the observed customer difficulty in this Decibel session.

The customer tries to re-open the overlay multiple times after it closes when they scroll the browser window to make more of overlay visible in the viewport.

  • The expected result is that the overlay re-appears after the customer clicks either the Input field or the Label for this component.

Reproduction Steps

Start the playback at the 1:56 mark.
The customer opens the calendar overlay, scrolls the browser window down so they can see all the dates, the overlay closes, and they cannot get the overlay to open again by clicking inside the date field, they have to click the label above the field.
This continues to happen to them for 1.5 minutes.
This is in the authenticated My TELUS upgrade from copper to Fibre internet flow.
Windows 10
Chrome
Desktop

This can also be reproduced here: https://tds.telus.com/community/index.html#!/DatePicker

  1. Click within the date picker field to invoke the DatePicker Overlay.
  2. With the date picker open, mouse over to the browser scrollbar and scroll down by dragging the scrollbar.
  3. Upon releasing the scrollbar, the DatePicker Overlay disappears.
  4. Notice that the cursor is flashing within the DatePicker field.
  5. When the user clicks within the field again to invoke the DatePicker Overlay, nothing happens. It cannot be triggered because the cursor is already active within the field. There is no way to trigger the event again until an event occurs to remove focus from the field.

Workaround details

Recommendation

  • Your recommendation here

Meta

Screenshots

  • Include any relevant screenshots