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

34
src/components/LyricSearch.tsx
View File

@@ -21,6 +21,7 @@ import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
import { AutoComplete } from 'primereact/autocomplete/autocomplete.esm.js';
import { API_URL } from '../config';
import { useAutoCompleteScrollFix } from '@/hooks/useAutoCompleteScrollFix';
// Type definitions
interface YouTubeVideo {
@@ -126,6 +127,7 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }: LyricS
const autoCompleteInputRef = useRef<HTMLInputElement | null>(null);
const searchButtonRef = useRef<HTMLButtonElement | null>(null);
const [theme, setTheme] = useState(document.documentElement.getAttribute("data-theme") || "light");
const { attachScrollFix: handlePanelShow, cleanupScrollFix: handlePanelHide } = useAutoCompleteScrollFix();
const statusLabels = {
hint: "Format: Artist - Song",
error: "Artist and song required",
@@ -234,36 +236,7 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }: LyricS
};
// Show scrollable dropdown panel with mouse wheel handling
const handlePanelShow = () => {
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);
};
const evaluateSearchValue = useCallback((searchValue: string, shouldUpdate = true) => {
const trimmed = searchValue?.trim() || "";
@@ -487,6 +460,7 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }: LyricS
onChange={(e) => setValue(e.target.value)}
onKeyDown={handleKeyDown}
onShow={handlePanelShow}
onHide={handlePanelHide}
placeholder={placeholder}
autoFocus
style={{ width: '100%' }}

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',

29
src/components/TRip/MediaRequestForm.tsx
View File

@@ -6,6 +6,7 @@ import { Button } from "@mui/joy";
import { Accordion, AccordionTab } from "primereact/accordion";
import { AutoComplete } from "primereact/autocomplete";
import { authFetch } from "@/utils/authFetch";
import { useAutoCompleteScrollFix } from '@/hooks/useAutoCompleteScrollFix';
import BreadcrumbNav from "./BreadcrumbNav";
import { API_URL, ENVIRONMENT } from "@/config";
import "./RequestManagement.css";
@@ -88,6 +89,8 @@ export default function MediaRequestForm() {
const [audioProgress, setAudioProgress] = useState<AudioProgress>({ current: 0, duration: 0 });
const [diskSpace, setDiskSpace] = useState<DiskSpaceInfo | null>(null);
const { attachScrollFix, cleanupScrollFix } = useAutoCompleteScrollFix();
const debounceTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
const autoCompleteRef = useRef<any>(null);
const metadataFetchToastId = useRef<Id | null>(null);
@@ -951,30 +954,7 @@ export default function MediaRequestForm() {
});
};
// Attach scroll fix for autocomplete panel
const attachScrollFix = () => {
setTimeout(() => {
const panel = document.querySelector(".p-autocomplete-panel");
const items = panel?.querySelector(".p-autocomplete-items") as HTMLElement | null;
if (items) {
items.style.maxHeight = "200px";
items.style.overflowY = "auto";
items.style.overscrollBehavior = "contain";
const wheelHandler = (e: WheelEvent) => {
const delta = e.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);
};
// Submit request handler with progress indicator
const handleSubmitRequest = async () => {
@@ -1139,6 +1119,7 @@ export default function MediaRequestForm() {
className="w-full"
inputClassName="w-full px-3 py-2 rounded border border-neutral-300 dark:border-neutral-600 text-black dark:text-white dark:bg-neutral-800"
onShow={attachScrollFix}
onHide={cleanupScrollFix}
itemTemplate={artistItemTemplate}
/>

2
src/components/TRip/RequestManagement.tsx
View File

@@ -62,7 +62,7 @@ export default function RequestManagement() {
// Check if path is /storage/music/TRIP
if (absPath.includes("/storage/music/TRIP/")) {
return `https://music.boatson.boats/TRIP/${filename}`;
return `https://_music.codey.lol/TRIP/${filename}`;
}
// Otherwise, assume /storage/music2/completed/{quality} format

27
src/components/req/ReqForm.tsx
View File

@@ -4,6 +4,7 @@ import { Button } from "@mui/joy";
// Dropdown not used in this form; removed to avoid unused-import warnings
import { AutoComplete } from "primereact/autocomplete";
import { InputText } from "primereact/inputtext";
import { useAutoCompleteScrollFix } from '@/hooks/useAutoCompleteScrollFix';
declare global {
interface Window {
@@ -45,6 +46,7 @@ export default function ReqForm() {
const [posterLoading, setPosterLoading] = useState<boolean>(true);
const [submittedRequest, setSubmittedRequest] = useState<SubmittedRequest | null>(null); // Track successful submission
const [csrfToken, setCsrfToken] = useState<string | null>(null);
const { attachScrollFix, cleanupScrollFix } = useAutoCompleteScrollFix();
// Get CSRF token from window global on mount
useEffect(() => {
@@ -151,29 +153,7 @@ export default function ReqForm() {
// Token was already refreshed from the submit response
};
const attachScrollFix = () => {
setTimeout(() => {
const panel = document.querySelector<HTMLElement>(".p-autocomplete-panel");
const items = panel?.querySelector<HTMLElement>(".p-autocomplete-items");
if (items) {
items.style.maxHeight = "200px";
items.style.overflowY = "auto";
items.style.overscrollBehavior = "contain";
const wheelHandler = (e: WheelEvent) => {
const delta = e.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);
};
const formatMediaType = (mediaTypeValue: MediaType | undefined) => {
if (!mediaTypeValue) return "";
@@ -286,6 +266,7 @@ export default function ReqForm() {
field="label"
autoComplete="off"
onShow={attachScrollFix}
onHide={cleanupScrollFix}
itemTemplate={(item) => (
<div className="p-2 rounded">
<span className="font-medium">{item.label}</span>