From a4842e2cd4d6d0756cf97069720f7ff336fe6a0a Mon Sep 17 00:00:00 2001
From: Oleg Proskurin <regx@usul.su>
Date: Fri, 24 Oct 2025 23:24:38 +0700
Subject: [PATCH] fix: focus

---
 .../components/docs/blocks/InteractiveAPIWidget.tsx   |  7 +++++--
 .../components/shared/ApiKeyWidget/apikey-context.tsx | 11 +++++++----
 .../components/shared/ApiKeyWidget/apikey-widget.tsx  |  6 ++++--
 apps/landing/src/lib/apikey/types.ts                  |  4 ++++
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/apps/landing/src/components/docs/blocks/InteractiveAPIWidget.tsx b/apps/landing/src/components/docs/blocks/InteractiveAPIWidget.tsx
index 8b91a4d..195b913 100644
--- a/apps/landing/src/components/docs/blocks/InteractiveAPIWidget.tsx
+++ b/apps/landing/src/components/docs/blocks/InteractiveAPIWidget.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useApiKey } from '@/components/shared/ApiKeyWidget/apikey-context';
 /**
  * Interactive API Widget - Production Version
  *
@@ -60,6 +61,8 @@ export const InteractiveAPIWidget = ({
   const [isExpanded, setIsExpanded] = useState(false);
   const [paramValues, setParamValues] = useState<Record<string, string>>({});
 
+  const {apiKeyValidated, focus} = useApiKey()
+
   // Load API key from localStorage and listen for changes
   useEffect(() => {
     const loadApiKey = () => {
@@ -266,7 +269,7 @@ func main() {
 
   // Expand API key input in navigation
   const expandApiKey = () => {
-    window.dispatchEvent(new CustomEvent('expandApiKeyInput'));
+    focus();
   };
 
   const isSuccess = response && response.success === true;
@@ -336,7 +339,7 @@ func main() {
             onClick={expandApiKey}
             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
             onClick={executeRequest}
diff --git a/apps/landing/src/components/shared/ApiKeyWidget/apikey-context.tsx b/apps/landing/src/components/shared/ApiKeyWidget/apikey-context.tsx
index b82124d..07d4a0b 100644
--- a/apps/landing/src/components/shared/ApiKeyWidget/apikey-context.tsx
+++ b/apps/landing/src/components/shared/ApiKeyWidget/apikey-context.tsx
@@ -166,10 +166,11 @@ export function ApiKeyProvider({ children, onValidationSuccess }: ApiKeyProvider
     // Wait for expansion animation, then focus
     setTimeout(() => {
       inputRef.current?.focus();
-      containerRef.current?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-      });
+      // TODO: don't need because it's always visible
+      // containerRef.current?.scrollIntoView({
+      //   behavior: 'smooth',
+      //   block: 'center',
+      // });
     }, 100);
   }, []);
 
@@ -197,6 +198,8 @@ export function ApiKeyProvider({ children, onValidationSuccess }: ApiKeyProvider
 
     // Focus method
     focus,
+    inputRef,
+    containerRef,
   };
 
   return (
diff --git a/apps/landing/src/components/shared/ApiKeyWidget/apikey-widget.tsx b/apps/landing/src/components/shared/ApiKeyWidget/apikey-widget.tsx
index efbdad7..b11ecb3 100644
--- a/apps/landing/src/components/shared/ApiKeyWidget/apikey-widget.tsx
+++ b/apps/landing/src/components/shared/ApiKeyWidget/apikey-widget.tsx
@@ -26,6 +26,8 @@ export function ApiKeyWidget() {
     apiKeyError,
     validatingKey,
     ui,
+    inputRef,
+    containerRef,
     setApiKey,
     validateApiKey,
     revokeApiKey,
@@ -33,8 +35,8 @@ export function ApiKeyWidget() {
     setExpanded,
   } = useApiKey();
 
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
+  // const containerRef = useRef<HTMLDivElement>(null);
+  // const inputRef = useRef<HTMLInputElement>(null);
   const [isMobileContext, setIsMobileContext] = useState(false);
 
   // Detect mobile context (inside mobile dropdown menu)
diff --git a/apps/landing/src/lib/apikey/types.ts b/apps/landing/src/lib/apikey/types.ts
index ce04218..e45b1fd 100644
--- a/apps/landing/src/lib/apikey/types.ts
+++ b/apps/landing/src/lib/apikey/types.ts
@@ -4,6 +4,8 @@
  * TypeScript interfaces and types for API key functionality
  */
 
+import React from 'react';
+
 /**
  * Information about an API key extracted from validation response
  */
@@ -61,6 +63,8 @@ export interface ApiKeyContextValue {
 
   // Focus method for external components
   focus: () => void;
+  inputRef: React.Ref<HTMLInputElement>;
+  containerRef: React.Ref<HTMLInputElement>;
 }
 
 /**