search

instructure / instructure-ui

A UI Component Library made by Instructure, Inc.
https://instructure.design/
Other
435 stars 98 forks source link

DateTimeInput: When passing value prop after date text change the time is not respected #1407

Closed jcflow closed 6 months ago

jcflow commented 8 months ago

Background Information

Package Version(s): ui-date-time-input v8.46.0

Browser: Chrome (All Versions) Safari Firefox

OS: MacOS Ventura

Device: MacBook Pro 2019

Component: DateTimeInput

Describe the Bug

We are using the DateTimeInput to manage a date-time string. In our case, when the user selects a date we automatically change the time depending on some conditions and pass it again through props. This works with the calendar pop-up using the mouse, but when typing a date (ex. “Jan 2, 2024“) and tab-ing to time input does not respect the passed time from component props.

Steps To Reproduce

  1. Type “Jan 2, 2024“ on date picker. Component sends “2024-01-02T00:00:00.000Z“ using onChange (00:00 AM is the default time). We get this and manually change the string value to “2024-01-02T12:00:00.000Z“ and pass it in value prop.
  2. The component does not respect the new time and change it to 00:00 AM again.

Expected Behavior

After typing a valid date, programmatically change the time and send the prop value again, this new time value should be reflected in the time select dropdown.

Screenshots

Codepen: https://codepen.io/jcflow/pen/poYggMm

Additional Information

Current Workaround(s):

Products Affected: New Canvas Module Assignments date-time pickers

Are you willing to submit a PR to fix?

Requested Priority: Blocking

HerrTopi commented 7 months ago

Hi! thanks for the report. This seems to be a real problem, we'll take a look and get back to you