@instructure/ui-time-select 10.10.1-snapshot-5 → 10.10.1-snapshot-7

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.10.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.10.0...v10.10.1-snapshot-5) (2025-01-29)
+## [10.10.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.10.0...v10.10.1-snapshot-7) (2025-02-03)
 
-**Note:** Version bump only for package @instructure/ui-time-select
+
+### Bug Fixes
+
+* **ui-time-select:** clear input field after setting an empty value ([1993282](https://github.com/instructure/instructure-ui/commit/19932824ebbcc5c927d000d353405ff72c4bf264))
 
 
 

package/es/TimeSelect/index.js

@@ -73,7 +73,8 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
           // needs not to lose selectedOptionId in controlled mode otherwise it'd
           // revert to the default or '' instead of the set value
           selectedOptionId: this.isControlled ? this.state.selectedOptionId : void 0,
-          fireChangeOnBlur: void 0
+          fireChangeOnBlur: void 0,
+          isInputCleared: this.props.allowClearingSelection && value === ''
         });
       }
       this.setState({
@@ -113,10 +114,11 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     // 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.)
     this.handleBlurOrEsc = event => {
-      var _this$props$onHideOpt, _this$props7;
+      var _this$props$onHideOpt, _this$props8;
       const _this$state = this.state,
         selectedOptionId = _this$state.selectedOptionId,
-        inputValue = _this$state.inputValue;
+        inputValue = _this$state.inputValue,
+        isInputCleared = _this$state.isInputCleared;
       let defaultValue = '';
       if (this.props.defaultValue) {
         const date = DateTime.parse(this.props.defaultValue, this.locale(), this.timezone());
@@ -124,14 +126,17 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       }
       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 === '' && this.props.allowClearingSelection) {
         newInputValue = '';
+      } else if (selectedOption) {
+        // If there is a selected option use its value in the input field.
+        newInputValue = selectedOption.label;
+      } else if (this.props.value) {
+        // If controlled and input is cleared and blurred after the first render, it should revert to value
+        const date = DateTime.parse(this.props.value, this.locale(), this.timezone());
+        newInputValue = this.props.format ? date.format(this.props.format) : date.toISOString();
       }
       this.setState(() => ({
         isShowingOptions: false,
@@ -148,13 +153,22 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
           value: this.state.fireChangeOnBlur.value.toISOString(),
           inputText: this.state.fireChangeOnBlur.label
         });
+      } else if (isInputCleared && event.key !== 'Escape' && this.props.allowClearingSelection) {
+        var _this$props$onChange2, _this$props7;
+        this.setState(() => ({
+          isInputCleared: false
+        }));
+        (_this$props$onChange2 = (_this$props7 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props7, event, {
+          value: '',
+          inputText: ''
+        });
       }
       // TODO only fire this if handleSelectOption was not called before.
-      (_this$props$onHideOpt = (_this$props7 = this.props).onHideOptions) === null || _this$props$onHideOpt === void 0 ? void 0 : _this$props$onHideOpt.call(_this$props7, event);
+      (_this$props$onHideOpt = (_this$props8 = this.props).onHideOptions) === null || _this$props$onHideOpt === void 0 ? void 0 : _this$props$onHideOpt.call(_this$props8, event);
     };
     // Called when an option is selected via mouse click or Enter.
     this.handleSelectOption = (event, data) => {
-      var _this$props$onHideOpt2, _this$props9;
+      var _this$props$onHideOpt2, _this$props10;
       if (data.id === this._emptyOptionId) {
         this.setState({
           isShowingOptions: false
@@ -182,13 +196,13 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
         });
       }
       if (data.id !== currentSelectedOptionId) {
-        var _this$props$onChange2, _this$props8;
-        (_this$props$onChange2 = (_this$props8 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props8, event, {
+        var _this$props$onChange3, _this$props9;
+        (_this$props$onChange3 = (_this$props9 = this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props9, event, {
           value: selectedOption.value.toISOString(),
           inputText: newInputValue
         });
       }
-      (_this$props$onHideOpt2 = (_this$props9 = this.props).onHideOptions) === null || _this$props$onHideOpt2 === void 0 ? void 0 : _this$props$onHideOpt2.call(_this$props9, event);
+      (_this$props$onHideOpt2 = (_this$props10 = this.props).onHideOptions) === null || _this$props$onHideOpt2 === void 0 ? void 0 : _this$props$onHideOpt2.call(_this$props10, event);
     };
     this.handleHighlightOption = (event, data) => {
       if (data.id === this._emptyOptionId) return;
@@ -306,15 +320,16 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
       filteredOptions: initialOptions.length > 288 ? initialOptions.filter(opt => opt.value.minute() % this.props.step === 0) : initialOptions,
       isShowingOptions: false,
       highlightedOptionId: initialSelection ? initialSelection.id : void 0,
-      selectedOptionId: initialSelection ? initialSelection.id : void 0
+      selectedOptionId: initialSelection ? initialSelection.id : void 0,
+      isInputCleared: false
     };
   }
   getInitialOption(options) {
-    const _this$props10 = this.props,
-      value = _this$props10.value,
-      defaultValue = _this$props10.defaultValue,
-      defaultToFirstOption = _this$props10.defaultToFirstOption,
-      format = _this$props10.format;
+    const _this$props11 = this.props,
+      value = _this$props11.value,
+      defaultValue = _this$props11.defaultValue,
+      defaultToFirstOption = _this$props11.defaultToFirstOption,
+      format = _this$props11.format;
     const initialValue = value || defaultValue;
     if (typeof initialValue === 'string') {
       const date = DateTime.parse(initialValue, this.locale(), this.timezone());
@@ -423,33 +438,33 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
     }, callRenderProp(this.props.renderEmptyOption));
   }
   render() {
-    const _this$props11 = this.props,
-      value = _this$props11.value,
-      defaultValue = _this$props11.defaultValue,
-      placeholder = _this$props11.placeholder,
-      renderLabel = _this$props11.renderLabel,
-      inputRef = _this$props11.inputRef,
-      id = _this$props11.id,
-      listRef = _this$props11.listRef,
-      renderBeforeInput = _this$props11.renderBeforeInput,
-      renderAfterInput = _this$props11.renderAfterInput,
-      isRequired = _this$props11.isRequired,
-      isInline = _this$props11.isInline,
-      width = _this$props11.width,
-      format = _this$props11.format,
-      step = _this$props11.step,
-      optionsMaxWidth = _this$props11.optionsMaxWidth,
-      visibleOptionsCount = _this$props11.visibleOptionsCount,
-      messages = _this$props11.messages,
-      placement = _this$props11.placement,
-      constrain = _this$props11.constrain,
-      onFocus = _this$props11.onFocus,
-      onShowOptions = _this$props11.onShowOptions,
-      onHideOptions = _this$props11.onHideOptions,
-      onInputChange = _this$props11.onInputChange,
-      onKeyDown = _this$props11.onKeyDown,
-      mountNode = _this$props11.mountNode,
-      rest = _objectWithoutProperties(_this$props11, _excluded);
+    const _this$props12 = this.props,
+      value = _this$props12.value,
+      defaultValue = _this$props12.defaultValue,
+      placeholder = _this$props12.placeholder,
+      renderLabel = _this$props12.renderLabel,
+      inputRef = _this$props12.inputRef,
+      id = _this$props12.id,
+      listRef = _this$props12.listRef,
+      renderBeforeInput = _this$props12.renderBeforeInput,
+      renderAfterInput = _this$props12.renderAfterInput,
+      isRequired = _this$props12.isRequired,
+      isInline = _this$props12.isInline,
+      width = _this$props12.width,
+      format = _this$props12.format,
+      step = _this$props12.step,
+      optionsMaxWidth = _this$props12.optionsMaxWidth,
+      visibleOptionsCount = _this$props12.visibleOptionsCount,
+      messages = _this$props12.messages,
+      placement = _this$props12.placement,
+      constrain = _this$props12.constrain,
+      onFocus = _this$props12.onFocus,
+      onShowOptions = _this$props12.onShowOptions,
+      onHideOptions = _this$props12.onHideOptions,
+      onInputChange = _this$props12.onInputChange,
+      onKeyDown = _this$props12.onKeyDown,
+      mountNode = _this$props12.mountNode,
+      rest = _objectWithoutProperties(_this$props12, _excluded);
     const _this$state5 = this.state,
       inputValue = _this$state5.inputValue,
       isShowingOptions = _this$state5.isShowingOptions;
@@ -495,7 +510,8 @@ let TimeSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class
   placement: 'bottom stretch',
   constrain: 'window',
   renderEmptyOption: '---',
-  allowNonStepInput: false
+  allowNonStepInput: false,
+  allowClearingSelection: false
 }, _TimeSelect.contextType = ApplyLocaleContext, _TimeSelect)) || _class) || _class);
 export { TimeSelect };
 export default TimeSelect;

