starred/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-08-04 19:45:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixed search bar stealing tab focus

Browse Source
This commit is contained in:
squidfunk
2018-01-11 18:25:10 +01:00
committed by Martin Donath
parent b10e058906
commit 809f943240
11 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/javascripts/application.js
View File

@@ -381,8 +381,8 @@ function initialize(config) { // eslint-disable-line func-style
}
}
/* Escape: close search */
} else if (ev.keyCode === 27) {
/* Escape or Tab: close search */
} else if (ev.keyCode === 9 || ev.keyCode === 27) {
toggle.checked = false
toggle.dispatchEvent(new CustomEvent("change"))
query.blur()
@@ -392,10 +392,9 @@ function initialize(config) { // eslint-disable-line func-style
if (query !== document.activeElement)
query.focus()
/* Vertical arrows and tab: select previous or next search result */
} else if ([9, 38, 40].indexOf(ev.keyCode) !== -1) {
const map = ev.shiftKey ? 38 : 40
const key = ev.keyCode === 9 ? map : ev.keyCode
/* Vertical arrows: select previous or next search result */
} else if ([38, 40].indexOf(ev.keyCode) !== -1) {
const key = ev.keyCode
/* Retrieve all results */
const links = Array.prototype.slice.call(

39
src/assets/javascripts/components/Material/Search/Result.jsx
View File

@@ -276,7 +276,7 @@ export default class Result {
const article = (
<li class="md-search-result__item">
<a href={doc.location} title={doc.title}
class="md-search-result__link">
class="md-search-result__link" tabindex="-1">
<article class="md-search-result__article
md-search-result__article--document">
<h1 class="md-search-result__title">
@@ -297,7 +297,8 @@ export default class Result {
const section = this.docs_.get(item.ref)
article.appendChild(
<a href={section.location} title={section.title}
class="md-search-result__link" data-md-rel="anchor">
class="md-search-result__link" data-md-rel="anchor"
tabindex="-1">
<article class="md-search-result__article">
<h1 class="md-search-result__title">
{{ __html: section.title.replace(match, highlight) }}
@@ -329,21 +330,27 @@ export default class Result {
/* Bind click handlers for anchors */
const anchors = this.list_.querySelectorAll("[data-md-rel=anchor]")
Array.prototype.forEach.call(anchors, anchor => {
anchor.addEventListener("click", ev2 => {
const toggle = document.querySelector("[data-md-toggle=search]")
if (!(toggle instanceof HTMLInputElement))
throw new ReferenceError
if (toggle.checked) {
toggle.checked = false
toggle.dispatchEvent(new CustomEvent("change"))
}
["click", "keydown"].forEach(action => {
anchor.addEventListener(action, ev2 => {
if (action === "keydown" && ev2.keyCode !== 13)
return
/* Hack: prevent default, as the navigation needs to be delayed due
to the search body lock on mobile */
ev2.preventDefault()
setTimeout(() => {
document.location.href = anchor.href
}, 100)
/* Close search */
const toggle = document.querySelector("[data-md-toggle=search]")
if (!(toggle instanceof HTMLInputElement))
throw new ReferenceError
if (toggle.checked) {
toggle.checked = false
toggle.dispatchEvent(new CustomEvent("change"))
}
/* Hack: prevent default, as the navigation needs to be delayed due
to the search body lock on mobile */
ev2.preventDefault()
setTimeout(() => {
document.location.href = anchor.href
}, 100)
})
})
})