allow pressing enter to perform the 'Execute' action (#255)

Author: chris48s

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Authorization/index.tsx

@@ -33,6 +33,7 @@ function LockButton({ mode, children, style, ...rest }: Props) {
         marginBottom: "var(--ifm-spacing-vertical)",
         ...style,
       }}
+      type="button"
       {...rest}
     >
       <span>{children}</span>

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Curl/index.tsx

@@ -225,6 +225,7 @@ function Curl({ postman, codeSamples }: Props) {
                 language === lang ? "api-code-tab--active" : undefined,
                 "api-code-tab"
               )}
+              type="button"
               onClick={() => setLanguage(lang)}
             >
               {lang.tabName || lang.label}

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Execute/index.tsx

@@ -78,6 +78,7 @@ function Execute({ postman, proxy }: Props) {
           dispatch(setResponse(e.message ?? "Error fetching."));
         }
       }}
+      type="submit"
     >
       Execute
     </button>

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/FloatingButton/index.tsx

@@ -18,7 +18,11 @@ interface Props {
 function FloatingButton({ label, onClick, children }: Props) {
   return (
     <div className={styles.floatingButton}>
-      {label && <button onClick={onClick}>{label}</button>}
+      {label && (
+        <button onClick={onClick} type="button">
+          {label}
+        </button>
+      )}
       {children}
     </div>
   );

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/FormFileUpload/index.tsx

@@ -96,6 +96,7 @@ function FormFileUpload({ placeholder, onChange }: Props) {
           <>
             <button
               style={{ marginTop: "calc(var(--ifm-pre-padding) / 2)" }}
+              type="button"
               onClick={(e) => {
                 e.stopPropagation();
                 setAndNotifyFile(undefined);

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/ParamOptions/index.tsx

@@ -86,6 +86,7 @@ function ParamOptions() {
         <>
           <button
             className={styles.showMoreButton}
+            type="button"
             onClick={() => setShowOptional((prev) => !prev)}
           >
             <span
@@ -225,6 +226,7 @@ function ParamArrayFormItem({ param }: ParamProps) {
           <ArrayItem param={param} onChange={handleChangeItem(item)} />
           <button
             className={styles.buttonDelete}
+            type="button"
             onClick={handleDeleteItem(item)}
           >
             <svg
@@ -245,6 +247,7 @@ function ParamArrayFormItem({ param }: ParamProps) {
       ))}
       <button
         className={styles.buttonThin}
+        type="button"
         onClick={handleAddItem}
         disabled={
           param?.schema?.maxItems != null &&

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Server/index.tsx

@@ -62,6 +62,7 @@ function Server() {
       <button
         className={styles.showMoreButton}
         onClick={() => setIsEditing(false)}
+        type="button"
       >
         Hide
       </button>

packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/index.tsx

@@ -87,40 +87,46 @@ function ApiDemoPanel({ item }: Props) {
     [persistanceMiddleware]
   );
 
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+  };
+
   const { path, method } = item;
 
   return (
     <Provider store={store2}>
       <div style={{ marginTop: "3.5em" }}>
-        <Authorization />
-
-        {item.operationId !== undefined && (
-          <div style={{ marginBottom: "var(--ifm-table-cell-padding)" }}>
-            <code>
-              <b>{item.operationId}</b>
-            </code>
+        <form onSubmit={handleSubmit}>
+          <Authorization />
+
+          {item.operationId !== undefined && (
+            <div style={{ marginBottom: "var(--ifm-table-cell-padding)" }}>
+              <code>
+                <b>{item.operationId}</b>
+              </code>
+            </div>
+          )}
+
+          <MethodEndpoint method={method} path={path} />
+
+          <div className={styles.optionsPanel}>
+            <ParamOptions />
+            <Body
+              jsonRequestBodyExample={item.jsonRequestBodyExample}
+              requestBodyMetadata={item.requestBody}
+            />
+            <Accept />
           </div>
-        )}
 
-        <MethodEndpoint method={method} path={path} />
+          <Server />
 
-        <div className={styles.optionsPanel}>
-          <ParamOptions />
-          <Body
-            jsonRequestBodyExample={item.jsonRequestBodyExample}
-            requestBodyMetadata={item.requestBody}
+          <Curl
+            postman={postman}
+            codeSamples={(item as any)["x-code-samples"] ?? []}
           />
-          <Accept />
-        </div>
-
-        <Server />
-
-        <Curl
-          postman={postman}
-          codeSamples={(item as any)["x-code-samples"] ?? []}
-        />
 
-        <Execute postman={postman} proxy={options?.proxy} />
+          <Execute postman={postman} proxy={options?.proxy} />
+        </form>
 
         <Response />
       </div>