Keep selected item visible in results list. #37
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Use `element.scrollTop` to manipulate the scroll position of the results ul.
Change several variable names to make clearer the values which are JavaScript data and those which are DOM elements. Use the `n-child()` selector to find the selected element directly, after the `selectedIndex` has been changed, instead of using the first result of find-by-class. `isVisibleInside()` used `offset` to "look ahead or behind", from the unchanged selected element, to find the "will be selected after movement" element and then determine if it will be contained in the parent. However, as a result of working with the selected element directly, `offset` can be removed: `isVisibleInside()` has the element required for consideration.
Move `selectedElement` to computed property and add more specific "overflow" helper which uses it.
Pull Request Test Coverage Report for Build 27
💛 - Coveralls |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
@charliekassel I talked with @alanbhamilton about PR #20 (which closes issue #19). I've taken the PR, and re-worked it. I left the commits unsquashed, if you want to review the evolution. Prior to merge, I'd rebase and squash them.
There are a few considerations:
Avoids usage of
ref, only because the component doesn't use them anywhere else. Instead,$el.querySelector()is used once.selectedElementcould be a computed property, but it's might not be worth burdening Vue with re-computation. It is used on everyup()anddown()call, but only in those functions, and Vue may re-compute it in other circumstances, even when not necessary (any access toselectedIndexmight cause re-computation, as it's the dependency).Calculations use the
.offset*properties. These do not consider applied transformations (e.g., scaling). However, I suspect these will be a rare and suggest waiting for a "bug" report before re-working it with.getClientBoundingRect()(which provides sizes after transformations have been applied; that is, rendered sizes). What are your thoughts? After discussion, I'll remove the code comment prior to merge.There is an uncommon possibility handled by the code: if the
<ul>list of options is shorter than a single choice (that is, the visible scroll area doesn't fit a single choice element). In such a situation, the user will see only a partial choice. This would be a very strange UI, but it could happen (presumably by accident) on mobile. I've avoid trying to sync in this case, becuse there is nothing to do -- just allow the selection to move. Although, it won't wrap, so it is somewhat broken. I wonder if it's worth handling this at all. I'd prefer to remove the special handing, and wait for a bug report.