const activateTrap = function () {

cy.get('@testRoot')

.findByRole('button', { name: 'activate trap' })

.as('lastlyFocusedElementBeforeTrapIsActivated')

.click();

};

const checkTrap = function () {

// 1st element should be focused

cy.get('@testRoot')

.findByRole('link', { name: 'with' })

.as('firstElementInTrap')

.should('be.focused');

// trap is active (keep focus in trap by tabbing through the focus trap's tabbable elements)

cy.get('@firstElementInTrap')

.tab()

.should('have.text', 'some')

.should('be.focused')

.tab()

.should('have.text', 'focusable')

.should('be.focused')

.tab()

.as('lastElementInTrap')

.should('contain', 'nothing')

.should('be.focused')

.tab();

// trap is active (keep focus in trap by shift-tabbing through the focus trap's tabbable elements)

cy.get('@firstElementInTrap').should('be.focused').tab({ shift: true });

cy.get('@lastElementInTrap').should('be.focused');

};

it('traps focus, deactivates on outside click on checkbox and checkbox focused, returnFocusOnDeactivate=true', () => {

cy.get('#demo-clickoutsidedeactivates').as('testRoot');

// set returnFocusOnDeactivate=TRUE

cy.get('#select-returnfocusondeactivate-clickoutsidedeactivates').select(

'true'

);

activateTrap();

checkTrap();

// deactivate trap by toggling FOCUSABLE checkbox

cy.get('#checkbox-clickoutsidedeactivates').click();

cy.get('#checkbox-clickoutsidedeactivates').should('be.checked');

// implies trap no longer active since checkbox is outside trap

cy.get('#checkbox-clickoutsidedeactivates').should('be.focused');

cy.get('@lastElementInTrap').should('not.be.focused');

});

it('traps focus, deactivates on outside click on document and "activate trap" button focused', () => {

cy.get('#demo-clickoutsidedeactivates').as('testRoot');

// set returnFocusOnDeactivate=TRUE

cy.get('#select-returnfocusondeactivate-clickoutsidedeactivates').select(

'true'

);

activateTrap();

checkTrap();

// deactivate trap by clicking NON-focusable element

cy.get('#clickoutsidedeactivates-heading').click();

cy.get('@lastlyFocusedElementBeforeTrapIsActivated').should('be.focused');

cy.get('@lastElementInTrap').should('not.be.focused');

});

it('traps focus, deactivates on outside click on checkbox and checkbox focused, returnFocusOnDeactivate=false', () => {

cy.get('#demo-clickoutsidedeactivates').as('testRoot');

// set returnFocusOnDeactivate=FALSE

cy.get('#select-returnfocusondeactivate-clickoutsidedeactivates').select(

'false'

);

activateTrap();

checkTrap();

// deactivate trap by toggling FOCUSABLE checkbox

cy.get('#checkbox-clickoutsidedeactivates').click();

cy.get('#checkbox-clickoutsidedeactivates').should('be.checked');

// implies trap no longer active since checkbox is outside trap

cy.get('#checkbox-clickoutsidedeactivates').should('be.focused');

cy.get('@lastElementInTrap').should('not.be.focused');

});

it('traps focus, deactivates on outside click on document, and nothing is focused', () => {

cy.get('#demo-clickoutsidedeactivates').as('testRoot');

// set returnFocusOnDeactivate=FALSE

cy.get('#select-returnfocusondeactivate-clickoutsidedeactivates').select(

'false'

);

activateTrap();

checkTrap();

// deactivate trap by clicking NON-focusable element

cy.get('#clickoutsidedeactivates-heading').click();

cy.get('@lastlyFocusedElementBeforeTrapIsActivated').should(

'not.be.focused'

);

cy.get('@lastElementInTrap').should('not.be.focused');

cy.get('*:focus').should('not.exist'); // nothing has focus

});

<p>

The <code>returnFocusOnDeactivate</code> option controls whether focus should be returned to the last-focused element when the trap was activated (the "activate trap" button) or not -- IIF what you click on outside the trap is <strong>not</strong> focusable:

</p>

<ul>

<li>If this option is <code>true</code> (the default behavior) but you click on a focusable node outside the trap (like the checkbox), the click will go through, the checkbox will be toggled, and focus will remain on the checkbox.</li>

<li>If <code>true</code> but you click on something <strong>not</strong> focusable (like the page/document), then focus will return to the "activate trap" button (since that was the last-focused node before the trap was activate).</li>

<li>If <code>false</code>, then it doesn't matter what you click on (focusable or not), focus will go away from the trap to where you clicked, or to nowhere if you clicked on something not focusable (like the page/document).</li>

</ul>

Set <code>returnFocusOnDeactivate</code> as:

<select id="select-returnfocusondeactivate-clickoutsidedeactivates">

<option value="true">true</option><!-- default -->

<option value="false">false</option>

</select>

</label>

</p>

<p>

<label>

Toggling me causes auto-deactivation of the trap:

<input type="checkbox" id="checkbox-clickoutsidedeactivates" />

const { createFocusTrap } = require('../../dist/focus-trap');

const container = document.getElementById('clickoutsidedeactivates');

const trigger = document.getElementById('activate-clickoutsidedeactivates');

let active = false;

let returnFocusOnDeactivate = true;

const initialize = function () {

return createFocusTrap('#clickoutsidedeactivates', {

returnFocusOnDeactivate,

clickOutsideDeactivates: true,

escapeDeactivates: false,

onActivate: function () {

container.className = 'trap is-active';

},

onDeactivate: function () {

active = false;

container.className = 'trap';

},

});

const activate = function () {

let focusTrap = initialize();

.getElementById('select-returnfocusondeactivate-clickoutsidedeactivates')

.addEventListener('change', function (event) {

returnFocusOnDeactivate = event.target.value === 'true';

focusTrap = initialize();

});

if (container.contains(e.target)) {

// allow the click since it ocurred inside the trap

return;

}

// immediately deactivate the trap

// if, on deactivation, we should return focus to the node originally-focused

// when the trap was activated (or the configured `setReturnFocus` node),

// then assume it's also OK to return focus to the outside node that was

// just clicked, causing deactivation, as long as that node is focusable;

// if it isn't focusable, then return focus to the original node focused

// on activation (or the configured `setReturnFocus` node)

// NOTE: by setting `returnFocus: false`, deactivate() will do nothing,

// which will result in the outside click setting focus to the node

// that was clicked, whether it's focusable or not; by setting

// `returnFocus: true`, we'll attempt to re-focus the node originally-focused

// on activation (or the configured `setReturnFocus` node)

returnFocus: config.returnFocusOnDeactivate && !isFocusable(e.target),

// allow the click outside the trap to take place

// otherwise, prevent the click