@instructure/quiz-core 20.25.0 → 20.26.1-snapshot.4

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

@@ -16,25 +16,22 @@ import Bank from "../../../common/records/Bank.js";
 import BankSelection from "../../../common/components/resources/BankSelection/index.js";
 import { Spinner } from '@instructure/ui-spinner';
 import { Text } from '@instructure/ui-text';
-import { IconCheckLine, IconNoLine, IconWarningLine } from '@instructure/ui-icons';
+import { IconNoLine, IconWarningLine } from '@instructure/ui-icons';
 import { View } from '@instructure/ui-view';
 import { Flex } from '@instructure/ui-flex';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Modal, ModalHeader, ModalBody, ModalFooter, ADD_TO_BANK_MODAL_BANK_SELECTION, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
 import { featureOn } from "../../../common/util/featureCheck.js";
-var _ref2 = /*#__PURE__*/React.createElement(IconCheckLine, {
-  color: "success"
-});
-var _ref3 = /*#__PURE__*/React.createElement(Flex.Item, {
+var _ref2 = /*#__PURE__*/React.createElement(Flex.Item, {
   padding: "0 small 0 0"
 }, /*#__PURE__*/React.createElement(IconNoLine, {
   color: "error",
   size: "small"
 }));
-var _ref4 = /*#__PURE__*/React.createElement(IconWarningLine, {
+var _ref3 = /*#__PURE__*/React.createElement(IconWarningLine, {
   color: "warning"
 });
-var _ref5 = /*#__PURE__*/React.createElement("br", null);
+var _ref4 = /*#__PURE__*/React.createElement("br", null);
 export var AddToBankModal = /*#__PURE__*/function (_Component) {
   _inherits(AddToBankModal, _Component);
   var _super = _createSuper(AddToBankModal);
@@ -211,9 +208,11 @@ export var AddToBankModal = /*#__PURE__*/function (_Component) {
             renderTitle: t('Checking content shareability...')
           }), "\xA0", t('Validating content...'));
         } else if (this.state.contentShareable === 'true') {
-          content = /*#__PURE__*/React.createElement(Text, null, _ref2, "\xA0", t('Good to go!'));
+          // No message needed. The API call to check shareability is very fast in most cases,
+          // so the user may be distracted by a message here.
+          content = null;
         } else if (this.state.contentShareable === 'false') {
-          content = /*#__PURE__*/React.createElement(Flex, null, _ref3, /*#__PURE__*/React.createElement(Flex.Item, {
+          content = /*#__PURE__*/React.createElement(Flex, null, _ref2, /*#__PURE__*/React.createElement(Flex.Item, {
             shouldShrink: true
           }, /*#__PURE__*/React.createElement(Text, {
             color: "danger"
@@ -221,7 +220,7 @@ export var AddToBankModal = /*#__PURE__*/function (_Component) {
         } else {
           content = /*#__PURE__*/React.createElement(Text, {
             color: "warning"
-          }, _ref4, "\xA0", t('There was an error attempting to validate shareability.'));
+          }, _ref3, "\xA0", t('There was an error attempting to validate shareability.'));
         }
         return /*#__PURE__*/React.createElement(View, {
           as: "div",
@@ -243,7 +242,7 @@ export var AddToBankModal = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/React.createElement(RadioInput, {
         value: "new",
         label: t('New item bank')
-      })), _ref5, this.renderBankTypeContent(), this.renderContentShareabilityMessage());
+      })), _ref4, this.renderBankTypeContent(), this.renderContentShareabilityMessage());
     }
   }, {
     key: "render",

package/es/building/components/resources/ActionButtons/presenter.js

@@ -13,7 +13,7 @@ import { withStyle, jsx, Global } from '@instructure/emotion';
 import DragHandle from "../../../../common/components/shared/drag_and_drop/DragHandle/index.js";
 import makeScrollable from "../../../../common/components/shared/functionality/makeScrollable.js";
 import noop from "../../../../common/util/noop.js";
-import { EDIT, REMOVE, COPY } from '@instructure/quiz-common';
+import { EDIT, REMOVE, COPY, END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 var ScrollTargetButton = makeScrollable(IconButton);
@@ -71,8 +71,9 @@ export var ActionButtons = (_dec = withStyle(generateStyle, generateComponentThe
     key: "render",
     value: function render() {
       var hideClass = !this.props.shouldRenderEdit ? 'hide' : '';
+      var parentDivClass = "buttons ".concat(END_EDITING_TRIGGER_CLASSNAME);
       return jsx("div", {
-        className: "buttons",
+        className: parentDivClass,
         tabIndex: "-1",
         onFocus: this.onButtonFocus,
         css: this.props.styles.buttons

package/es/building/components/resources/quiz/instructions/Edit/presenter.js

@@ -10,7 +10,7 @@ import { Button } from '@instructure/ui-buttons';
 import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import CustomPropTypes from "../../../../../../common/util/CustomPropTypes.js";
-import elementsForSelectors from "../../../../../../common/util/ElementsForSelectors.js";
+import { checkClickedNode } from "../../../../../../common/util/clickHandlers.js";
 import { INSTRUCTIONS_EDIT_ID } from '@instructure/quiz-common';
 import { RichContentInput } from '@instructure/quiz-rce';
 import generateStyle from "./styles.js";
@@ -36,10 +36,10 @@ var QuizInstructionsEdit = (_dec = withStyle(generateStyle, generateComponentThe
   }, {
     key: "ignoreClickOutsideIf",
     value: function ignoreClickOutsideIf(e) {
-      var appNodes = elementsForSelectors(this.props.appContainer);
-      return appNodes.every(function (node) {
-        return node && !node.contains(e.target);
-      });
+      var _checkClickedNode = checkClickedNode(e, this.props.appContainer),
+        isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger,
+        outsideApp = _checkClickedNode.outsideApp;
+      return outsideApp || !isEndEditingTrigger;
     }
   }, {
     key: "render",

package/es/building/components/resources/quizEntry/QuizEntryEdit/presenter.js

@@ -16,10 +16,10 @@ import first from 'lodash/first';
 import { withStyle, jsx, Global } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import CustomPropTypes from "../../../../../common/util/CustomPropTypes.js";
-import elementsForSelectors from "../../../../../common/util/ElementsForSelectors.js";
 import AddToBankModal from "../../../../../banks/components/AddToBankModal/index.js";
 import DragAndDropZone from "../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js";
 import wrapWithOutsideClickEmotion from "../../../../../common/components/shared/functionality/componentWithOutsideClickEmotion.js";
+import { checkClickedNode } from "../../../../../common/util/clickHandlers.js";
 import QuizEntryEditHeader from "./Header/index.js";
 import QuizEntryEditFooter from "./Footer/index.js";
 import { SHOULD_CLONE_ITEM, TEMPORARY_ITEM_ID, DELETED_QUIZ_ENTRY, API_INPUT_VALIDATION_ERROR, CLEAR_ALL_INPUT_VALIDATION_ERRORS, PARENT_TYPE_ADDING_TO_BANK } from '@instructure/quiz-common';
@@ -294,12 +294,10 @@ var QuizEntryEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   }, {
     key: "ignoreClickOutsideIf",
     value: function ignoreClickOutsideIf(e) {
-      // Need to iterate over the appNodes since Gauge and lti have a different index for the sdk node
-      var appNodes = elementsForSelectors(this.props.appContainer);
-      var outsideApp = appNodes.every(function (node) {
-        return node && !node.contains(e.target);
-      });
-      return this.props.isOccluded || outsideApp;
+      var _checkClickedNode = checkClickedNode(e, this.props.appContainer),
+        isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger,
+        outsideApp = _checkClickedNode.outsideApp;
+      return this.props.isOccluded || outsideApp || !isEndEditingTrigger;
     }
   }, {
     key: "isValid",

package/es/common/components/layout/sidebar/Sidebar/index.js

@@ -19,7 +19,7 @@ import { View } from '@instructure/ui-view';
 import { withStyle, jsx, Global } from '@instructure/emotion';
 import { Heading } from '@instructure/ui-heading';
 import t from '@instructure/quiz-i18n/es/format-message';
-import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY } from '@instructure/quiz-common';
+import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY, END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
 import { onPhone } from "../../../../util/windowChecks.js";
 import CustomPropTypes from "../../../../util/CustomPropTypes.js";
 import noop from "../../../../util/noop.js";
@@ -105,7 +105,8 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
         return;
       }
       return jsx("div", {
-        css: this.props.styles.sidebar.actionableInfo
+        css: this.props.styles.sidebar.actionableInfo,
+        className: END_EDITING_TRIGGER_CLASSNAME
       }, jsx(Link, {
         href: "#",
         margin: "small",
@@ -127,7 +128,8 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
         return;
       }
       return jsx("div", {
-        css: this.props.styles.sidebar.actionableInfo
+        css: this.props.styles.sidebar.actionableInfo,
+        className: END_EDITING_TRIGGER_CLASSNAME
       }, jsx(Link, {
         href: "#",
         margin: "small",

package/es/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -16,6 +16,7 @@ import t from '@instructure/quiz-i18n/es/format-message';
 import { RichContentRenderer } from '@instructure/quiz-rce';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
 export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_SidebarItem = /*#__PURE__*/function (_Component) {
   _inherits(SidebarItem, _Component);
   var _super = _createSuper(SidebarItem);
@@ -110,7 +111,8 @@ export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme
     key: "renderClosed",
     value: function renderClosed() {
       return jsx("div", {
-        css: this.props.styles.sidebarItem
+        css: this.props.styles.sidebarItem,
+        className: END_EDITING_TRIGGER_CLASSNAME
       }, this.renderButton());
     }
   }, {
@@ -121,8 +123,9 @@ export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme
         itemName = _this$props3.itemName,
         pointsPossible = _this$props3.pointsPossible,
         styles = _this$props3.styles;
+      var parentDivClass = "sidebarIsOpen ".concat(END_EDITING_TRIGGER_CLASSNAME);
       return jsx("div", {
-        className: "sidebarIsOpen",
+        className: parentDivClass,
         css: styles.sidebarItem
       }, jsx(Flex, {
         justifyItems: "space-between"

package/es/common/components/layout/sidebar/Stimulus/presenter.js

@@ -18,6 +18,7 @@ import Summary from "./Summary/index.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
+import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
 export var DISPLAY_AS_SUMMARY_LIMIT = 5;
 var _ref = jsx(IconTextLeftLine, {
   color: "primary"
@@ -82,7 +83,8 @@ export var SidebarStimulus = (_dec = withStyle(generateStyle, generateComponentT
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToItem,
-        renderIcon: _ref
+        renderIcon: _ref,
+        className: END_EDITING_TRIGGER_CLASSNAME
       }, jsx(ScreenReaderContent, null, t('Navigate to stimulus at position { displayPosition }', {
         displayPosition: displayPosition
       })));

package/es/common/components/resources/quiz/AddContent/Button/index.js

@@ -13,6 +13,7 @@ import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
 export var AddContentButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_AddContentButton = /*#__PURE__*/function (_Component) {
   _inherits(AddContentButton, _Component);
   var _super = _createSuper(AddContentButton);
@@ -60,6 +61,7 @@ export var AddContentButton = (_dec = withStyle(generateStyle, generateComponent
     key: "renderNonStimulus",
     value: function renderNonStimulus() {
       return jsx("div", {
+        className: END_EDITING_TRIGGER_CLASSNAME,
         css: this.props.styles.newItemButtonHolder
       }, jsx("button", {
         ref: this.storeButtonElemRef,

package/es/common/components/resources/stimulus/StimulusEdit/presenter.js

@@ -21,7 +21,7 @@ import AddToBankModal from "../../../../../banks/components/AddToBankModal/index
 import AddToBankOptions from "../../../../../building/components/resources/AddToBankOptions/index.js";
 import WarningWrapper from "../../WarningWrapper/index.js";
 import CustomPropTypes from "../../../../../common/util/CustomPropTypes.js";
-import elementsForSelectors from "../../../../../common/util/ElementsForSelectors.js";
+import { checkClickedNode } from "../../../../../common/util/clickHandlers.js";
 import StimulusShowInfo from "../StimulusShowInfo/index.js";
 import StimulusEditInfo from "../StimulusEditInfo/index.js";
 import wrapWithOutsideClickEmotion from "../../../shared/functionality/componentWithOutsideClickEmotion.js";
@@ -286,12 +286,10 @@ export var StimulusEdit = (_dec = withStyle(generateStyle, generateComponentThem
   }, {
     key: "ignoreClickOutsideIf",
     value: function ignoreClickOutsideIf(e) {
-      // Need to iterate over the appNodes since Gauge and lti have a different index for the sdk node
-      var appNodes = elementsForSelectors(this.props.appContainer);
-      var outsideApp = appNodes.every(function (node) {
-        return node && !node.contains(e.target);
-      });
-      return outsideApp;
+      var _checkClickedNode = checkClickedNode(e, this.props.appContainer),
+        isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger,
+        outsideApp = _checkClickedNode.outsideApp;
+      return outsideApp || !isEndEditingTrigger;
     }
   }, {
     key: "afterSubmit",

package/es/common/components/shared/overlay/index.js

@@ -18,6 +18,7 @@ import PropTypes from 'prop-types';
 import { withStyle, jsx, Global } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
 var Overlay = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Overlay = /*#__PURE__*/function (_Component) {
   _inherits(Overlay, _Component);
   var _super = _createSuper(Overlay);
@@ -31,9 +32,10 @@ var Overlay = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
       if (this.props.hideOverlay) {
         return null;
       }
+      var overlayClass = "overlay ".concat(END_EDITING_TRIGGER_CLASSNAME);
       return jsx("div", {
         role: "presentation",
-        className: "overlay",
+        className: overlayClass,
         css: this.props.styles.overlay,
         onClick: this.props.onClick,
         "data-automation": "sdk-overlay"

package/es/common/util/clickHandlers.js

@@ -0,0 +1,19 @@
+import elementsForSelectors from "./ElementsForSelectors.js";
+import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
+export function checkClickedNode(e, appContainer) {
+  // Need to iterate over the appNodes since Gauge and lti have a different index for the sdk node
+  var appNodes = elementsForSelectors(appContainer);
+  var outsideApp = appNodes.every(function (node) {
+    return node && !node.contains(e.target);
+  });
+
+  // checking if the click was on an element that should end editing
+  var endEditingNodes = elementsForSelectors(".".concat(END_EDITING_TRIGGER_CLASSNAME));
+  var isEndEditingTrigger = endEditingNodes.some(function (node) {
+    return node && node.contains(e.target);
+  });
+  return {
+    isEndEditingTrigger: isEndEditingTrigger,
+    outsideApp: outsideApp
+  };
+}

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

@@ -30,19 +30,16 @@ var _uiFlex = require("@instructure/ui-flex");
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 var _quizCommon = require("@instructure/quiz-common");
 var _featureCheck = require("../../../common/util/featureCheck.js");
-var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckLine, {
-  color: "success"
-});
-var _ref3 = /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+var _ref2 = /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
   padding: "0 small 0 0"
 }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconNoLine, {
   color: "error",
   size: "small"
 }));
-var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningLine, {
+var _ref3 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningLine, {
   color: "warning"
 });
-var _ref5 = /*#__PURE__*/_react.default.createElement("br", null);
+var _ref4 = /*#__PURE__*/_react.default.createElement("br", null);
 var AddToBankModal = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AddToBankModal, _Component);
   var _super = (0, _createSuper2.default)(AddToBankModal);
@@ -219,9 +216,11 @@ var AddToBankModal = /*#__PURE__*/function (_Component) {
             renderTitle: (0, _formatMessage.default)('Checking content shareability...')
           }), "\xA0", (0, _formatMessage.default)('Validating content...'));
         } else if (this.state.contentShareable === 'true') {
-          content = /*#__PURE__*/_react.default.createElement(_uiText.Text, null, _ref2, "\xA0", (0, _formatMessage.default)('Good to go!'));
+          // No message needed. The API call to check shareability is very fast in most cases,
+          // so the user may be distracted by a message here.
+          content = null;
         } else if (this.state.contentShareable === 'false') {
-          content = /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, null, _ref3, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+          content = /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, null, _ref2, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
             shouldShrink: true
           }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
             color: "danger"
@@ -229,7 +228,7 @@ var AddToBankModal = /*#__PURE__*/function (_Component) {
         } else {
           content = /*#__PURE__*/_react.default.createElement(_uiText.Text, {
             color: "warning"
-          }, _ref4, "\xA0", (0, _formatMessage.default)('There was an error attempting to validate shareability.'));
+          }, _ref3, "\xA0", (0, _formatMessage.default)('There was an error attempting to validate shareability.'));
         }
         return /*#__PURE__*/_react.default.createElement(_uiView.View, {
           as: "div",
@@ -251,7 +250,7 @@ var AddToBankModal = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
         value: "new",
         label: (0, _formatMessage.default)('New item bank')
-      })), _ref5, this.renderBankTypeContent(), this.renderContentShareabilityMessage());
+      })), _ref4, this.renderBankTypeContent(), this.renderContentShareabilityMessage());
     }
   }, {
     key: "render",

package/lib/building/components/resources/ActionButtons/presenter.js

@@ -78,8 +78,9 @@ var ActionButtons = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
     key: "render",
     value: function render() {
       var hideClass = !this.props.shouldRenderEdit ? 'hide' : '';
+      var parentDivClass = "buttons ".concat(_quizCommon.END_EDITING_TRIGGER_CLASSNAME);
       return (0, _emotion.jsx)("div", {
-        className: "buttons",
+        className: parentDivClass,
         tabIndex: "-1",
         onFocus: this.onButtonFocus,
         css: this.props.styles.buttons

package/lib/building/components/resources/quiz/instructions/Edit/presenter.js

@@ -15,7 +15,7 @@ var _uiButtons = require("@instructure/ui-buttons");
 var _emotion = require("@instructure/emotion");
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 var _CustomPropTypes = _interopRequireDefault(require("../../../../../../common/util/CustomPropTypes.js"));
-var _ElementsForSelectors = _interopRequireDefault(require("../../../../../../common/util/ElementsForSelectors.js"));
+var _clickHandlers = require("../../../../../../common/util/clickHandlers.js");
 var _quizCommon = require("@instructure/quiz-common");
 var _quizRce = require("@instructure/quiz-rce");
 var _styles = _interopRequireDefault(require("./styles.js"));
@@ -44,10 +44,10 @@ var QuizInstructionsEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _the
   }, {
     key: "ignoreClickOutsideIf",
     value: function ignoreClickOutsideIf(e) {
-      var appNodes = (0, _ElementsForSelectors.default)(this.props.appContainer);
-      return appNodes.every(function (node) {
-        return node && !node.contains(e.target);
-      });
+      var _checkClickedNode = (0, _clickHandlers.checkClickedNode)(e, this.props.appContainer),
+        isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger,
+        outsideApp = _checkClickedNode.outsideApp;
+      return outsideApp || !isEndEditingTrigger;
     }
   }, {
     key: "render",

package/lib/building/components/resources/quizEntry/QuizEntryEdit/presenter.js

@@ -21,10 +21,10 @@ var _first = _interopRequireDefault(require("lodash/first"));
 var _emotion = require("@instructure/emotion");
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 var _CustomPropTypes = _interopRequireDefault(require("../../../../../common/util/CustomPropTypes.js"));
-var _ElementsForSelectors = _interopRequireDefault(require("../../../../../common/util/ElementsForSelectors.js"));
 var _index = _interopRequireDefault(require("../../../../../banks/components/AddToBankModal/index.js"));
 var _index2 = _interopRequireDefault(require("../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js"));
 var _componentWithOutsideClickEmotion = _interopRequireDefault(require("../../../../../common/components/shared/functionality/componentWithOutsideClickEmotion.js"));
+var _clickHandlers = require("../../../../../common/util/clickHandlers.js");
 var _index3 = _interopRequireDefault(require("./Header/index.js"));
 var _index4 = _interopRequireDefault(require("./Footer/index.js"));
 var _quizCommon = require("@instructure/quiz-common");
@@ -302,12 +302,10 @@ var QuizEntryEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
   }, {
     key: "ignoreClickOutsideIf",
     value: function ignoreClickOutsideIf(e) {
-      // Need to iterate over the appNodes since Gauge and lti have a different index for the sdk node
-      var appNodes = (0, _ElementsForSelectors.default)(this.props.appContainer);
-      var outsideApp = appNodes.every(function (node) {
-        return node && !node.contains(e.target);
-      });
-      return this.props.isOccluded || outsideApp;
+      var _checkClickedNode = (0, _clickHandlers.checkClickedNode)(e, this.props.appContainer),
+        isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger,
+        outsideApp = _checkClickedNode.outsideApp;
+      return this.props.isOccluded || outsideApp || !isEndEditingTrigger;
     }
   }, {
     key: "isValid",

package/lib/common/components/layout/sidebar/Sidebar/index.js

@@ -112,7 +112,8 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         return;
       }
       return (0, _emotion.jsx)("div", {
-        css: this.props.styles.sidebar.actionableInfo
+        css: this.props.styles.sidebar.actionableInfo,
+        className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
       }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",
@@ -134,7 +135,8 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         return;
       }
       return (0, _emotion.jsx)("div", {
-        css: this.props.styles.sidebar.actionableInfo
+        css: this.props.styles.sidebar.actionableInfo,
+        className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
       }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",

package/lib/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -21,6 +21,7 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 var _quizRce = require("@instructure/quiz-rce");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
+var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _SidebarItem;
 /** @jsx jsx */
 var SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_SidebarItem = /*#__PURE__*/function (_Component) {
@@ -117,7 +118,8 @@ var SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
     key: "renderClosed",
     value: function renderClosed() {
       return (0, _emotion.jsx)("div", {
-        css: this.props.styles.sidebarItem
+        css: this.props.styles.sidebarItem,
+        className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
       }, this.renderButton());
     }
   }, {
@@ -128,8 +130,9 @@ var SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
         itemName = _this$props3.itemName,
         pointsPossible = _this$props3.pointsPossible,
         styles = _this$props3.styles;
+      var parentDivClass = "sidebarIsOpen ".concat(_quizCommon.END_EDITING_TRIGGER_CLASSNAME);
       return (0, _emotion.jsx)("div", {
-        className: "sidebarIsOpen",
+        className: parentDivClass,
         css: styles.sidebarItem
       }, (0, _emotion.jsx)(_uiFlex.Flex, {
         justifyItems: "space-between"

package/lib/common/components/layout/sidebar/Stimulus/presenter.js

@@ -23,6 +23,7 @@ var _index3 = _interopRequireDefault(require("./Summary/index.js"));
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _SidebarStimulus;
 /** @jsx jsx */
 var DISPLAY_AS_SUMMARY_LIMIT = 5;
@@ -90,7 +91,8 @@ var SidebarStimulus = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.de
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToItem,
-        renderIcon: _ref
+        renderIcon: _ref,
+        className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
       }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to stimulus at position { displayPosition }', {
         displayPosition: displayPosition
       })));

package/lib/common/components/resources/quiz/AddContent/Button/index.js

@@ -18,6 +18,7 @@ var _emotion = require("@instructure/emotion");
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
+var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _AddContentButton;
 /** @jsx jsx */
 var AddContentButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_AddContentButton = /*#__PURE__*/function (_Component) {
@@ -67,6 +68,7 @@ var AddContentButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.d
     key: "renderNonStimulus",
     value: function renderNonStimulus() {
       return (0, _emotion.jsx)("div", {
+        className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME,
         css: this.props.styles.newItemButtonHolder
       }, (0, _emotion.jsx)("button", {
         ref: this.storeButtonElemRef,

package/lib/common/components/resources/stimulus/StimulusEdit/presenter.js

@@ -26,7 +26,7 @@ var _index = _interopRequireDefault(require("../../../../../banks/components/Add
 var _index2 = _interopRequireDefault(require("../../../../../building/components/resources/AddToBankOptions/index.js"));
 var _index3 = _interopRequireDefault(require("../../WarningWrapper/index.js"));
 var _CustomPropTypes = _interopRequireDefault(require("../../../../../common/util/CustomPropTypes.js"));
-var _ElementsForSelectors = _interopRequireDefault(require("../../../../../common/util/ElementsForSelectors.js"));
+var _clickHandlers = require("../../../../../common/util/clickHandlers.js");
 var _index4 = _interopRequireDefault(require("../StimulusShowInfo/index.js"));
 var _index5 = _interopRequireDefault(require("../StimulusEditInfo/index.js"));
 var _componentWithOutsideClickEmotion = _interopRequireDefault(require("../../../shared/functionality/componentWithOutsideClickEmotion.js"));
@@ -293,12 +293,10 @@ var StimulusEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
   }, {
     key: "ignoreClickOutsideIf",
     value: function ignoreClickOutsideIf(e) {
-      // Need to iterate over the appNodes since Gauge and lti have a different index for the sdk node
-      var appNodes = (0, _ElementsForSelectors.default)(this.props.appContainer);
-      var outsideApp = appNodes.every(function (node) {
-        return node && !node.contains(e.target);
-      });
-      return outsideApp;
+      var _checkClickedNode = (0, _clickHandlers.checkClickedNode)(e, this.props.appContainer),
+        isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger,
+        outsideApp = _checkClickedNode.outsideApp;
+      return outsideApp || !isEndEditingTrigger;
     }
   }, {
     key: "afterSubmit",

package/lib/common/components/shared/overlay/index.js

@@ -15,6 +15,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
+var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _Overlay;
 /** @jsx jsx */
 /* eslint "jsx-a11y/click-events-have-key-events": "warn" */
@@ -37,9 +38,10 @@ var Overlay = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       if (this.props.hideOverlay) {
         return null;
       }
+      var overlayClass = "overlay ".concat(_quizCommon.END_EDITING_TRIGGER_CLASSNAME);
       return (0, _emotion.jsx)("div", {
         role: "presentation",
-        className: "overlay",
+        className: overlayClass,
         css: this.props.styles.overlay,
         onClick: this.props.onClick,
         "data-automation": "sdk-overlay"

package/lib/common/util/clickHandlers.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkClickedNode = checkClickedNode;
+var _ElementsForSelectors = _interopRequireDefault(require("./ElementsForSelectors.js"));
+var _quizCommon = require("@instructure/quiz-common");
+function checkClickedNode(e, appContainer) {
+  // Need to iterate over the appNodes since Gauge and lti have a different index for the sdk node
+  var appNodes = (0, _ElementsForSelectors.default)(appContainer);
+  var outsideApp = appNodes.every(function (node) {
+    return node && !node.contains(e.target);
+  });
+
+  // checking if the click was on an element that should end editing
+  var endEditingNodes = (0, _ElementsForSelectors.default)(".".concat(_quizCommon.END_EDITING_TRIGGER_CLASSNAME));
+  var isEndEditingTrigger = endEditingNodes.some(function (node) {
+    return node && node.contains(e.target);
+  });
+  return {
+    isEndEditingTrigger: isEndEditingTrigger,
+    outsideApp: outsideApp
+  };
+}