[READ-ONLY] Mirror of https://github.com/improsocial/impro
An extensible Bluesky client for web
impro.social
Fix autofocus scrolling bug
Grace Kind
(Jul 18, 2026, 10:16 PM -0500)
96366361
f5cf0691
+38
-12
+1
-1
package.json
+1
-1
package.json
+4
-1
src/js/components/new-chat-dialog.js
+4
-1
src/js/components/new-chat-dialog.js
···
217
217
<dialog
218
218
class="bottom-sheet new-chat-dialog"
219
219
data-testid="new-chat-dialog"
220
+
autofocus
220
221
@click=${(event) => {
221
222
if (event.target.tagName === "DIALOG") {
222
223
this.close();
···
298
299
this.scrollLock.lock();
299
300
const dialog = this.querySelector(".new-chat-dialog");
300
301
dialog.showModal();
301
-
this.querySelector(".new-chat-search-input")?.focus();
302
+
this.querySelector(".new-chat-search-input")?.focus({
303
+
preventScroll: true,
304
+
});
302
305
enableDragToDismiss(dialog, {
303
306
onClose: () => this.close(),
304
307
scrollContainer: this.querySelector(".new-chat-results"),
+2
-1
src/js/components/post-composer.js
+2
-1
src/js/components/post-composer.js
···
299
299
html`
300
300
<dialog
301
301
class="post-composer"
302
+
autofocus
302
303
@click=${async (e) => {
303
304
if (e.target.tagName === "DIALOG") {
304
305
if (await this.confirmClose()) {
···
375
376
this.handlePaste(e);
376
377
}}
377
378
placeholder="${promptText}"
378
-
autofocus
379
379
></rich-text-input>
380
380
</div>
381
381
</div>
···
912
912
this.scrollLock.lock();
913
913
const dialog = this.querySelector(".post-composer");
914
914
dialog.showModal();
915
+
this.querySelector("rich-text-input")?.focus({ preventScroll: true });
915
916
916
917
// Setup mobile swipe-to-dismiss
917
918
enableDragToDismiss(dialog, {
+2
-2
src/js/components/rich-text-input.js
+2
-2
src/js/components/rich-text-input.js
+14
-2
tests/unit/specs/components/new-chat-dialog.test.js
+14
-2
tests/unit/specs/components/new-chat-dialog.test.js
···
645
645
});
646
646
647
647
describe("NewChatDialog - autofocus", () => {
648
-
it("should focus the search input on open", () => {
648
+
it("should focus the search input without scrolling on open", () => {
649
649
const { dataLayer } = createFakeDataLayer();
650
650
const element = createDialog(dataLayer);
651
-
element.open();
652
651
const input = element.querySelector(
653
652
'[data-testid="new-chat-search-input"]',
654
653
);
654
+
const focus = input.focus.bind(input);
655
+
let options;
656
+
input.focus = (nextOptions) => {
657
+
options = nextOptions;
658
+
focus(nextOptions);
659
+
};
660
+
661
+
element.open();
662
+
655
663
assert.deepEqual(document.activeElement, input);
664
+
assert.deepEqual(options, { preventScroll: true });
665
+
assert(
666
+
element.querySelector(".new-chat-dialog").hasAttribute("autofocus"),
667
+
);
656
668
});
657
669
});
658
670
+15
-5
tests/unit/specs/components/post-composer.test.js
+15
-5
tests/unit/specs/components/post-composer.test.js
···
189
189
assert(dialog.open);
190
190
});
191
191
192
-
it("should render the rich text input with autofocus so showModal focuses it", () => {
192
+
it("focuses the editor without scrolling when opened", () => {
193
193
const element = createPostComposer();
194
194
connectElement(element);
195
+
const editor = element.querySelector(".rich-text-input");
196
+
const focus = editor.focus.bind(editor);
197
+
let options;
198
+
editor.focus = (nextOptions) => {
199
+
options = nextOptions;
200
+
focus(nextOptions);
201
+
};
202
+
203
+
element.open();
204
+
195
205
const richTextInput = element.querySelector("rich-text-input");
196
-
assert(richTextInput.hasAttribute("autofocus"));
197
-
assert(
198
-
element.querySelector(".rich-text-input").hasAttribute("autofocus"),
199
-
);
206
+
assert(!richTextInput.hasAttribute("autofocus"));
207
+
assert(!editor.hasAttribute("autofocus"));
208
+
assert(element.querySelector(".post-composer").hasAttribute("autofocus"));
209
+
assert.deepEqual(options, { preventScroll: true });
200
210
});
201
211
});
202
212