Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: toggle button should not leave focus on external element #822

Merged
merged 4 commits into from
Jul 1, 2019
Merged

fix: toggle button should not leave focus on external element #822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
af0daf1
fix: focused check
Haprog Jun 27, 2019
d8f7834
fix: toggle button should not leave focus on external element
Haprog Jun 27, 2019
4ecee07
test: optimize toggling tests
Haprog Jun 28, 2019
6c5a8f9
test: add focus handling test
Haprog Jun 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 9 additions & 7 deletions src/vaadin-combo-box-mixin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,13 +326,9 @@

if (this.opened) {
this._openedWithFocusRing = this.hasAttribute('focus-ring') || (this.focusElement && this.focusElement.hasAttribute('focus-ring'));
// For touch devices, we don't want to popup virtual keyboard on touch devices unless input
// is explicitly focused by the user.
if (!this.$.overlay.touchDevice) {
// Check to see if there is a focused property and if it's already true.
if (!this.focused) {
this.focus();
}
// For touch devices, we don't want to popup virtual keyboard unless input is explicitly focused by the user.
if (!this.hasAttribute('focused') && !this.$.overlay.touchDevice) {
this.focus();
}
} else {
this._onClosed();
Expand Down Expand Up @@ -513,6 +509,12 @@
if (toggleElement) {
// Don't blur the input on toggle mousedown
toggleElement.addEventListener('mousedown', e => e.preventDefault());
// Unfocus previously focused element if focus is not inside combo box (on touch devices)
toggleElement.addEventListener('click', e => {
if (this.$.overlay.touchDevice && !this.hasAttribute('focused')) {
document.activeElement.blur();
}
});
}
}

Expand Down
26 changes: 22 additions & 4 deletions test/toggling-dropdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@
<script>
describe('toggling the dropdown', () => {
let combobox;
let comboboxLight;

function clickToggleIcon() {
fireMousedownMouseupClick(combobox._toggleElement);
Expand All @@ -59,7 +58,6 @@

beforeEach(() => {
combobox = fixture('combobox');
comboboxLight = fixture('combobox-light');
});

describe('opening', () => {
Expand Down Expand Up @@ -215,9 +213,11 @@
});

it('should prevent default on overlay mousedown (vaadin-combo-box-light)', () => {
combobox = fixture('combobox-light');

const preventDefaultSpy = sinon.spy();
comboboxLight.open();
comboboxLight.$.overlay.$.dropdown.$.overlay.dispatchEvent(createMouseDown(preventDefaultSpy));
combobox.open();
combobox.$.overlay.$.dropdown.$.overlay.dispatchEvent(createMouseDown(preventDefaultSpy));

expect(preventDefaultSpy).to.have.been.called;
});
Expand Down Expand Up @@ -363,6 +363,24 @@
expect(dropdown.$).to.be.ok;
});
});

describe('external focus (initially)', () => {
let input, blurSpy;

beforeEach(() => {
input = document.createElement('input');
combobox.insertAdjacentElement('beforebegin', input);
input.focus();
blurSpy = sinon.spy(input, 'blur');
});

if (touchDevice) {
it('should blur previously focused element when clicking on toggle button', () => {
clickToggleIcon();
expect(blurSpy).to.be.called;
});
}
});
});
</script>

Expand Down