From 4771c78001b7280147e731d77435bf9900bf16b6 Mon Sep 17 00:00:00 2001
From: Amrit Kahlon <amrit@scalar.com>
Date: Mon, 28 Oct 2024 12:38:18 -0700
Subject: [PATCH] Fix Scalar ApiClient routing (#2561)

---
 .changeset/large-months-hang.md                  | 5 +++++
 packages/react-openapi/src/OpenAPICodeSample.tsx | 2 +-
 packages/react-openapi/src/ScalarApiButton.tsx   | 7 +++++--
 3 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/large-months-hang.md

diff --git a/.changeset/large-months-hang.md b/.changeset/large-months-hang.md
new file mode 100644
index 000000000..24b84bf9c
--- /dev/null
+++ b/.changeset/large-months-hang.md
@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Fixed scalar api client routing
diff --git a/packages/react-openapi/src/OpenAPICodeSample.tsx b/packages/react-openapi/src/OpenAPICodeSample.tsx
index 62e8bf41f..3174d3711 100644
--- a/packages/react-openapi/src/OpenAPICodeSample.tsx
+++ b/packages/react-openapi/src/OpenAPICodeSample.tsx
@@ -119,7 +119,7 @@ export function OpenAPICodeSample(props: {
             tabs={samples}
             overlay={
                 data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'] ? null : (
-                    <ScalarApiButton />
+                    <ScalarApiButton method={data.method} path={data.path} />
                 )
             }
         />
diff --git a/packages/react-openapi/src/ScalarApiButton.tsx b/packages/react-openapi/src/ScalarApiButton.tsx
index 21b0b0ed1..f2835e22a 100644
--- a/packages/react-openapi/src/ScalarApiButton.tsx
+++ b/packages/react-openapi/src/ScalarApiButton.tsx
@@ -6,12 +6,15 @@ import React from 'react';
 /**
  * Button which launches the Scalar API Client
  */
-export function ScalarApiButton() {
+export function ScalarApiButton({ method, path }: { method: string; path: string }) {
     const client = useApiClientModal();
 
     return (
         <div className="scalar scalar-activate">
-            <button className="scalar-activate-button" onClick={() => client?.open()}>
+            <button
+                className="scalar-activate-button"
+                onClick={() => client?.open({ method, path })}
+            >
                 <svg xmlns="http://www.w3.org/2000/svg" width="10" height="12" fill="none">
                     <path
                         stroke="currentColor"