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 intomasterfrom
cris/hide-keyboard
Mar 17, 2021
Merged

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

Conversation

@cristianossd
Copy link
Member

@cristianossd cristianossd commented Mar 16, 2021

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
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
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
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
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 😭

// create suggestions container "sc"
that.parentPositionDeterminant = getParentPositionDeterminant(that);
that.sc = document.createElement('div');
that.sc.setAttribute('tabindex', '-1');
Copy link
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
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