usulpro
/
banatie-service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: focus

This commit is contained in:
Oleg Proskurin 2025-10-24 23:24:38 +07:00
parent d5fe272460
commit a4842e2cd4
4 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/landing/src/components/docs/blocks/InteractiveAPIWidget.tsx
View File

@ -1,5 +1,6 @@
'use client'; 'use client';
import { useApiKey } from '@/components/shared/ApiKeyWidget/apikey-context';
/** /**
* Interactive API Widget - Production Version * Interactive API Widget - Production Version
* *
@ -60,6 +61,8 @@ export const InteractiveAPIWidget = ({
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
const [paramValues, setParamValues] = useState<Record<string, string>>({}); const [paramValues, setParamValues] = useState<Record<string, string>>({});
const {apiKeyValidated, focus} = useApiKey()
// Load API key from localStorage and listen for changes // Load API key from localStorage and listen for changes
useEffect(() => { useEffect(() => {
const loadApiKey = () => { const loadApiKey = () => {
@ -266,7 +269,7 @@ func main() {
// Expand API key input in navigation // Expand API key input in navigation
const expandApiKey = () => { const expandApiKey = () => {
window.dispatchEvent(new CustomEvent('expandApiKeyInput')); focus();
}; };
const isSuccess = response && response.success === true; const isSuccess = response && response.success === true;
@ -336,7 +339,7 @@ func main() {
onClick={expandApiKey} onClick={expandApiKey}
className="text-sm text-gray-400 hover:text-white underline-offset-4 hover:underline transition-colors" className="text-sm text-gray-400 hover:text-white underline-offset-4 hover:underline transition-colors"
> >
{apiKey ? 'API Key Set' : 'Enter API Key'} {apiKeyValidated ? 'API Key Set' : 'Enter API Key'}
</button> </button>
<button <button
onClick={executeRequest} onClick={executeRequest}

11
apps/landing/src/components/shared/ApiKeyWidget/apikey-context.tsx
View File

@ -166,10 +166,11 @@ export function ApiKeyProvider({ children, onValidationSuccess }: ApiKeyProvider
// Wait for expansion animation, then focus // Wait for expansion animation, then focus
setTimeout(() => { setTimeout(() => {
inputRef.current?.focus(); inputRef.current?.focus();
containerRef.current?.scrollIntoView({ // TODO: don't need because it's always visible
behavior: 'smooth', // containerRef.current?.scrollIntoView({
block: 'center', // behavior: 'smooth',
}); // block: 'center',
// });
}, 100); }, 100);
}, []); }, []);
@ -197,6 +198,8 @@ export function ApiKeyProvider({ children, onValidationSuccess }: ApiKeyProvider
// Focus method // Focus method
focus, focus,
inputRef,
containerRef,
}; };
return ( return (

6
apps/landing/src/components/shared/ApiKeyWidget/apikey-widget.tsx
View File

@ -26,6 +26,8 @@ export function ApiKeyWidget() {
apiKeyError, apiKeyError,
validatingKey, validatingKey,
ui, ui,
inputRef,
containerRef,
setApiKey, setApiKey,
validateApiKey, validateApiKey,
revokeApiKey, revokeApiKey,
@ -33,8 +35,8 @@ export function ApiKeyWidget() {
setExpanded, setExpanded,
} = useApiKey(); } = useApiKey();
const containerRef = useRef<HTMLDivElement>(null); // const containerRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null); // const inputRef = useRef<HTMLInputElement>(null);
const [isMobileContext, setIsMobileContext] = useState(false); const [isMobileContext, setIsMobileContext] = useState(false);
// Detect mobile context (inside mobile dropdown menu) // Detect mobile context (inside mobile dropdown menu)

4
apps/landing/src/lib/apikey/types.ts
View File

@ -4,6 +4,8 @@
* TypeScript interfaces and types for API key functionality * TypeScript interfaces and types for API key functionality
*/ */
import React from 'react';
/** /**
* Information about an API key extracted from validation response * Information about an API key extracted from validation response
*/ */
@ -61,6 +63,8 @@ export interface ApiKeyContextValue {
// Focus method for external components // Focus method for external components
focus: () => void; focus: () => void;
inputRef: React.Ref<HTMLInputElement>;
containerRef: React.Ref<HTMLInputElement>;
} }
/** /**