Mirror of https://github.com/improsocial/impro
An extensible Bluesky client for web
impro.social
Autofocus new chat dialog input on desktop
Grace Kind
(Jul 13, 2026, 6:26 PM -0500)
0f544bd6
234947c7
+38
-2
+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
···
1
1
import { html, render } from "/js/lib/lit-html.js";
2
2
import { Component } from "/js/components/component.js";
3
3
import { ScrollLock } from "/js/scrollLock.js";
4
-
import { enableDragToDismiss, debounce } from "/js/utils.js";
4
+
import { enableDragToDismiss, debounce, isTouchDevice } from "/js/utils.js";
5
5
import { Signal, ReactiveStore, effect } from "/js/signals.js";
6
6
import { getDisplayName, MISSING_HANDLE } from "/js/dataHelpers.js";
7
7
import { avatarTemplate } from "/js/templates/avatar.template.js";
···
302
302
this.scrollLock.lock();
303
303
const dialog = this.querySelector(".new-chat-dialog");
304
304
dialog.showModal();
305
+
if (!isTouchDevice()) {
306
+
this.querySelector(".new-chat-search-input")?.focus();
307
+
}
305
308
enableDragToDismiss(dialog, {
306
309
onClose: () => this.close(),
307
310
scrollContainer: this.querySelector(".new-chat-results"),
+33
tests/unit/specs/components/new-chat-dialog.test.js
+33
tests/unit/specs/components/new-chat-dialog.test.js
···
643
643
});
644
644
});
645
645
646
+
describe("NewChatDialog - autofocus", () => {
647
+
function setMaxTouchPoints(value) {
648
+
Object.defineProperty(window.navigator, "maxTouchPoints", {
649
+
value,
650
+
configurable: true,
651
+
});
652
+
}
653
+
654
+
afterEach(() => setMaxTouchPoints(0));
655
+
656
+
it("should focus the search input on open on non-touch devices", () => {
657
+
setMaxTouchPoints(0);
658
+
const { dataLayer } = createFakeDataLayer();
659
+
const element = createDialog(dataLayer);
660
+
element.open();
661
+
const input = element.querySelector(
662
+
'[data-testid="new-chat-search-input"]',
663
+
);
664
+
assert.deepEqual(document.activeElement, input);
665
+
});
666
+
667
+
it("should not focus the search input on open on touch devices", () => {
668
+
setMaxTouchPoints(5);
669
+
const { dataLayer } = createFakeDataLayer();
670
+
const element = createDialog(dataLayer);
671
+
element.open();
672
+
const input = element.querySelector(
673
+
'[data-testid="new-chat-search-input"]',
674
+
);
675
+
assert(document.activeElement !== input);
676
+
});
677
+
});
678
+
646
679
describe("NewChatDialog - dismissal", () => {
647
680
it("should close on the close button", () => {
648
681
const { dataLayer } = createFakeDataLayer();