fix(ui-time-select): clear input field after setting an empty value

Author: ToMESSKa

cypress/component/TimeSelect.cy.tsx

@@ -26,8 +26,8 @@ import moment from 'moment-timezone'
 import 'cypress-real-events'
 
 import '../support/component'
-import { TimeSelect } from '../../packages/ui'
-import { DateTime } from '../../packages/ui-i18n'
+import { TimeSelect } from '@instructure/ui'
+import { DateTime } from '@instructure/ui-i18n'
 
 describe('<TimeSelect/>', () => {
   it('should render an input and list', async () => {
@@ -70,6 +70,33 @@ describe('<TimeSelect/>', () => {
       })
   })
 
+  it('should fire onChange when input field is cleared and blurred', async () => {
+    const onChange = cy.spy()
+    cy.mount(
+      <TimeSelect
+        renderLabel="Choose a time"
+        timezone="US/Eastern"
+        onChange={onChange}
+      />
+    )
+    cy.get('input[id^="Select_"]').as('input')
+
+    cy.get('@input').click()
+
+    cy.get('li[class$="-optionItem"]').eq(0).click()
+
+    cy.get('@input').click()
+    cy.get('@input').clear()
+    cy.get('@input').blur()
+
+    cy.wrap(onChange)
+      .should('have.been.called')
+      .then((spy) => {
+        expect(spy.lastCall.args[1]).to.have.property('value', '')
+        expect(spy.lastCall.args[1]).to.have.property('inputText', '')
+      })
+  })
+
   it('should behave uncontrolled', async () => {
     const onChange = cy.spy()
     cy.mount(<TimeSelect renderLabel="Choose a time" onChange={onChange} />)

packages/ui-time-select/src/TimeSelect/index.tsx

@@ -220,7 +220,8 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
           : initialOptions,
       isShowingOptions: false,
       highlightedOptionId: initialSelection ? initialSelection.id : undefined,
-      selectedOptionId: initialSelection ? initialSelection.id : undefined
+      selectedOptionId: initialSelection ? initialSelection.id : undefined,
+      isInputCleared: false
     }
   }
 
@@ -338,7 +339,8 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
         selectedOptionId: this.isControlled
           ? this.state.selectedOptionId
           : undefined,
-        fireChangeOnBlur: undefined
+        fireChangeOnBlur: undefined,
+        isInputCleared: value === '' ? true : false
       })
     }
     this.setState({
@@ -386,7 +388,7 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
   // when pressing ESC. NOT called when an item is selected via Enter/click,
   // (but in this case it will be called later when the input is blurred.)
   handleBlurOrEsc: SelectProps['onRequestHideOptions'] = (event) => {
-    const { selectedOptionId, inputValue } = this.state
+    const { selectedOptionId, inputValue, isInputCleared } = this.state
     let defaultValue = ''
     if (this.props.defaultValue) {
       const date = DateTime.parse(
@@ -400,14 +402,13 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     }
     const selectedOption = this.getOption('id', selectedOptionId)
     let newInputValue = defaultValue
-    if (selectedOption) {
-      // If there is a selected option use its value in the input field.
-      newInputValue = selectedOption.label
-    }
     // if input was completely cleared, ensure it stays clear
     // e.g. defaultValue defined, but no selection yet made
-    else if (inputValue === '') {
+    if (inputValue === '') {
       newInputValue = ''
+    } else if (selectedOption) {
+      // If there is a selected option use its value in the input field.
+      newInputValue = selectedOption.label
     }
     this.setState(() => ({
       isShowingOptions: false,
@@ -421,6 +422,12 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
         value: this.state.fireChangeOnBlur.value.toISOString(),
         inputText: this.state.fireChangeOnBlur.label
       })
+    } else if (isInputCleared && (event as any).key !== 'Escape') {
+      this.setState(() => ({ isInputCleared: false }))
+      this.props.onChange?.(event, {
+        value: '',
+        inputText: ''
+      })
     }
     // TODO only fire this if handleSelectOption was not called before.
     this.props.onHideOptions?.(event)

packages/ui-time-select/src/TimeSelect/props.ts

@@ -356,6 +356,10 @@ type TimeSelectState = {
    * fire onChange event when the popup closes?
    */
   fireChangeOnBlur?: TimeSelectOptions
+  /**
+   * Whether to selected option is cleared
+   */
+  isInputCleared: boolean
 }
 
 export type { TimeSelectProps, TimeSelectState, TimeSelectOptions }