Skip to content

Commit

Permalink
better 'selector' type matching in scrollBehavior
Browse files Browse the repository at this point in the history
previously a scrollBehavior selector was only checked for ^#\d when determining whether to use getElementById or querySelector for matching; this would not work as intended for chained queries (e.g. `vuejs#9, .main`) or those with CSS special characters (e.g. `#one/two`).
  • Loading branch information
theprojectsomething committed Oct 24, 2019
1 parent c0d3376 commit 97b7e72
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions src/util/scroll.js
Original file line number Diff line number Diff line change
Expand Up @@ -121,14 +121,16 @@ function isNumber (v: any): boolean {
return typeof v === 'number'
}

const hashStartsWithNumberRE = /^#\d/
const selectorLooksLikeIdRE = /^#[^, ]+$/

function scrollToPosition (shouldScroll, position) {
const isObject = typeof shouldScroll === 'object'
if (isObject && typeof shouldScroll.selector === 'string') {
// getElementById is used only where a selector looks like a single [id] ... this allows for use of CSS
// 'special characters' that would otherwise fail in querySelector without escaping, e.g. "#one/two"
// getElementById would still fail if the selector contains a more complicated query like #main[data-attr]
// but at the same time, it doesn't make much sense to select an element with an id and an extra selector
const el = hashStartsWithNumberRE.test(shouldScroll.selector) // $flow-disable-line
const el = selectorLooksLikeIdRE.test(shouldScroll.selector) // $flow-disable-line
? document.getElementById(shouldScroll.selector.slice(1)) // $flow-disable-line
: document.querySelector(shouldScroll.selector)

Expand Down

0 comments on commit 97b7e72

Please sign in to comment.