From 30c9a9802a1d5d127ab280934338d32a61fbd5e9 Mon Sep 17 00:00:00 2001
From: Matyas Forian-Szabo <matyas.szabo@instructure.com>
Date: Thu, 11 May 2023 16:53:35 +0200
Subject: [PATCH] refactor(ui-time-select): round down seconds to minute on
 entering them via keyboard

---
 .../TimeSelect/__tests__/TimeSelect.test.tsx  | 20 +++++++++++++++++++
 .../ui-time-select/src/TimeSelect/index.tsx   | 17 +++++++++++++---
 .../ui-time-select/src/TimeSelect/props.ts    |  3 +++
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/packages/ui-time-select/src/TimeSelect/__tests__/TimeSelect.test.tsx b/packages/ui-time-select/src/TimeSelect/__tests__/TimeSelect.test.tsx
index 82a95ed0b0..832ae5268c 100644
--- a/packages/ui-time-select/src/TimeSelect/__tests__/TimeSelect.test.tsx
+++ b/packages/ui-time-select/src/TimeSelect/__tests__/TimeSelect.test.tsx
@@ -444,6 +444,26 @@ describe('<TimeSelect />', async () => {
     expect(input.getAttribute('value')).to.equal('7:34 PM')
   })
 
+  it('should round down seconds when applicable', async () => {
+    const onChange = stub()
+    await mount(
+      <TimeSelect
+        renderLabel="Choose a time"
+        allowNonStepInput={true}
+        locale="en_AU"
+        format="LTS" // shows seconds
+        timezone="US/Eastern"
+        onChange={onChange}
+      />
+    )
+    const select = await TimeSelectLocator.find()
+    const input = await select.findInput()
+    await input.change({ target: { value: '' } })
+    await input.typeIn('04:45:55 AM')
+    await input.focusOut() // sends onChange event
+    expect(input.getAttribute('value')).to.equal('4:45:00 AM')
+  })
+
   it('adding event listeners does not break functionality', async () => {
     const onChange = stub()
     const onKeyDown = stub()
diff --git a/packages/ui-time-select/src/TimeSelect/index.tsx b/packages/ui-time-select/src/TimeSelect/index.tsx
index 9d015b43f2..8481be566b 100644
--- a/packages/ui-time-select/src/TimeSelect/index.tsx
+++ b/packages/ui-time-select/src/TimeSelect/index.tsx
@@ -289,17 +289,28 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
   }
 
   filterOptions(inputValue: string) {
-    if (this.props.allowNonStepInput && inputValue.length < 3) {
+    let inputNoSeconds = inputValue
+    // if the input contains seconds disregard them (e.g. if format = LTS)
+    if (inputValue.length > 5) {
+      // e.g. "5:34:"
+      const input = this.parseInputText(inputValue)
+      if (input.isValid()) {
+        input.set({ second: 0 })
+        inputNoSeconds = input.format(this.props.format)
+      }
+    }
+
+    if (this.props.allowNonStepInput && inputNoSeconds.length < 3) {
       // could show too many results, show only step values
       return this.state?.options.filter((option: TimeSelectOptions) => {
         return (
-          option.label.toLowerCase().startsWith(inputValue.toLowerCase()) &&
+          option.label.toLowerCase().startsWith(inputNoSeconds.toLowerCase()) &&
           option.value.minute() % this.props.step! == 0
         )
       })
     }
     return this.state?.options.filter((option: TimeSelectOptions) =>
-      option.label.toLowerCase().startsWith(inputValue.toLowerCase())
+      option.label.toLowerCase().startsWith(inputNoSeconds.toLowerCase())
     )
   }
 
diff --git a/packages/ui-time-select/src/TimeSelect/props.ts b/packages/ui-time-select/src/TimeSelect/props.ts
index f44e633b65..8c823983aa 100644
--- a/packages/ui-time-select/src/TimeSelect/props.ts
+++ b/packages/ui-time-select/src/TimeSelect/props.ts
@@ -79,6 +79,9 @@ type TimeSelectOwnProps = {
   id?: string
   /**
    * The format to use when displaying the possible and currently selected options.
+   * This component currently rounds seconds down to the minute.
+   * Defaults to `LT`, which is localized time without seconds, e.g. "16:45" or
+   * "4:45 PM"
    *
    * See [moment](https://momentjs.com/docs/#/displaying/format/) for the list
    * of available formats.