danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(player): simplify popover input focus logic

Browse source 
Removed `isPopoverOpen` state and associated `useEffect` hook.
Auto-focus and select logic for the input are now directly handled
within `handlePopoverOpen`, reducing state management complexity.
This commit is contained in:
Richard Roberson 2025-11-22 02:06:28 -07:00
parent 7046666b3f
commit e39a5b8bcf
1 changed files with 34 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/components/player/Navigator.tsx
View file

@ -9,25 +9,12 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
skipToLocation: (location: string | number, shouldPause?: boolean) => void;
}) => {
const [inputValue, setInputValue] = useState('');
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
setInputValue(currentPage.toString());
}, [currentPage]);
// Auto-focus and select input when popover opens
useEffect(() => {
if (isPopoverOpen && inputRef.current) {
// Small delay to ensure the popover is fully rendered
const timer = setTimeout(() => {
inputRef.current?.focus();
inputRef.current?.select();
}, 50);
return () => clearTimeout(timer);
}
}, [isPopoverOpen]);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// Only allow numbers
const value = e.target.value.replace(/[^0-9]/g, '');
@ -56,6 +43,11 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
const handlePopoverOpen = () => {
setInputValue(''); // Clear input when popup opens
// Auto-focus and select input shortly after opening
setTimeout(() => {
inputRef.current?.focus();
inputRef.current?.select();
}, 50);
};
return (
@ -73,44 +65,34 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
</Button>
{/* Page number popup */}
<Popover className="relative">
{({ open }) => {
if (open !== isPopoverOpen) {
setIsPopoverOpen(open);
}
return (
<>
<PopoverButton
className="bg-offbase px-2 py-0.5 rounded-full focus:outline-none cursor-pointer hover:bg-offbase transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent"
onClick={handlePopoverOpen}
>
<p className="text-xs whitespace-nowrap">
{currentPage} / {numPages || 1}
</p>
</PopoverButton>
<PopoverPanel anchor="top" className="absolute z-50 bg-base p-3 rounded-md shadow-lg border border-offbase">
<div className="flex flex-col space-y-2">
<div className="text-xs font-medium text-foreground">Go to page</div>
<input
ref={inputRef}
type="text"
inputMode="numeric"
pattern="[0-9]*"
className="w-20 px-2 py-1 text-xs text-accent bg-offbase rounded border-none outline-none appearance-none text-center"
value={inputValue}
onChange={handleInputChange}
onBlur={handleInputConfirm}
onKeyDown={handleInputKeyDown}
placeholder={currentPage.toString()}
aria-label="Page number"
/>
<div className="text-xs text-muted text-center">of {numPages || 1}</div>
</div>
</PopoverPanel>
</>
);
}}
<Popover className="relative mb-1">
<PopoverButton
className="bg-offbase px-2 py-0.5 rounded-full focus:outline-none cursor-pointer hover:bg-offbase transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent"
onClick={handlePopoverOpen}
>
<p className="text-xs whitespace-nowrap">
{currentPage} / {numPages || 1}
</p>
</PopoverButton>
<PopoverPanel anchor="top" className="absolute z-50 bg-base p-3 rounded-md shadow-lg border border-offbase">
<div className="flex flex-col space-y-2">
<div className="text-xs font-medium text-foreground">Go to page</div>
<input
ref={inputRef}
type="text"
inputMode="numeric"
pattern="[0-9]*"
className="w-20 px-2 py-1 text-xs text-accent bg-offbase rounded border-none outline-none appearance-none text-center"
value={inputValue}
onChange={handleInputChange}
onBlur={handleInputConfirm}
onKeyDown={handleInputKeyDown}
placeholder={currentPage.toString()}
aria-label="Page number"
/>
<div className="text-xs text-muted text-center">of {numPages || 1}</div>
</div>
</PopoverPanel>
</Popover>
{/* Page forward */}
@ -126,4 +108,4 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
</Button>
</div>
);
}
}