diff --git a/index.html b/index.html
index f4b6a14..dc4b06f 100644
--- a/index.html
+++ b/index.html
@@ -272,6 +272,7 @@ driver.highlight({
opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
padding: 10, // Distance of element from around the edges
allowClose: true, // Whether clicking on overlay should close or not
+ overlayClickNext: false, // Should it move to next step on overlay click
doneBtnText: 'Done', // Text on the final button
closeBtnText: 'Close', // Text on the close button for this step
nextBtnText: 'Next', // Next button text for this step
diff --git a/readme.md b/readme.md
index 79c038d..dc5f40c 100644
--- a/readme.md
+++ b/readme.md
@@ -160,6 +160,7 @@ const driver = new Driver({
opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
padding: 10, // Distance of element from around the edges
allowClose: true, // Whether the click on overlay should close or not
+ overlayClickNext: false, // Whether the click on overlay should move next
doneBtnText: 'Done', // Text on the final button
closeBtnText: 'Close', // Text on the close button for this step
stageBackground: '#ffffff', // Background color for the staged behind highlighted element
diff --git a/src/common/constants.js b/src/common/constants.js
index e8decf6..486eb23 100644
--- a/src/common/constants.js
+++ b/src/common/constants.js
@@ -3,6 +3,7 @@ export const OVERLAY_PADDING = 10;
export const SHOULD_ANIMATE_OVERLAY = true;
export const SHOULD_OUTSIDE_CLICK_CLOSE = true;
+export const SHOULD_OUTSIDE_CLICK_NEXT = false;
export const ESC_KEY_CODE = 27;
export const LEFT_KEY_CODE = 37;
diff --git a/src/index.js b/src/index.js
index 15b27e3..53bb84e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -14,6 +14,7 @@ import {
RIGHT_KEY_CODE,
SHOULD_ANIMATE_OVERLAY,
SHOULD_OUTSIDE_CLICK_CLOSE,
+ SHOULD_OUTSIDE_CLICK_NEXT,
} from './common/constants';
import Stage from './core/stage';
@@ -31,6 +32,7 @@ export default class Driver {
padding: OVERLAY_PADDING, // Spacing around the element from the overlay
scrollIntoViewOptions: null, // Options to be passed to `scrollIntoView`
allowClose: SHOULD_OUTSIDE_CLICK_CLOSE, // Whether to close overlay on click outside the element
+ overlayClickNext: SHOULD_OUTSIDE_CLICK_NEXT, // Whether to move next on click outside the element
stageBackground: '#ffffff', // Background color for the stage
onHighlightStarted: () => { // When element is about to be highlighted
},
@@ -87,6 +89,11 @@ export default class Driver {
const clickedHighlightedElement = highlightedElement.node.contains(e.target);
const clickedPopover = popover && popover.contains(e.target);
+ if (!clickedHighlightedElement && !clickedPopover && this.options.overlayClickNext) {
+ this.moveNext();
+ return;
+ }
+
// Remove the overlay If clicked outside the highlighted element
if (!clickedHighlightedElement && !clickedPopover && this.options.allowClose) {
this.reset();
diff --git a/types/index.d.ts b/types/index.d.ts
index bd0ad56..a73a628 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -645,6 +645,12 @@ declare module 'driver.js' {
*/
allowClose?: boolean,
+ /**
+ * Clicking outside the highlighted element should move next
+ * @default false
+ */
+ overlayClickNext?: boolean,
+
/**
* Background color for the stage behind the highlighted element
* @default '#ffffff'