fix(explorer): encode RFC 3986 reserved chars in query parameter values (#1366)

* fix(explorer): encode RFC 3986 reserved chars in query parameter values

Replaces the manual space-only encoding with encodeURIComponent for query
parameters, so reserved characters like ':' are correctly percent-encoded
(e.g. ':' → '%3A') when building request URLs.

Path parameters retain the existing whitespace-only encoding since they
are handled separately downstream in setPathParams.

Closes #1312

* test(explorer): add RFC 3986 query param encoding cases to paramSerialization

Adds two endpoints to visually verify that reserved characters like ':', '/',
and '#' are percent-encoded in query parameter values.

Related to #1312

Author: sserrata

demo/examples/tests/paramSerialization.yaml

@@ -420,6 +420,64 @@ paths:
         "200":
           description: Successful response
 
+  /rfc3986/colon:
+    get:
+      tags:
+        - params
+      summary: Query param with RFC 3986 reserved char ':'
+      description: |
+        Verifies that `:` in a query parameter value is percent-encoded as `%3A`.
+
+        Example:
+        ```
+        filter = "status:active"
+        Result: /rfc3986/colon?filter=status%3Aactive
+        ```
+      parameters:
+        - name: filter
+          in: query
+          description: 'Try a value containing a colon, e.g. "status:active"'
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Successful response
+
+  /rfc3986/reserved:
+    get:
+      tags:
+        - params
+      summary: Query params with multiple RFC 3986 reserved chars
+      description: |
+        Verifies that RFC 3986 reserved characters in query parameter values
+        are percent-encoded correctly.
+
+        Example:
+        ```
+        q    = "hello:world"   → q=hello%3Aworld
+        path = "a/b/c"         → path=a%2Fb%2Fc
+        ref  = "v1#section"    → ref=v1%23section
+        ```
+      parameters:
+        - name: q
+          in: query
+          description: 'Try a value with a colon, e.g. "hello:world"'
+          schema:
+            type: string
+        - name: path
+          in: query
+          description: 'Try a value with slashes, e.g. "a/b/c"'
+          schema:
+            type: string
+        - name: ref
+          in: query
+          description: 'Try a value with a hash, e.g. "v1#section"'
+          schema:
+            type: string
+      responses:
+        "200":
+          description: Successful response
+
   /cookies:
     get:
       tags:

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem.tsx

@@ -38,9 +38,11 @@ export default function ParamTextFormItem({
           setParam({
             ...param,
             value:
-              param.in === "path" || param.in === "query"
+              param.in === "path"
                 ? e.target.value.replace(/\s/g, "%20")
-                : e.target.value,
+                : param.in === "query"
+                  ? encodeURIComponent(e.target.value)
+                  : e.target.value,
           })
         )
       }