a tiny atproto handle typeahead web component
atproto bluesky
44
fork

Configure Feed

Select the types of activity you want to include in your feed.

Fix click to select

jakelazaroff.com fe23be2a 1aeb0906

verified
+10 -25
+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 }