refactor(ui-time-select): round down seconds to minute on entering th…

…em via keyboard
instructure · May 15, 2023 · 30c9a98 · 30c9a98
1 parent 6ed3e25
commit 30c9a98
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 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
@@ -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
@@ -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
@@ -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.