package/es/TimeSelect/props.js

@@ -59,7 +59,8 @@ const propTypes = {
   locale: PropTypes.string,
   timezone: PropTypes.string,
   allowNonStepInput: PropTypes.bool,
-  onInputChange: PropTypes.func
+  onInputChange: PropTypes.func,
+  allowClearingSelection: PropTypes.bool
 };
-const allowedProps = ['renderLabel', 'defaultToFirstOption', 'value', 'defaultValue', 'id', 'format', 'step', 'interaction', 'placeholder', 'isRequired', 'isInline', 'width', 'optionsMaxWidth', 'mountNode', 'visibleOptionsCount', 'messages', 'placement', 'constrain', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'locale', 'timezone', 'allowNonStepInput', 'onInputChange'];
+const allowedProps = ['renderLabel', 'defaultToFirstOption', 'value', 'defaultValue', 'id', 'format', 'step', 'interaction', 'placeholder', 'isRequired', 'isInline', 'width', 'optionsMaxWidth', 'mountNode', 'visibleOptionsCount', 'messages', 'placement', 'constrain', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'locale', 'timezone', 'allowNonStepInput', 'onInputChange', 'allowClearingSelection'];
 export { propTypes, allowedProps };

package/lib/TimeSelect/index.js

@@ -85,7 +85,8 @@ let TimeSelect = exports.TimeSelect = (_dec = (0, _withDeterministicId.withDeter
           // needs not to lose selectedOptionId in controlled mode otherwise it'd
           // revert to the default or '' instead of the set value
           selectedOptionId: this.isControlled ? this.state.selectedOptionId : void 0,
-          fireChangeOnBlur: void 0
+          fireChangeOnBlur: void 0,
+          isInputCleared: this.props.allowClearingSelection && value === ''
         });
       }
       this.setState({
@@ -125,10 +126,11 @@ let TimeSelect = exports.TimeSelect = (_dec = (0, _withDeterministicId.withDeter
     // 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.)
     this.handleBlurOrEsc = event => {
-      var _this$props$onHideOpt, _this$props7;
+      var _this$props$onHideOpt, _this$props8;
       const _this$state = this.state,
         selectedOptionId = _this$state.selectedOptionId,
-        inputValue = _this$state.inputValue;
+        inputValue = _this$state.inputValue,
+        isInputCleared = _this$state.isInputCleared;
       let defaultValue = '';
       if (this.props.defaultValue) {
         const date = _DateTime.DateTime.parse(this.props.defaultValue, this.locale(), this.timezone());
@@ -136,14 +138,17 @@ let TimeSelect = exports.TimeSelect = (_dec = (0, _withDeterministicId.withDeter
       }
       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 === '' && this.props.allowClearingSelection) {
         newInputValue = '';
+      } else if (selectedOption) {
+        // If there is a selected option use its value in the input field.
+        newInputValue = selectedOption.label;
+      } else if (this.props.value) {
+        // If controlled and input is cleared and blurred after the first render, it should revert to value
+        const date = _DateTime.DateTime.parse(this.props.value, this.locale(), this.timezone());
+        newInputValue = this.props.format ? date.format(this.props.format) : date.toISOString();
       }
       this.setState(() => ({
         isShowingOptions: false,
@@ -160,13 +165,22 @@ let TimeSelect = exports.TimeSelect = (_dec = (0, _withDeterministicId.withDeter
           value: this.state.fireChangeOnBlur.value.toISOString(),
           inputText: this.state.fireChangeOnBlur.label
         });
+      } else if (isInputCleared && event.key !== 'Escape' && this.props.allowClearingSelection) {
+        var _this$props$onChange2, _this$props7;
+        this.setState(() => ({
+          isInputCleared: false
+        }));
+        (_this$props$onChange2 = (_this$props7 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props7, event, {
+          value: '',
+          inputText: ''
+        });
       }
       // TODO only fire this if handleSelectOption was not called before.
-      (_this$props$onHideOpt = (_this$props7 = this.props).onHideOptions) === null || _this$props$onHideOpt === void 0 ? void 0 : _this$props$onHideOpt.call(_this$props7, event);
+      (_this$props$onHideOpt = (_this$props8 = this.props).onHideOptions) === null || _this$props$onHideOpt === void 0 ? void 0 : _this$props$onHideOpt.call(_this$props8, event);
     };
     // Called when an option is selected via mouse click or Enter.
     this.handleSelectOption = (event, data) => {
-      var _this$props$onHideOpt2, _this$props9;
+      var _this$props$onHideOpt2, _this$props10;
       if (data.id === this._emptyOptionId) {
         this.setState({
           isShowingOptions: false
@@ -194,13 +208,13 @@ let TimeSelect = exports.TimeSelect = (_dec = (0, _withDeterministicId.withDeter
         });
       }
       if (data.id !== currentSelectedOptionId) {
-        var _this$props$onChange2, _this$props8;
-        (_this$props$onChange2 = (_this$props8 = this.props).onChange) === null || _this$props$onChange2 === void 0 ? void 0 : _this$props$onChange2.call(_this$props8, event, {
+        var _this$props$onChange3, _this$props9;
+        (_this$props$onChange3 = (_this$props9 = this.props).onChange) === null || _this$props$onChange3 === void 0 ? void 0 : _this$props$onChange3.call(_this$props9, event, {
           value: selectedOption.value.toISOString(),
           inputText: newInputValue
         });
       }
-      (_this$props$onHideOpt2 = (_this$props9 = this.props).onHideOptions) === null || _this$props$onHideOpt2 === void 0 ? void 0 : _this$props$onHideOpt2.call(_this$props9, event);
+      (_this$props$onHideOpt2 = (_this$props10 = this.props).onHideOptions) === null || _this$props$onHideOpt2 === void 0 ? void 0 : _this$props$onHideOpt2.call(_this$props10, event);
     };
     this.handleHighlightOption = (event, data) => {
       if (data.id === this._emptyOptionId) return;
@@ -318,15 +332,16 @@ let TimeSelect = exports.TimeSelect = (_dec = (0, _withDeterministicId.withDeter
       filteredOptions: initialOptions.length > 288 ? initialOptions.filter(opt => opt.value.minute() % this.props.step === 0) : initialOptions,
       isShowingOptions: false,
       highlightedOptionId: initialSelection ? initialSelection.id : void 0,
-      selectedOptionId: initialSelection ? initialSelection.id : void 0
+      selectedOptionId: initialSelection ? initialSelection.id : void 0,
+      isInputCleared: false
     };
   }
   getInitialOption(options) {
-    const _this$props10 = this.props,
-      value = _this$props10.value,
-      defaultValue = _this$props10.defaultValue,
-      defaultToFirstOption = _this$props10.defaultToFirstOption,
-      format = _this$props10.format;
+    const _this$props11 = this.props,
+      value = _this$props11.value,
+      defaultValue = _this$props11.defaultValue,
+      defaultToFirstOption = _this$props11.defaultToFirstOption,
+      format = _this$props11.format;
     const initialValue = value || defaultValue;
     if (typeof initialValue === 'string') {
       const date = _DateTime.DateTime.parse(initialValue, this.locale(), this.timezone());
@@ -435,33 +450,33 @@ let TimeSelect = exports.TimeSelect = (_dec = (0, _withDeterministicId.withDeter
     }, (0, _callRenderProp.callRenderProp)(this.props.renderEmptyOption));
   }
   render() {
-    const _this$props11 = this.props,
-      value = _this$props11.value,
-      defaultValue = _this$props11.defaultValue,
-      placeholder = _this$props11.placeholder,
-      renderLabel = _this$props11.renderLabel,
-      inputRef = _this$props11.inputRef,
-      id = _this$props11.id,
-      listRef = _this$props11.listRef,
-      renderBeforeInput = _this$props11.renderBeforeInput,
-      renderAfterInput = _this$props11.renderAfterInput,
-      isRequired = _this$props11.isRequired,
-      isInline = _this$props11.isInline,
-      width = _this$props11.width,
-      format = _this$props11.format,
-      step = _this$props11.step,
-      optionsMaxWidth = _this$props11.optionsMaxWidth,
-      visibleOptionsCount = _this$props11.visibleOptionsCount,
-      messages = _this$props11.messages,
-      placement = _this$props11.placement,
-      constrain = _this$props11.constrain,
-      onFocus = _this$props11.onFocus,
-      onShowOptions = _this$props11.onShowOptions,
-      onHideOptions = _this$props11.onHideOptions,
-      onInputChange = _this$props11.onInputChange,
-      onKeyDown = _this$props11.onKeyDown,
-      mountNode = _this$props11.mountNode,
-      rest = (0, _objectWithoutProperties2.default)(_this$props11, _excluded);
+    const _this$props12 = this.props,
+      value = _this$props12.value,
+      defaultValue = _this$props12.defaultValue,
+      placeholder = _this$props12.placeholder,
+      renderLabel = _this$props12.renderLabel,
+      inputRef = _this$props12.inputRef,
+      id = _this$props12.id,
+      listRef = _this$props12.listRef,
+      renderBeforeInput = _this$props12.renderBeforeInput,
+      renderAfterInput = _this$props12.renderAfterInput,
+      isRequired = _this$props12.isRequired,
+      isInline = _this$props12.isInline,
+      width = _this$props12.width,
+      format = _this$props12.format,
+      step = _this$props12.step,
+      optionsMaxWidth = _this$props12.optionsMaxWidth,
+      visibleOptionsCount = _this$props12.visibleOptionsCount,
+      messages = _this$props12.messages,
+      placement = _this$props12.placement,
+      constrain = _this$props12.constrain,
+      onFocus = _this$props12.onFocus,
+      onShowOptions = _this$props12.onShowOptions,
+      onHideOptions = _this$props12.onHideOptions,
+      onInputChange = _this$props12.onInputChange,
+      onKeyDown = _this$props12.onKeyDown,
+      mountNode = _this$props12.mountNode,
+      rest = (0, _objectWithoutProperties2.default)(_this$props12, _excluded);
     const _this$state5 = this.state,
       inputValue = _this$state5.inputValue,
       isShowingOptions = _this$state5.isShowingOptions;
@@ -507,6 +522,7 @@ let TimeSelect = exports.TimeSelect = (_dec = (0, _withDeterministicId.withDeter
   placement: 'bottom stretch',
   constrain: 'window',
   renderEmptyOption: '---',
-  allowNonStepInput: false
+  allowNonStepInput: false,
+  allowClearingSelection: false
 }, _TimeSelect.contextType = _ApplyLocaleContext.ApplyLocaleContext, _TimeSelect)) || _class) || _class);
 var _default = exports.default = TimeSelect;

package/lib/TimeSelect/props.js

@@ -66,6 +66,7 @@ const propTypes = exports.propTypes = {
   locale: _propTypes.default.string,
   timezone: _propTypes.default.string,
   allowNonStepInput: _propTypes.default.bool,
-  onInputChange: _propTypes.default.func
+  onInputChange: _propTypes.default.func,
+  allowClearingSelection: _propTypes.default.bool
 };
-const allowedProps = exports.allowedProps = ['renderLabel', 'defaultToFirstOption', 'value', 'defaultValue', 'id', 'format', 'step', 'interaction', 'placeholder', 'isRequired', 'isInline', 'width', 'optionsMaxWidth', 'mountNode', 'visibleOptionsCount', 'messages', 'placement', 'constrain', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'locale', 'timezone', 'allowNonStepInput', 'onInputChange'];
+const allowedProps = exports.allowedProps = ['renderLabel', 'defaultToFirstOption', 'value', 'defaultValue', 'id', 'format', 'step', 'interaction', 'placeholder', 'isRequired', 'isInline', 'width', 'optionsMaxWidth', 'mountNode', 'visibleOptionsCount', 'messages', 'placement', 'constrain', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'locale', 'timezone', 'allowNonStepInput', 'onInputChange', 'allowClearingSelection'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-time-select",
-  "version": "10.10.1-snapshot-5",
+  "version": "10.10.1-snapshot-7",
   "description": "A component for selecting time values.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,21 +24,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/shared-types": "10.10.1-snapshot-5",
-    "@instructure/ui-form-field": "10.10.1-snapshot-5",
-    "@instructure/ui-i18n": "10.10.1-snapshot-5",
-    "@instructure/ui-position": "10.10.1-snapshot-5",
-    "@instructure/ui-prop-types": "10.10.1-snapshot-5",
-    "@instructure/ui-react-utils": "10.10.1-snapshot-5",
-    "@instructure/ui-select": "10.10.1-snapshot-5",
-    "@instructure/ui-testable": "10.10.1-snapshot-5",
-    "@instructure/ui-utils": "10.10.1-snapshot-5",
+    "@instructure/shared-types": "10.10.1-snapshot-7",
+    "@instructure/ui-form-field": "10.10.1-snapshot-7",
+    "@instructure/ui-i18n": "10.10.1-snapshot-7",
+    "@instructure/ui-position": "10.10.1-snapshot-7",
+    "@instructure/ui-prop-types": "10.10.1-snapshot-7",
+    "@instructure/ui-react-utils": "10.10.1-snapshot-7",
+    "@instructure/ui-select": "10.10.1-snapshot-7",
+    "@instructure/ui-testable": "10.10.1-snapshot-7",
+    "@instructure/ui-utils": "10.10.1-snapshot-7",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.10.1-snapshot-5",
-    "@instructure/ui-babel-preset": "10.10.1-snapshot-5",
-    "@instructure/ui-test-utils": "10.10.1-snapshot-5",
+    "@instructure/ui-axe-check": "10.10.1-snapshot-7",
+    "@instructure/ui-babel-preset": "10.10.1-snapshot-7",
+    "@instructure/ui-test-utils": "10.10.1-snapshot-7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/TimeSelect/index.tsx

@@ -74,7 +74,8 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
     placement: 'bottom stretch',
     constrain: 'window',
     renderEmptyOption: '---',
-    allowNonStepInput: false
+    allowNonStepInput: false,
+    allowClearingSelection: false
   }
   static contextType = ApplyLocaleContext
 
@@ -220,7 +221,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 +340,8 @@ class TimeSelect extends Component<TimeSelectProps, TimeSelectState> {
         selectedOptionId: this.isControlled
           ? this.state.selectedOptionId
           : undefined,
-        fireChangeOnBlur: undefined
+        fireChangeOnBlur: undefined,
+        isInputCleared: this.props.allowClearingSelection && value === ''
       })
     }
     this.setState({
@@ -386,7 +389,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 +403,23 @@ 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 === '' && this.props.allowClearingSelection) {
       newInputValue = ''
+    } else if (selectedOption) {
+      // If there is a selected option use its value in the input field.
+      newInputValue = selectedOption.label
+    } else if (this.props.value) {
+      // If controlled and input is cleared and blurred after the first render, it should revert to value
+      const date = DateTime.parse(
+        this.props.value,
+        this.locale(),
+        this.timezone()
+      )
+      newInputValue = this.props.format
+        ? date.format(this.props.format)
+        : date.toISOString()
     }
     this.setState(() => ({
       isShowingOptions: false,
@@ -421,6 +433,16 @@ 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.props.allowClearingSelection
+    ) {
+      this.setState(() => ({ isInputCleared: false }))
+      this.props.onChange?.(event, {
+        value: '',
+        inputText: ''
+      })
     }
     // TODO only fire this if handleSelectOption was not called before.
     this.props.onHideOptions?.(event)

package/src/TimeSelect/props.ts

@@ -244,6 +244,11 @@ type TimeSelectOwnProps = {
      */
     valueAsISOString?: string
   ) => void
+  /**
+   * Whether to allow for the user to clear the selected option in the input field.
+   * If `false`, the input field will return the last selected option after the input is cleared and loses focus.
+   */
+  allowClearingSelection: boolean
 }
 
 const propTypes: PropValidators<PropKeys> = {
@@ -278,7 +283,8 @@ const propTypes: PropValidators<PropKeys> = {
   locale: PropTypes.string,
   timezone: PropTypes.string,
   allowNonStepInput: PropTypes.bool,
-  onInputChange: PropTypes.func
+  onInputChange: PropTypes.func,
+  allowClearingSelection: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -313,7 +319,8 @@ const allowedProps: AllowedPropKeys = [
   'locale',
   'timezone',
   'allowNonStepInput',
-  'onInputChange'
+  'onInputChange',
+  'allowClearingSelection'
 ]
 
 type TimeSelectOptions = {
@@ -356,6 +363,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 }