a tiny atproto handle typeahead web component

Fix click to select

Changed files
+10 -25
+10 -25
actor-typeahead.js
··· 55 width: 100%; 56 height: calc(1.5rem + 6px * 2); 57 border-radius: calc(var(--radius-inherited) - var(--padding-menu-inherited)); 58 } 59 60 .user:hover, ··· 155 this.#onkeydown(/** @type {KeyboardEvent} */ (evt)); 156 break; 157 158 - case "click": 159 - this.#onclick(/** @type {PointerEvent} */ (evt)); 160 - break; 161 - 162 case "focusout": 163 this.#onfocusout(evt); 164 break; ··· 214 } 215 } 216 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 /** @param {InputEvent} evt */ 229 async #oninput(evt) { 230 const query = evt.target?.value; ··· 278 279 /** @param {PointerEvent} evt */ 280 #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 this.#pressed = true; 287 } 288 289 /** @param {PointerEvent} evt */ 290 #onpointerup(evt) { 291 - const menu = this.#shadow.querySelector(".menu"); 292 - if (!menu) return; 293 294 - if (!menu.hasPointerCapture(evt.pointerId)) return; 295 - menu.releasePointerCapture(evt.pointerId); 296 - this.#pressed = false; 297 this.querySelector("input")?.focus(); 298 } 299 }
··· 55 width: 100%; 56 height: calc(1.5rem + 6px * 2); 57 border-radius: calc(var(--radius-inherited) - var(--padding-menu-inherited)); 58 + cursor: default; 59 } 60 61 .user:hover, ··· 156 this.#onkeydown(/** @type {KeyboardEvent} */ (evt)); 157 break; 158 159 case "focusout": 160 this.#onfocusout(evt); 161 break; ··· 211 } 212 } 213 214 /** @param {InputEvent} evt */ 215 async #oninput(evt) { 216 const query = evt.target?.value; ··· 264 265 /** @param {PointerEvent} evt */ 266 #onpointerdown(evt) { 267 this.#pressed = true; 268 } 269 270 /** @param {PointerEvent} evt */ 271 #onpointerup(evt) { 272 + this.#pressed = false; 273 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(); 283 } 284 }