@instructure/quiz-core 21.0.1-rc.20 → 21.0.1-rc.22

package/es/banks/components/CopyMoveBankEntryModal/presenter.js

@@ -31,17 +31,27 @@ import BankSelection from '../../../common/components/resources/BankSelection/pr
 import { Modal, ModalHeader, ModalBody, ModalFooter, COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY, TextInput, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
 import { featureOn } from '../../../common/util/featureCheck';
 export var CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
-  function CopyMoveBankEntryModal() {
+  function CopyMoveBankEntryModal(props) {
     var _this2;
     _classCallCheck(this, CopyMoveBankEntryModal);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this2 = _callSuper(this, CopyMoveBankEntryModal, [].concat(args));
+    _this2 = _callSuper(this, CopyMoveBankEntryModal, [props]);
+    /**
+     * @type {React.RefObject<RadioInput> | null}
+     */
+    _defineProperty(_this2, "radioInputRef", null);
+    /**
+     * @type {React.RefObject<TextInput> | null}
+     */
+    _defineProperty(_this2, "textInputRef", null);
     _defineProperty(_this2, "state", {
       bankType: 'existing',
       newBankTitle: '',
-      selectedBank: null
+      selectedBank: null,
+      radioValidationError: null,
+      selectValidationError: null
+    });
+    _defineProperty(_this2, "setBankInputRef", function (ref) {
+      _this2.bankSelectionInputRef = ref;
     });
     _defineProperty(_this2, "copyOrMove", function (newBankId) {
       if (_this2.props.keepCopy) {
@@ -51,7 +61,55 @@ export var CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
       }
       _this2.closeAction();
     });
+    _defineProperty(_this2, "clearValidationErrors", function () {
+      _this2.setState({
+        radioValidationError: null,
+        selectValidationError: null
+      });
+    });
+    _defineProperty(_this2, "validateAction", function () {
+      var _this2$state = _this2.state,
+        bankType = _this2$state.bankType,
+        newBankTitle = _this2$state.newBankTitle,
+        selectedBank = _this2$state.selectedBank;
+      if (!bankType) {
+        var _this2$radioInputRef;
+        (_this2$radioInputRef = _this2.radioInputRef) === null || _this2$radioInputRef === void 0 || (_this2$radioInputRef = _this2$radioInputRef.current) === null || _this2$radioInputRef === void 0 || _this2$radioInputRef.focus();
+        _this2.setState({
+          radioValidationError: [{
+            text: t('Please choose a Copy/Move option'),
+            type: 'newError'
+          }]
+        });
+        return false;
+      }
+      if (bankType === 'existing' && !selectedBank) {
+        _this2.bankSelectionInputRef.focus();
+        _this2.setState({
+          selectValidationError: [{
+            text: t('Please select a bank'),
+            type: 'newError'
+          }]
+        });
+        return false;
+      }
+      if (bankType === 'new' && (!newBankTitle || !newBankTitle.trim())) {
+        var _this2$textInputRef;
+        (_this2$textInputRef = _this2.textInputRef) === null || _this2$textInputRef === void 0 || (_this2$textInputRef = _this2$textInputRef.current) === null || _this2$textInputRef === void 0 || _this2$textInputRef.focus();
+        _this2.setState({
+          selectValidationError: [{
+            text: t('Please enter a new bank title'),
+            type: 'newError'
+          }]
+        });
+        return false;
+      }
+      return true;
+    });
     _defineProperty(_this2, "continueAction", function () {
+      if (!_this2.validateAction()) {
+        return;
+      }
       if (_this2.state.bankType === 'new') {
         var newBank = Bank.create({
           title: _this2.state.newBankTitle,
@@ -92,12 +150,14 @@ export var CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
       return _this2.initiateCopy(newBankId).then(_this2.props.onAdd);
     });
     _defineProperty(_this2, "closeAction", function () {
+      _this2.clearValidationErrors();
       if (_this2.props.modalTrigger) {
         _this2.props.modalTrigger.focus();
       }
       _this2.props.closeModal();
     });
     _defineProperty(_this2, "onBankSelection", function (e, option) {
+      _this2.clearValidationErrors();
       _this2.setState({
         selectedBank: new Bank(option)
       });
@@ -106,15 +166,20 @@ export var CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
       _this2.props.uiSet(COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY, e.target.checked);
     });
     _defineProperty(_this2, "handleRadioChange", function (event, value) {
+      _this2.clearValidationErrors();
       _this2.setState({
         bankType: value
       });
     });
     _defineProperty(_this2, "onTitleChange", function (e) {
+      _this2.clearValidationErrors();
       _this2.setState({
         newBankTitle: e.target.value
       });
     });
+    _this2.radioInputRef = React.createRef();
+    _this2.textInputRef = React.createRef();
+    _this2.bankSelectionInputRef = React.createRef();
     return _this2;
   }
   _inherits(CopyMoveBankEntryModal, _Component);
@@ -129,14 +194,9 @@ export var CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
   }, {
     key: "addToBankButton",
     value: function addToBankButton() {
-      var _this$state = this.state,
-        bankType = _this$state.bankType,
-        newBankTitle = _this$state.newBankTitle;
-      var disabled = bankType === 'existing' && !this.state.selectedBank || bankType === 'new' && (!newBankTitle || !newBankTitle.trim());
       return /*#__PURE__*/React.createElement(Button, {
         color: "primary",
         onClick: this.continueAction,
-        disabled: disabled,
         margin: XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-add-to-bank-button"
       }, t('Add'));
@@ -146,16 +206,22 @@ export var CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
     value: function renderBankTypeContent() {
       if (this.state.bankType === 'existing') {
         return /*#__PURE__*/React.createElement(BankSelection, {
+          inputRef: this.setBankInputRef,
           onBankSelection: this.onBankSelection,
           selectedBank: this.state.selectedBank,
-          "data-automation": "sdk-bank-selection"
+          "data-automation": "sdk-bank-selection",
+          externalError: this.state.selectValidationError,
+          isRequired: true
         });
       }
       return /*#__PURE__*/React.createElement(TextInput, {
         onChange: this.onTitleChange,
         value: this.state.newBankTitle,
         renderLabel: t('New Bank Title'),
-        type: "text"
+        type: "text",
+        messages: this.state.selectValidationError,
+        ref: this.textInputRef,
+        isRequired: true
       });
     }
   }, {
@@ -165,10 +231,13 @@ export var CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
         onChange: this.handleRadioChange,
         name: t('Bank Type'),
         defaultValue: this.state.bankType,
-        description: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Bank Type'))
+        description: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Bank Type')),
+        messages: this.state.radioValidationError,
+        isRequired: true
       }, /*#__PURE__*/React.createElement(RadioInput, {
         value: "existing",
-        label: t('Existing item bank')
+        label: t('Existing item bank'),
+        ref: this.radioInputRef
       }), /*#__PURE__*/React.createElement(RadioInput, {
         value: "new",
         label: t('New item bank')

package/es/common/components/resources/BankSelection/presenter.js

@@ -27,13 +27,15 @@ import { toErrors } from '../../../util/instUIMessages';
 import { simpleFetchBanks } from '../../../../banks/api/banks';
 import { GenericAsyncSearch } from '../../shared/GenericAsyncSearch/GenericAsyncSearch';
 export var BankSelection = /*#__PURE__*/function (_Component) {
-  function BankSelection() {
+  function BankSelection(props) {
     var _this2;
     _classCallCheck(this, BankSelection);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this2 = _callSuper(this, BankSelection, [].concat(args));
+    _this2 = _callSuper(this, BankSelection, [props]);
+    _defineProperty(_this2, "setInputRef", function (ref) {
+      var _this2$props$inputRef, _this2$props;
+      _this2.inputRef = ref;
+      (_this2$props$inputRef = (_this2$props = _this2.props).inputRef) === null || _this2$props$inputRef === void 0 || _this2$props$inputRef.call(_this2$props, ref);
+    });
     _defineProperty(_this2, "searchBanks", function (search) {
       return _this2.props.simpleFetchBanks({
         search: search
@@ -56,18 +58,31 @@ export var BankSelection = /*#__PURE__*/function (_Component) {
         archived: bankOption.archived
       });
     });
+    _this2.inputRef = null;
     return _this2;
   }
   _inherits(BankSelection, _Component);
   return _createClass(BankSelection, [{
+    key: "focusSelectField",
+    value: function focusSelectField() {
+      if (this.inputRef) {
+        this.inputRef.focus();
+      }
+    }
+  }, {
     key: "getErrors",
     value: function getErrors() {
       var selectedBank = this.props.selectedBank;
       if (selectedBank && selectedBank.archived) {
+        this.focusSelectField();
         return toErrors([t('The item bank "{ bankTitle }" no longer exists. Please select a valid bank.', {
           bankTitle: selectedBank.title
         })]);
       }
+      if (this.props.externalError) {
+        this.focusSelectField();
+        return this.props.externalError;
+      }
     }
   }, {
     key: "selectedOption",
@@ -83,13 +98,15 @@ export var BankSelection = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(GenericAsyncSearch, {
+        inputRef: this.setInputRef,
         onSelectionChange: this.onSelect,
         label: this.props.label || t('Select the destination bank'),
         placeholder: t('Search for a bank'),
         selectedOption: this.selectedOption(),
         getOptions: this.searchBanks,
         messages: this.getErrors(),
-        selectAutomation: 'sdk-item-bank-modal'
+        selectAutomation: 'sdk-item-bank-modal',
+        isRequired: this.props.isRequired
       });
     }
   }]);
@@ -98,12 +115,18 @@ _defineProperty(BankSelection, "propTypes", {
   label: PropTypes.string,
   onBankSelection: PropTypes.func,
   selectedBank: ImmutablePropTypes.record,
-  simpleFetchBanks: PropTypes.func
+  simpleFetchBanks: PropTypes.func,
+  externalError: ImmutablePropTypes.record,
+  inputRef: PropTypes.func,
+  isRequired: PropTypes.bool
 });
 _defineProperty(BankSelection, "defaultProps", {
   label: null,
   onBankSelection: function onBankSelection() {},
   selectedBank: null,
-  simpleFetchBanks: simpleFetchBanks
+  simpleFetchBanks: simpleFetchBanks,
+  externalError: null,
+  inputRef: function inputRef() {},
+  isRequired: false
 });
 export default BankSelection;

package/es/common/components/shared/GenericAsyncSearch/GenericAsyncSearch.js

@@ -30,7 +30,9 @@ export var GenericAsyncSearch = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, GenericAsyncSearch);
     _this2 = _callSuper(this, GenericAsyncSearch, arguments);
     _defineProperty(_this2, "setInputRef", function (inputRef) {
+      var _this2$props$inputRef, _this2$props;
       _this2.inputRef = inputRef;
+      (_this2$props$inputRef = (_this2$props = _this2.props).inputRef) === null || _this2$props$inputRef === void 0 || _this2$props$inputRef.call(_this2$props, inputRef);
     });
     _defineProperty(_this2, "state", {
       inputValue: _this2.props.selectedOption ? _this2.props.selectedOption.text : '',
@@ -161,7 +163,8 @@ export var GenericAsyncSearch = /*#__PURE__*/function (_Component) {
         onRequestHighlightOption: this.handleHighlightOption,
         onRequestSelectOption: this.handleSelectOption,
         onKeyDown: this.handleKeyDown,
-        messages: this.props.messages
+        messages: this.props.messages,
+        isRequired: this.props.isRequired
       }, this.renderOptions());
     }
   }]);
@@ -178,13 +181,17 @@ _defineProperty(GenericAsyncSearch, "propTypes", {
   }),
   messages: PropTypes.array,
   selectAutomation: PropTypes.string,
-  getOptions: PropTypes.func.isRequired
+  getOptions: PropTypes.func.isRequired,
+  inputRef: PropTypes.func,
+  isRequired: PropTypes.bool
 });
 _defineProperty(GenericAsyncSearch, "defaultProps", {
   debounceDelay: 500,
   minChars: 3,
   label: null,
   placeholder: null,
-  selectAutomation: null
+  selectAutomation: null,
+  inputRef: function inputRef() {},
+  isRequired: false
 });
 export default GenericAsyncSearch;

package/lib/banks/components/CopyMoveBankEntryModal/presenter.js

@@ -40,17 +40,27 @@ function _callSuper(_this, derived, args) {
   return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
 }
 var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/function (_Component) {
-  function CopyMoveBankEntryModal() {
+  function CopyMoveBankEntryModal(props) {
     var _this2;
     (0, _classCallCheck2["default"])(this, CopyMoveBankEntryModal);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this2 = _callSuper(this, CopyMoveBankEntryModal, [].concat(args));
+    _this2 = _callSuper(this, CopyMoveBankEntryModal, [props]);
+    /**
+     * @type {React.RefObject<RadioInput> | null}
+     */
+    (0, _defineProperty2["default"])(_this2, "radioInputRef", null);
+    /**
+     * @type {React.RefObject<TextInput> | null}
+     */
+    (0, _defineProperty2["default"])(_this2, "textInputRef", null);
     (0, _defineProperty2["default"])(_this2, "state", {
       bankType: 'existing',
       newBankTitle: '',
-      selectedBank: null
+      selectedBank: null,
+      radioValidationError: null,
+      selectValidationError: null
+    });
+    (0, _defineProperty2["default"])(_this2, "setBankInputRef", function (ref) {
+      _this2.bankSelectionInputRef = ref;
     });
     (0, _defineProperty2["default"])(_this2, "copyOrMove", function (newBankId) {
       if (_this2.props.keepCopy) {
@@ -60,7 +70,55 @@ var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/funct
       }
       _this2.closeAction();
     });
+    (0, _defineProperty2["default"])(_this2, "clearValidationErrors", function () {
+      _this2.setState({
+        radioValidationError: null,
+        selectValidationError: null
+      });
+    });
+    (0, _defineProperty2["default"])(_this2, "validateAction", function () {
+      var _this2$state = _this2.state,
+        bankType = _this2$state.bankType,
+        newBankTitle = _this2$state.newBankTitle,
+        selectedBank = _this2$state.selectedBank;
+      if (!bankType) {
+        var _this2$radioInputRef;
+        (_this2$radioInputRef = _this2.radioInputRef) === null || _this2$radioInputRef === void 0 || (_this2$radioInputRef = _this2$radioInputRef.current) === null || _this2$radioInputRef === void 0 || _this2$radioInputRef.focus();
+        _this2.setState({
+          radioValidationError: [{
+            text: (0, _formatMessage["default"])('Please choose a Copy/Move option'),
+            type: 'newError'
+          }]
+        });
+        return false;
+      }
+      if (bankType === 'existing' && !selectedBank) {
+        _this2.bankSelectionInputRef.focus();
+        _this2.setState({
+          selectValidationError: [{
+            text: (0, _formatMessage["default"])('Please select a bank'),
+            type: 'newError'
+          }]
+        });
+        return false;
+      }
+      if (bankType === 'new' && (!newBankTitle || !newBankTitle.trim())) {
+        var _this2$textInputRef;
+        (_this2$textInputRef = _this2.textInputRef) === null || _this2$textInputRef === void 0 || (_this2$textInputRef = _this2$textInputRef.current) === null || _this2$textInputRef === void 0 || _this2$textInputRef.focus();
+        _this2.setState({
+          selectValidationError: [{
+            text: (0, _formatMessage["default"])('Please enter a new bank title'),
+            type: 'newError'
+          }]
+        });
+        return false;
+      }
+      return true;
+    });
     (0, _defineProperty2["default"])(_this2, "continueAction", function () {
+      if (!_this2.validateAction()) {
+        return;
+      }
       if (_this2.state.bankType === 'new') {
         var newBank = _Bank["default"].create({
           title: _this2.state.newBankTitle,
@@ -101,12 +159,14 @@ var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/funct
       return _this2.initiateCopy(newBankId).then(_this2.props.onAdd);
     });
     (0, _defineProperty2["default"])(_this2, "closeAction", function () {
+      _this2.clearValidationErrors();
       if (_this2.props.modalTrigger) {
         _this2.props.modalTrigger.focus();
       }
       _this2.props.closeModal();
     });
     (0, _defineProperty2["default"])(_this2, "onBankSelection", function (e, option) {
+      _this2.clearValidationErrors();
       _this2.setState({
         selectedBank: new _Bank["default"](option)
       });
@@ -115,15 +175,20 @@ var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/funct
       _this2.props.uiSet(_quizCommon.COPY_MOVE_BANK_ENTRY_MODAL_KEEP_COPY, e.target.checked);
     });
     (0, _defineProperty2["default"])(_this2, "handleRadioChange", function (event, value) {
+      _this2.clearValidationErrors();
       _this2.setState({
         bankType: value
       });
     });
     (0, _defineProperty2["default"])(_this2, "onTitleChange", function (e) {
+      _this2.clearValidationErrors();
       _this2.setState({
         newBankTitle: e.target.value
       });
     });
+    _this2.radioInputRef = _react["default"].createRef();
+    _this2.textInputRef = _react["default"].createRef();
+    _this2.bankSelectionInputRef = _react["default"].createRef();
     return _this2;
   }
   (0, _inherits2["default"])(CopyMoveBankEntryModal, _Component);
@@ -138,14 +203,9 @@ var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/funct
   }, {
     key: "addToBankButton",
     value: function addToBankButton() {
-      var _this$state = this.state,
-        bankType = _this$state.bankType,
-        newBankTitle = _this$state.newBankTitle;
-      var disabled = bankType === 'existing' && !this.state.selectedBank || bankType === 'new' && (!newBankTitle || !newBankTitle.trim());
       return /*#__PURE__*/_react["default"].createElement(_uiButtons.Button, {
         color: "primary",
         onClick: this.continueAction,
-        disabled: disabled,
         margin: _quizCommon.XSMALL_SIDE_MARGIN,
         "data-automation": "sdk-add-to-bank-button"
       }, (0, _formatMessage["default"])('Add'));
@@ -155,16 +215,22 @@ var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/funct
     value: function renderBankTypeContent() {
       if (this.state.bankType === 'existing') {
         return /*#__PURE__*/_react["default"].createElement(_presenter["default"], {
+          inputRef: this.setBankInputRef,
           onBankSelection: this.onBankSelection,
           selectedBank: this.state.selectedBank,
-          "data-automation": "sdk-bank-selection"
+          "data-automation": "sdk-bank-selection",
+          externalError: this.state.selectValidationError,
+          isRequired: true
         });
       }
       return /*#__PURE__*/_react["default"].createElement(_quizCommon.TextInput, {
         onChange: this.onTitleChange,
         value: this.state.newBankTitle,
         renderLabel: (0, _formatMessage["default"])('New Bank Title'),
-        type: "text"
+        type: "text",
+        messages: this.state.selectValidationError,
+        ref: this.textInputRef,
+        isRequired: true
       });
     }
   }, {
@@ -174,10 +240,13 @@ var CopyMoveBankEntryModal = exports.CopyMoveBankEntryModal = /*#__PURE__*/funct
         onChange: this.handleRadioChange,
         name: (0, _formatMessage["default"])('Bank Type'),
         defaultValue: this.state.bankType,
-        description: /*#__PURE__*/_react["default"].createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Bank Type'))
+        description: /*#__PURE__*/_react["default"].createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Bank Type')),
+        messages: this.state.radioValidationError,
+        isRequired: true
       }, /*#__PURE__*/_react["default"].createElement(_uiRadioInput.RadioInput, {
         value: "existing",
-        label: (0, _formatMessage["default"])('Existing item bank')
+        label: (0, _formatMessage["default"])('Existing item bank'),
+        ref: this.radioInputRef
       }), /*#__PURE__*/_react["default"].createElement(_uiRadioInput.RadioInput, {
         value: "new",
         label: (0, _formatMessage["default"])('New item bank')

package/lib/common/components/resources/BankSelection/presenter.js

@@ -36,13 +36,15 @@ function _callSuper(_this, derived, args) {
   return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
 }
 var BankSelection = exports.BankSelection = /*#__PURE__*/function (_Component) {
-  function BankSelection() {
+  function BankSelection(props) {
     var _this2;
     (0, _classCallCheck2["default"])(this, BankSelection);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this2 = _callSuper(this, BankSelection, [].concat(args));
+    _this2 = _callSuper(this, BankSelection, [props]);
+    (0, _defineProperty2["default"])(_this2, "setInputRef", function (ref) {
+      var _this2$props$inputRef, _this2$props;
+      _this2.inputRef = ref;
+      (_this2$props$inputRef = (_this2$props = _this2.props).inputRef) === null || _this2$props$inputRef === void 0 || _this2$props$inputRef.call(_this2$props, ref);
+    });
     (0, _defineProperty2["default"])(_this2, "searchBanks", function (search) {
       return _this2.props.simpleFetchBanks({
         search: search
@@ -65,18 +67,31 @@ var BankSelection = exports.BankSelection = /*#__PURE__*/function (_Component) {
         archived: bankOption.archived
       });
     });
+    _this2.inputRef = null;
     return _this2;
   }
   (0, _inherits2["default"])(BankSelection, _Component);
   return (0, _createClass2["default"])(BankSelection, [{
+    key: "focusSelectField",
+    value: function focusSelectField() {
+      if (this.inputRef) {
+        this.inputRef.focus();
+      }
+    }
+  }, {
     key: "getErrors",
     value: function getErrors() {
       var selectedBank = this.props.selectedBank;
       if (selectedBank && selectedBank.archived) {
+        this.focusSelectField();
         return (0, _instUIMessages.toErrors)([(0, _formatMessage["default"])('The item bank "{ bankTitle }" no longer exists. Please select a valid bank.', {
           bankTitle: selectedBank.title
         })]);
       }
+      if (this.props.externalError) {
+        this.focusSelectField();
+        return this.props.externalError;
+      }
     }
   }, {
     key: "selectedOption",
@@ -92,13 +107,15 @@ var BankSelection = exports.BankSelection = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/_react["default"].createElement(_GenericAsyncSearch.GenericAsyncSearch, {
+        inputRef: this.setInputRef,
         onSelectionChange: this.onSelect,
         label: this.props.label || (0, _formatMessage["default"])('Select the destination bank'),
         placeholder: (0, _formatMessage["default"])('Search for a bank'),
         selectedOption: this.selectedOption(),
         getOptions: this.searchBanks,
         messages: this.getErrors(),
-        selectAutomation: 'sdk-item-bank-modal'
+        selectAutomation: 'sdk-item-bank-modal',
+        isRequired: this.props.isRequired
       });
     }
   }]);
@@ -107,12 +124,18 @@ var BankSelection = exports.BankSelection = /*#__PURE__*/function (_Component) {
   label: _propTypes["default"].string,
   onBankSelection: _propTypes["default"].func,
   selectedBank: _reactImmutableProptypes["default"].record,
-  simpleFetchBanks: _propTypes["default"].func
+  simpleFetchBanks: _propTypes["default"].func,
+  externalError: _reactImmutableProptypes["default"].record,
+  inputRef: _propTypes["default"].func,
+  isRequired: _propTypes["default"].bool
 });
 (0, _defineProperty2["default"])(BankSelection, "defaultProps", {
   label: null,
   onBankSelection: function onBankSelection() {},
   selectedBank: null,
-  simpleFetchBanks: _banks.simpleFetchBanks
+  simpleFetchBanks: _banks.simpleFetchBanks,
+  externalError: null,
+  inputRef: function inputRef() {},
+  isRequired: false
 });
 var _default = exports["default"] = BankSelection;

package/lib/common/components/shared/GenericAsyncSearch/GenericAsyncSearch.js

@@ -39,7 +39,9 @@ var GenericAsyncSearch = exports.GenericAsyncSearch = /*#__PURE__*/function (_Co
     (0, _classCallCheck2["default"])(this, GenericAsyncSearch);
     _this2 = _callSuper(this, GenericAsyncSearch, arguments);
     (0, _defineProperty2["default"])(_this2, "setInputRef", function (inputRef) {
+      var _this2$props$inputRef, _this2$props;
       _this2.inputRef = inputRef;
+      (_this2$props$inputRef = (_this2$props = _this2.props).inputRef) === null || _this2$props$inputRef === void 0 || _this2$props$inputRef.call(_this2$props, inputRef);
     });
     (0, _defineProperty2["default"])(_this2, "state", {
       inputValue: _this2.props.selectedOption ? _this2.props.selectedOption.text : '',
@@ -170,7 +172,8 @@ var GenericAsyncSearch = exports.GenericAsyncSearch = /*#__PURE__*/function (_Co
         onRequestHighlightOption: this.handleHighlightOption,
         onRequestSelectOption: this.handleSelectOption,
         onKeyDown: this.handleKeyDown,
-        messages: this.props.messages
+        messages: this.props.messages,
+        isRequired: this.props.isRequired
       }, this.renderOptions());
     }
   }]);
@@ -187,13 +190,17 @@ var GenericAsyncSearch = exports.GenericAsyncSearch = /*#__PURE__*/function (_Co
   }),
   messages: _propTypes["default"].array,
   selectAutomation: _propTypes["default"].string,
-  getOptions: _propTypes["default"].func.isRequired
+  getOptions: _propTypes["default"].func.isRequired,
+  inputRef: _propTypes["default"].func,
+  isRequired: _propTypes["default"].bool
 });
 (0, _defineProperty2["default"])(GenericAsyncSearch, "defaultProps", {
   debounceDelay: 500,
   minChars: 3,
   label: null,
   placeholder: null,
-  selectAutomation: null
+  selectAutomation: null,
+  inputRef: function inputRef() {},
+  isRequired: false
 });
 var _default = exports["default"] = GenericAsyncSearch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "21.0.1-rc.20+86057c52c",
+  "version": "21.0.1-rc.22+82a9a6da7",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -46,11 +46,11 @@
     "@instructure/emotion": "10.14.0",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "3.2.3",
-    "@instructure/quiz-common": "21.0.1-rc.20+86057c52c",
-    "@instructure/quiz-i18n": "21.0.1-rc.20+86057c52c",
-    "@instructure/quiz-interactions": "21.0.1-rc.20+86057c52c",
-    "@instructure/quiz-number-input": "21.0.1-rc.20+86057c52c",
-    "@instructure/quiz-rce": "21.0.1-rc.20+86057c52c",
+    "@instructure/quiz-common": "21.0.1-rc.22+82a9a6da7",
+    "@instructure/quiz-i18n": "21.0.1-rc.22+82a9a6da7",
+    "@instructure/quiz-interactions": "21.0.1-rc.22+82a9a6da7",
+    "@instructure/quiz-number-input": "21.0.1-rc.22+82a9a6da7",
+    "@instructure/quiz-rce": "21.0.1-rc.22+82a9a6da7",
     "@instructure/ui-a11y-content": "10.14.0",
     "@instructure/ui-alerts": "10.14.0",
     "@instructure/ui-avatar": "10.14.0",
@@ -109,7 +109,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "21.0.1-rc.20+86057c52c",
+    "instructure-validations": "21.0.1-rc.22+82a9a6da7",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -158,7 +158,7 @@
     "jquery": "^2.2.3",
     "karma-junit-reporter": "^2.0.1",
     "most-subject": "^5.3.0",
-    "quiz-presets": "21.0.1-rc.20+86057c52c",
+    "quiz-presets": "21.0.1-rc.22+82a9a6da7",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -174,5 +174,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "86057c52ce038aa96623acb895c08e5e505554d6"
+  "gitHead": "82a9a6da7bf0bf5df739a6bbe5298bfa05e1f6fc"
 }