Skip to content

Commit

Permalink
Blur doesn't fire on click on nonfocusable element
Browse files Browse the repository at this point in the history
The root cause of the issue is that the blur event is not triggered on
the current active element in the click helper in case if the clicked
element is not focusable.

If the clicked element is focusable the previous active element gets
blur event trough the __focus__ helper.

A call to __blur__ was added for the case when the clicked element
is not focusable.
  • Loading branch information
Olga Torkhanova committed May 24, 2021
1 parent 77022fb commit 1bac7d4
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 0 deletions.
7 changes: 7 additions & 0 deletions addon-test-support/@ember/test-helpers/dom/click.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import isFormControl from './-is-form-control';
import Target from './-target';
import { log } from '@ember/test-helpers/dom/-logging';
import { runHooks, registerHook } from '../-internal/helper-hooks';
import { __blur__ } from './blur';

const PRIMARY_BUTTON = 1;
const MAIN_BUTTON_PRESSED = 0;
Expand Down Expand Up @@ -36,6 +37,12 @@ export function __click__(element: Element | Document | Window, options: MouseEv

if (isFocusable(element)) {
__focus__(element);
} else if (
document.activeElement &&
document.activeElement !== element &&
isFocusable(document.activeElement)
) {
__blur__(document.activeElement, null);
}

fireEvent(element, 'mouseup', options);
Expand Down
28 changes: 28 additions & 0 deletions tests/unit/dom/click-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,34 @@ module('DOM Helper: click', function (hooks) {
assert.verifySteps(['mousedown', 'mouseup', 'click']);
});
});

module('focusable and non-focusable elements interaction', function () {
test('clicking on non-focusable element triggers blur on active element', async function (assert) {
element = document.createElement('div');

insertElement(element);

const focusableElement = buildInstrumentedElement('input');

await click(focusableElement);
await click(element);

assert.verifySteps(['mousedown', 'focus', 'focusin', 'mouseup', 'click', 'blur', 'focusout']);
});

test('clicking on focusable element triggers blur on active element', async function (assert) {
element = document.createElement('input');

insertElement(element);

const focusableElement = buildInstrumentedElement('input');

await click(focusableElement);
await click(element);

assert.verifySteps(['mousedown', 'focus', 'focusin', 'mouseup', 'click', 'blur', 'focusout']);
});
});
});

module('DOM Helper: click with window', function () {
Expand Down

0 comments on commit 1bac7d4

Please sign in to comment.