diff --git a/package.json b/package.json index 254bbf35..9cb2b472 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.14", + "version": "0.18.15", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/js/components/new-chat-dialog.js b/src/js/components/new-chat-dialog.js index f71c6724..4b542c17 100644 --- a/src/js/components/new-chat-dialog.js +++ b/src/js/components/new-chat-dialog.js @@ -217,6 +217,7 @@ class NewChatDialog extends Component { { if (event.target.tagName === "DIALOG") { this.close(); @@ -298,7 +299,9 @@ class NewChatDialog extends Component { this.scrollLock.lock(); const dialog = this.querySelector(".new-chat-dialog"); dialog.showModal(); - this.querySelector(".new-chat-search-input")?.focus(); + this.querySelector(".new-chat-search-input")?.focus({ + preventScroll: true, + }); enableDragToDismiss(dialog, { onClose: () => this.close(), scrollContainer: this.querySelector(".new-chat-results"), diff --git a/src/js/components/post-composer.js b/src/js/components/post-composer.js index 18b6318e..f06a1ac6 100644 --- a/src/js/components/post-composer.js +++ b/src/js/components/post-composer.js @@ -299,6 +299,7 @@ class PostComposer extends Component { html` { if (e.target.tagName === "DIALOG") { if (await this.confirmClose()) { @@ -375,7 +376,6 @@ class PostComposer extends Component { this.handlePaste(e); }} placeholder="${promptText}" - autofocus > @@ -912,6 +912,7 @@ class PostComposer extends Component { this.scrollLock.lock(); const dialog = this.querySelector(".post-composer"); dialog.showModal(); + this.querySelector("rich-text-input")?.focus({ preventScroll: true }); // Setup mobile swipe-to-dismiss enableDragToDismiss(dialog, { diff --git a/src/js/components/rich-text-input.js b/src/js/components/rich-text-input.js index ad33c2dd..1a9f036b 100644 --- a/src/js/components/rich-text-input.js +++ b/src/js/components/rich-text-input.js @@ -376,10 +376,10 @@ export class RichTextInput extends Component { } } - focus() { + focus(options) { const input = this.querySelector(".rich-text-input"); if (input) { - input.focus(); + input.focus(options); } } diff --git a/tests/unit/specs/components/new-chat-dialog.test.js b/tests/unit/specs/components/new-chat-dialog.test.js index 4115a2b0..d41c4b41 100644 --- a/tests/unit/specs/components/new-chat-dialog.test.js +++ b/tests/unit/specs/components/new-chat-dialog.test.js @@ -645,14 +645,26 @@ describe("new-chat-dialog", () => { }); describe("NewChatDialog - autofocus", () => { - it("should focus the search input on open", () => { + it("should focus the search input without scrolling on open", () => { const { dataLayer } = createFakeDataLayer(); const element = createDialog(dataLayer); - element.open(); const input = element.querySelector( '[data-testid="new-chat-search-input"]', ); + const focus = input.focus.bind(input); + let options; + input.focus = (nextOptions) => { + options = nextOptions; + focus(nextOptions); + }; + + element.open(); + assert.deepEqual(document.activeElement, input); + assert.deepEqual(options, { preventScroll: true }); + assert( + element.querySelector(".new-chat-dialog").hasAttribute("autofocus"), + ); }); }); diff --git a/tests/unit/specs/components/post-composer.test.js b/tests/unit/specs/components/post-composer.test.js index 7a1d2cbc..38cfbc77 100644 --- a/tests/unit/specs/components/post-composer.test.js +++ b/tests/unit/specs/components/post-composer.test.js @@ -189,14 +189,24 @@ describe("post-composer", () => { assert(dialog.open); }); - it("should render the rich text input with autofocus so showModal focuses it", () => { + it("focuses the editor without scrolling when opened", () => { const element = createPostComposer(); connectElement(element); + const editor = element.querySelector(".rich-text-input"); + const focus = editor.focus.bind(editor); + let options; + editor.focus = (nextOptions) => { + options = nextOptions; + focus(nextOptions); + }; + + element.open(); + const richTextInput = element.querySelector("rich-text-input"); - assert(richTextInput.hasAttribute("autofocus")); - assert( - element.querySelector(".rich-text-input").hasAttribute("autofocus"), - ); + assert(!richTextInput.hasAttribute("autofocus")); + assert(!editor.hasAttribute("autofocus")); + assert(element.querySelector(".post-composer").hasAttribute("autofocus")); + assert.deepEqual(options, { preventScroll: true }); }); });