a tiny atproto handle typeahead web component
atproto
bluesky
Fix click to select
+10
-25
+10
-25
actor-typeahead.js
+10
-25
actor-typeahead.js
···
55
55
width: 100%;
56
56
height: calc(1.5rem + 6px * 2);
57
57
border-radius: calc(var(--radius-inherited) - var(--padding-menu-inherited));
58
+
cursor: default;
58
59
}
59
60
60
61
.user:hover,
···
155
156
this.#onkeydown(/** @type {KeyboardEvent} */ (evt));
156
157
break;
157
158
158
-
case "click":
159
-
this.#onclick(/** @type {PointerEvent} */ (evt));
160
-
break;
161
-
162
159
case "focusout":
163
160
this.#onfocusout(evt);
164
161
break;
···
214
211
}
215
212
}
216
213
217
-
/** @param {PointerEvent} evt */
218
-
#onclick(evt) {
219
-
const button = evt.target?.closest(".user");
220
-
const input = this.querySelector("input");
221
-
if (!input || !button) return;
222
-
223
-
input.value = button.dataset.handle;
224
-
this.#actors = [];
225
-
this.#render();
226
-
}
227
-
228
214
/** @param {InputEvent} evt */
229
215
async #oninput(evt) {
230
216
const query = evt.target?.value;
···
278
264
279
265
/** @param {PointerEvent} evt */
280
266
#onpointerdown(evt) {
281
-
const menu = this.#shadow.querySelector(".menu");
282
-
if (!menu) return;
283
-
284
-
if (!menu.contains(evt.target)) return;
285
-
menu.setPointerCapture(evt.pointerId);
286
267
this.#pressed = true;
287
268
}
288
269
289
270
/** @param {PointerEvent} evt */
290
271
#onpointerup(evt) {
291
-
const menu = this.#shadow.querySelector(".menu");
292
-
if (!menu) return;
272
+
this.#pressed = false;
293
273
294
-
if (!menu.hasPointerCapture(evt.pointerId)) return;
295
-
menu.releasePointerCapture(evt.pointerId);
296
-
this.#pressed = false;
297
274
this.querySelector("input")?.focus();
275
+
276
+
const button = evt.target?.closest(".user");
277
+
const input = this.querySelector("input");
278
+
if (!input || !button) return;
279
+
280
+
input.value = button.dataset.handle;
281
+
this.#actors = [];
282
+
this.#render();
298
283
}
299
284
}