fix form submit (finos#38)

* fix form submit * Fix tempalte name name field reloading workbench + submit appChannel addContextListener on enter * Update toolbox/fdc3-workbench/src/components/AppChannels.tsx Co-authored-by: Kris West <kris@cosaic.io>
whitedogio · Nov 16, 2022 · 03335b6 · 03335b6
1 parent 939f86c
commit 03335b6
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 46 deletions.
diff --git a/toolbox/fdc3-workbench/src/components/AppChannels.tsx b/toolbox/fdc3-workbench/src/components/AppChannels.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { FormEvent, useState } from "react";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import { Button, IconButton, Tooltip, Typography, Grid, TextField } from "@material-ui/core";
 import { observer } from "mobx-react";
@@ -126,7 +126,8 @@ export const AppChannels = observer(({handleTabChange} : {handleTabChange:any})
     const contextListenersOptions = Array.from(new Map(contextListenersOptionsAll.reverse().map((item) => [item["type"], item])).values()).reverse();
 
 
-    const handleGetorCreateChannel = () =>{
+    const handleGetorCreateChannel = (e: FormEvent | null = null) =>{
+        e?.preventDefault()
         if (currentAppChannelId) {
            let foundChannel = appChannelStore.appChannelsList.find((currentChannel)=>currentChannel.id === currentAppChannelId);
             if (!foundChannel) {
@@ -226,7 +227,7 @@ export const AppChannels = observer(({handleTabChange} : {handleTabChange:any})
 				<Typography variant="h5">Get Channel</Typography>
 			</Grid>
 
-            <form className={classes.form} noValidate autoComplete="off">
+            <form className={classes.form} noValidate autoComplete="off" onSubmit={(e) => handleGetorCreateChannel(e)}>
                 <Grid container direction="row" spacing={1}>
                     <Grid item className={classes.field}>
                         <TextField 
@@ -321,6 +322,12 @@ export const AppChannels = observer(({handleTabChange} : {handleTabChange:any})
                                                 helperText={channel.listenerError}
                                             />
                                         )}
+                                        onKeyDown={(event) => {
+                                            if (event.key === 'Enter') {
+                                              event.defaultPrevented = true;
+                                              handleAddContextListener(channel.id);
+                                            }
+                                          }}
                                     />
                                 </Grid>
 

diff --git a/toolbox/fdc3-workbench/src/components/ContextCreate.tsx b/toolbox/fdc3-workbench/src/components/ContextCreate.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef, FormEvent } from "react";
 import { observer } from "mobx-react";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import { Button, Grid, Typography, Tooltip, IconButton, Table, TableBody, TableRow, TableCell, TableContainer } from "@material-ui/core";
@@ -195,7 +195,8 @@ export const ContextCreate = observer(({contextName}: {contextName:string}) => {
 		setDisabled(true);
 	};
 
-	const handleSaveTemplate = () => {
+	const handleSaveTemplate = (e: FormEvent | null = null) => {
+		e?.preventDefault();
 		const isValid: boolean = validate();
 
 		if (isValid && context && templateName) {
@@ -373,7 +374,7 @@ export const ContextCreate = observer(({contextName}: {contextName:string}) => {
 				</Grid>
 			</form>
 
-			<form className={classes.form} noValidate autoComplete="off">
+			<form className={classes.form} noValidate autoComplete="off" onSubmit={(e)=>handleSaveTemplate(e)}>
 				<Grid container direction="row" spacing={1} className={classes.rightAlign}>
 					<Grid item xs={12} className={`${classes.controls} ${classes.templateSelect}`}>
 						<Grid item xs={6} className={classes.field}>

diff --git a/toolbox/fdc3-workbench/src/components/ContextLinking.tsx b/toolbox/fdc3-workbench/src/components/ContextLinking.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { FormEvent, useState } from "react";
 import { observer } from "mobx-react";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import { Typography, Grid, Button, IconButton, Tooltip } from "@material-ui/core";
@@ -123,7 +123,8 @@ export const ContextLinking = observer(() => {
 		return filtered;
 	};
 
-	const handleAddContextListener = () => {
+	const handleAddContextListener = (e: FormEvent | null = null) => {
+		e?.preventDefault();
 		if (contextListener) {
 			if (contextStore.isContextListenerExists(contextListener.type)) {
 				setContextError("Listener already added");
@@ -141,8 +142,7 @@ export const ContextLinking = observer(() => {
 			<Grid item xs={12}>
 				<Typography variant="h5">Add Context Listener</Typography>
 			</Grid>
-
-			<form className={classes.form} noValidate autoComplete="off">
+			<form className={classes.form} noValidate autoComplete="off" onSubmit={(e) => handleAddContextListener(e)}>
 				<Grid
 					container
 					direction="row"

diff --git a/toolbox/fdc3-workbench/src/components/ContextTemplates.tsx b/toolbox/fdc3-workbench/src/components/ContextTemplates.tsx
@@ -121,43 +121,41 @@ export const ContextTemplates = observer(({handleTabChange, contextStateSetter,
 
 	return (
 		<div className={classes.root}>
-			<form className={classes.form} noValidate autoComplete="off">
-				<Grid
-					container
-					direction="row"
-					spacing={1}
-					justifyContent="space-between"
-					className={`${classes.controls} ${classes.rightAlign}`}
-				>
-					<Grid item className={classes.contextName}>
-						<Autocomplete
-							id="context-"
-							size="small"
-							selectOnFocus
-							blurOnSelect
-							clearOnBlur
-							handleHomeEndKeys
-							value={context}
-							onChange={handleChange(setContext, setContextError)}
-							getOptionSelected={(option, value) => option.value === value.value}
-							filterOptions={filterOptions}
-							options={contextsOptions}
-							getOptionLabel={getOptionLabel}
-							renderOption={(option) => option.title}
-							renderInput={(params) => (
-								<TemplateTextField
-									label="CONTEXT "
-									placeholder="Enter Context Type"
-									variant="outlined"
-									{...params}
-									error={!!contextError}
-									helperText={contextError}
-								/>
-							)}
-						/>
-					</Grid>
+			<Grid
+				container
+				direction="row"
+				spacing={1}
+				justifyContent="space-between"
+				className={`${classes.controls} ${classes.rightAlign}`}
+			>
+				<Grid item className={classes.contextName}>
+					<Autocomplete
+						id="context-"
+						size="small"
+						selectOnFocus
+						blurOnSelect
+						clearOnBlur
+						handleHomeEndKeys
+						value={context}
+						onChange={handleChange(setContext, setContextError)}
+						getOptionSelected={(option, value) => option.value === value.value}
+						filterOptions={filterOptions}
+						options={contextsOptions}
+						getOptionLabel={getOptionLabel}
+						renderOption={(option) => option.title}
+						renderInput={(params) => (
+							<TemplateTextField
+								label="CONTEXT "
+								placeholder="Enter Context Type"
+								variant="outlined"
+								{...params}
+								error={!!contextError}
+								helperText={contextError}
+							/>
+						)}
+					/>
 				</Grid>
-			</form>
+			</Grid>
 		</div>
 	);
 });