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

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

@ -9,25 +9,12 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
skipToLocation: (location: string | number, shouldPause?: boolean) => void; skipToLocation: (location: string | number, shouldPause?: boolean) => void;
}) => { }) => {
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => { useEffect(() => {
setInputValue(currentPage.toString()); setInputValue(currentPage.toString());
}, [currentPage]); }, [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>) => { const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// Only allow numbers // Only allow numbers
const value = e.target.value.replace(/[^0-9]/g, ''); const value = e.target.value.replace(/[^0-9]/g, '');
@ -56,6 +43,11 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
const handlePopoverOpen = () => { const handlePopoverOpen = () => {
setInputValue(''); // Clear input when popup opens setInputValue(''); // Clear input when popup opens
// Auto-focus and select input shortly after opening
setTimeout(() => {
inputRef.current?.focus();
inputRef.current?.select();
}, 50);
}; };
return ( return (
@ -73,14 +65,7 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
</Button> </Button>
{/* Page number popup */} {/* Page number popup */}
<Popover className="relative"> <Popover className="relative mb-1">
{({ open }) => {
if (open !== isPopoverOpen) {
setIsPopoverOpen(open);
}
return (
<>
<PopoverButton <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" 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} onClick={handlePopoverOpen}
@ -108,9 +93,6 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
<div className="text-xs text-muted text-center">of {numPages || 1}</div> <div className="text-xs text-muted text-center">of {numPages || 1}</div>
</div> </div>
</PopoverPanel> </PopoverPanel>
</>
);
}}
</Popover> </Popover>
{/* Page forward */} {/* Page forward */}