diff --git a/examples/index.html b/examples/index.html
index a3f4e7a..5d985dd 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -24,6 +24,8 @@
+ Base examples
+
Best robot: Unknown
@@ -60,6 +62,20 @@
+ Autofocus example
+ summary may have autofocus so it's the initially focused element in the page.
+ Then any focusable element inside the popup can declare autofocus too, so it gets focus when the popup is opened.
+
+
+ Autofocus picker
+
+
+
+
+
+
+
+
diff --git a/package-lock.json b/package-lock.json
index 3a3e07d..895a4cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@github/details-menu-element",
- "version": "1.0.9",
+ "version": "1.0.10",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -2019,9 +2019,9 @@
}
},
"lodash": {
- "version": "4.17.15",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
- "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+ "version": "4.17.19",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+ "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
"dev": true
},
"log-symbols": {
diff --git a/package.json b/package.json
index b1d88aa..eb550f8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@github/details-menu-element",
- "version": "1.0.9",
+ "version": "1.0.10",
"description": "A menu opened with a button.",
"main": "dist/index.js",
"module": "dist/index.js",
diff --git a/src/index.ts b/src/index.ts
index 1fb42d8..0d28582 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -23,7 +23,7 @@ class DetailsMenuElement extends HTMLElement {
this.setAttribute('src', value)
}
- connectedCallback() {
+ connectedCallback(): void {
if (!this.hasAttribute('role')) this.setAttribute('role', 'menu')
const details = this.parentElement
@@ -52,7 +52,7 @@ class DetailsMenuElement extends HTMLElement {
states.set(this, {subscriptions, loaded: false, isComposing: false})
}
- disconnectedCallback() {
+ disconnectedCallback(): void {
const state = states.get(this)
if (!state) return
states.delete(this)
@@ -132,7 +132,7 @@ function closeCurrentMenu(details: Element) {
function autofocus(details: Element): boolean {
if (!details.hasAttribute('open')) return false
- const input = details.querySelector('[autofocus]')
+ const input = details.querySelector('details-menu [autofocus]')
if (input) {
input.focus()
return true
diff --git a/test/test.js b/test/test.js
index 052ae69..4c77ca8 100644
--- a/test/test.js
+++ b/test/test.js
@@ -601,6 +601,22 @@ describe('details-menu element', function () {
assert.equal(input, document.activeElement, 'toggle open focuses on [autofocus]')
})
+
+ it('summary autofocus should not impact with inner autofocus element', function () {
+ const details = document.querySelector('details')
+ const summary = details.querySelector('summary')
+ const input = details.querySelector('input')
+
+ // Summary is the initial element of the entire page, while input is the initial element in the popup
+ summary.setAttribute('autofocus', '')
+
+ summary.focus()
+ details.open = true
+ summary.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', bubbles: true}))
+ details.dispatchEvent(new CustomEvent('toggle'))
+
+ assert.equal(document.activeElement, input, 'toggle open focuses on [autofocus]')
+ })
})
describe('closing the menu', function () {