codey/codey.lol
1
0
Fork 0
Code Issues Pull Requests Activity

bugfix: autocomplete suggestions keyboard scroll behavior

Browse Source
This commit is contained in:
codey
2026-02-12 06:48:34 -05:00
parent e6f854adb8
commit febb17ffce
7 changed files with 229 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Radio.tsx
View File

@@ -15,6 +15,7 @@ import { API_URL } from "@/config";
import { authFetch } from "@/utils/authFetch";
import { requireAuthHook } from "@/hooks/requireAuthHook";
import { useHtmlThemeAttr } from "@/hooks/useHtmlThemeAttr";
import { useAutoCompleteScrollFix } from "@/hooks/useAutoCompleteScrollFix";
interface LyricLine {
timestamp: number;
@@ -148,6 +149,7 @@ export default function Player({ user }: PlayerProps) {
const [requestInputArtist, setRequestInputArtist] = useState("");
const [requestInputSong, setRequestInputSong] = useState("");
const [requestInputUuid, setRequestInputUuid] = useState("");
const { attachScrollFix: handleTypeaheadShow, cleanupScrollFix: handleTypeaheadHide } = useAutoCompleteScrollFix();
const audioElement = useRef<HTMLAudioElement | null>(null);
const hlsInstance = useRef<Hls | null>(null);
@@ -941,30 +943,8 @@ export default function Player({ user }: PlayerProps) {
onChange={e => {
setRequestInput(e.target.value ?? '');
}}
onShow={() => {
setTimeout(() => {
const panel = document.querySelector('.p-autocomplete-panel');
const items = panel?.querySelector('.p-autocomplete-items');
if (items) {
(items as HTMLElement).style.maxHeight = '200px';
(items as HTMLElement).style.overflowY = 'auto';
(items as HTMLElement).style.overscrollBehavior = 'contain';
const wheelHandler: EventListener = (e) => {
const wheelEvent = e as WheelEvent;
const delta = wheelEvent.deltaY;
const atTop = items.scrollTop === 0;
const atBottom = items.scrollTop + items.clientHeight >= items.scrollHeight;
if ((delta < 0 && atTop) || (delta > 0 && atBottom)) {
e.preventDefault();
} else {
e.stopPropagation();
}
};
items.removeEventListener('wheel', wheelHandler);
items.addEventListener('wheel', wheelHandler, { passive: false });
}
}, 0);
}}
onShow={handleTypeaheadShow}
onHide={handleTypeaheadHide}
placeholder="Request a song..."
inputStyle={{
width: '24rem',