Skip to content
This repository was archived by the owner on Apr 8, 2022. It is now read-only.

fix(mobile): hide keyboard when scroll suggestions#15

Merged
cristianossd merged 4 commits into
masterfrom
cris/hide-keyboard
Mar 17, 2021
Merged

fix(mobile): hide keyboard when scroll suggestions#15
cristianossd merged 4 commits into
masterfrom
cris/hide-keyboard

Conversation

@cristianossd

@cristianossd cristianossd commented Mar 16, 2021

Copy link
Copy Markdown
Member

Problem: when scroll suggestions, the keyboard keeps opened as following gif below. This patch fixes this behavior, passing to focus on suggestion items.

Before After
scroll-before scroll-after

@cristianossd cristianossd self-assigned this Mar 16, 2021
@cristianossd
cristianossd marked this pull request as ready for review March 16, 2021 22:27
Comment thread auto-complete.js Outdated
that.blurHandler = function (e) {
var isSuggestionsFocused = document.querySelector('.autocomplete-suggestions--focused');
if (!isSuggestionsFocused) {
try { var over_sb = document.querySelector('.autocomplete-suggestions:hover'); } catch (e) { var over_sb = 0; }

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

querySelector returns null if element doesn't exist, use camelCase.
What does Sb mean?

Suggested change
try { var over_sb = document.querySelector('.autocomplete-suggestions:hover'); } catch (e) { var over_sb = 0; }
var overSb = document.querySelector('.autocomplete-suggestions:hover');

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's strange, I prefer to not change the current codebase and use another patch to refactor entire code, including standard os JS used: lint, es6, etc

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think Sb means suggestions body, I really don't know 😭

Comment thread auto-complete.js Outdated
Comment thread auto-complete.js Outdated
Comment thread auto-complete.js
// create suggestions container "sc"
that.parentPositionDeterminant = getParentPositionDeterminant(that);
that.sc = document.createElement('div');
that.sc.setAttribute('tabindex', '-1');

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is weird, div by default can not be focused

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it's not common but acceptable, it was necessary in this case. I prefer to use -1 to not be a focusable element by user, just using code.

Another approach to remove focus from autocomplete input was to include some input element inside autocomplete-suggestions div, but I think it's more weird than first one.

@cristianossd
cristianossd merged commit febcb3e into master Mar 17, 2021
@cristianossd
cristianossd deleted the cris/hide-keyboard branch March 17, 2021 21:21
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants