Skip to content

Commit 03335b6

Browse files
kenny-ciqkriswest
kenny-ciq
and
kriswest
authored
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 <[email protected]>
1 parent 939f86c commit 03335b6

File tree

4 files changed

+52
-46
lines changed

4 files changed

+52
-46
lines changed

‎toolbox/fdc3-workbench/src/components/AppChannels.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from "react";
1+
import React, { FormEvent, useState } from "react";
22
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
33
import { Button, IconButton, Tooltip, Typography, Grid, TextField } from "@material-ui/core";
44
import { observer } from "mobx-react";
@@ -126,7 +126,8 @@ export const AppChannels = observer(({handleTabChange} : {handleTabChange:any})
126126
const contextListenersOptions = Array.from(new Map(contextListenersOptionsAll.reverse().map((item) => [item["type"], item])).values()).reverse();
127127

128128

129-
const handleGetorCreateChannel = () =>{
129+
const handleGetorCreateChannel = (e: FormEvent | null = null) =>{
130+
e?.preventDefault()
130131
if (currentAppChannelId) {
131132
let foundChannel = appChannelStore.appChannelsList.find((currentChannel)=>currentChannel.id === currentAppChannelId);
132133
if (!foundChannel) {
@@ -226,7 +227,7 @@ export const AppChannels = observer(({handleTabChange} : {handleTabChange:any})
226227
<Typography variant="h5">Get Channel</Typography>
227228
</Grid>
228229

229-
<form className={classes.form} noValidate autoComplete="off">
230+
<form className={classes.form} noValidate autoComplete="off" onSubmit={(e) => handleGetorCreateChannel(e)}>
230231
<Grid container direction="row" spacing={1}>
231232
<Grid item className={classes.field}>
232233
<TextField
@@ -321,6 +322,12 @@ export const AppChannels = observer(({handleTabChange} : {handleTabChange:any})
321322
helperText={channel.listenerError}
322323
/>
323324
)}
325+
onKeyDown={(event) => {
326+
if (event.key === 'Enter') {
327+
event.defaultPrevented = true;
328+
handleAddContextListener(channel.id);
329+
}
330+
}}
324331
/>
325332
</Grid>
326333

‎toolbox/fdc3-workbench/src/components/ContextCreate.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState, useRef } from "react";
1+
import React, { useEffect, useState, useRef, FormEvent } from "react";
22
import { observer } from "mobx-react";
33
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
44
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}) => {
195195
setDisabled(true);
196196
};
197197

198-
const handleSaveTemplate = () => {
198+
const handleSaveTemplate = (e: FormEvent | null = null) => {
199+
e?.preventDefault();
199200
const isValid: boolean = validate();
200201

201202
if (isValid && context && templateName) {
@@ -373,7 +374,7 @@ export const ContextCreate = observer(({contextName}: {contextName:string}) => {
373374
</Grid>
374375
</form>
375376

376-
<form className={classes.form} noValidate autoComplete="off">
377+
<form className={classes.form} noValidate autoComplete="off" onSubmit={(e)=>handleSaveTemplate(e)}>
377378
<Grid container direction="row" spacing={1} className={classes.rightAlign}>
378379
<Grid item xs={12} className={`${classes.controls} ${classes.templateSelect}`}>
379380
<Grid item xs={6} className={classes.field}>

‎toolbox/fdc3-workbench/src/components/ContextLinking.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from "react";
1+
import React, { FormEvent, useState } from "react";
22
import { observer } from "mobx-react";
33
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
44
import { Typography, Grid, Button, IconButton, Tooltip } from "@material-ui/core";
@@ -123,7 +123,8 @@ export const ContextLinking = observer(() => {
123123
return filtered;
124124
};
125125

126-
const handleAddContextListener = () => {
126+
const handleAddContextListener = (e: FormEvent | null = null) => {
127+
e?.preventDefault();
127128
if (contextListener) {
128129
if (contextStore.isContextListenerExists(contextListener.type)) {
129130
setContextError("Listener already added");
@@ -141,8 +142,7 @@ export const ContextLinking = observer(() => {
141142
<Grid item xs={12}>
142143
<Typography variant="h5">Add Context Listener</Typography>
143144
</Grid>
144-
145-
<form className={classes.form} noValidate autoComplete="off">
145+
<form className={classes.form} noValidate autoComplete="off" onSubmit={(e) => handleAddContextListener(e)}>
146146
<Grid
147147
container
148148
direction="row"

‎toolbox/fdc3-workbench/src/components/ContextTemplates.tsx

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -121,43 +121,41 @@ export const ContextTemplates = observer(({handleTabChange, contextStateSetter,
121121

122122
return (
123123
<div className={classes.root}>
124-
<form className={classes.form} noValidate autoComplete="off">
125-
<Grid
126-
container
127-
direction="row"
128-
spacing={1}
129-
justifyContent="space-between"
130-
className={`${classes.controls} ${classes.rightAlign}`}
131-
>
132-
<Grid item className={classes.contextName}>
133-
<Autocomplete
134-
id="context-"
135-
size="small"
136-
selectOnFocus
137-
blurOnSelect
138-
clearOnBlur
139-
handleHomeEndKeys
140-
value={context}
141-
onChange={handleChange(setContext, setContextError)}
142-
getOptionSelected={(option, value) => option.value === value.value}
143-
filterOptions={filterOptions}
144-
options={contextsOptions}
145-
getOptionLabel={getOptionLabel}
146-
renderOption={(option) => option.title}
147-
renderInput={(params) => (
148-
<TemplateTextField
149-
label="CONTEXT "
150-
placeholder="Enter Context Type"
151-
variant="outlined"
152-
{...params}
153-
error={!!contextError}
154-
helperText={contextError}
155-
/>
156-
)}
157-
/>
158-
</Grid>
124+
<Grid
125+
container
126+
direction="row"
127+
spacing={1}
128+
justifyContent="space-between"
129+
className={`${classes.controls} ${classes.rightAlign}`}
130+
>
131+
<Grid item className={classes.contextName}>
132+
<Autocomplete
133+
id="context-"
134+
size="small"
135+
selectOnFocus
136+
blurOnSelect
137+
clearOnBlur
138+
handleHomeEndKeys
139+
value={context}
140+
onChange={handleChange(setContext, setContextError)}
141+
getOptionSelected={(option, value) => option.value === value.value}
142+
filterOptions={filterOptions}
143+
options={contextsOptions}
144+
getOptionLabel={getOptionLabel}
145+
renderOption={(option) => option.title}
146+
renderInput={(params) => (
147+
<TemplateTextField
148+
label="CONTEXT "
149+
placeholder="Enter Context Type"
150+
variant="outlined"
151+
{...params}
152+
error={!!contextError}
153+
helperText={contextError}
154+
/>
155+
)}
156+
/>
159157
</Grid>
160-
</form>
158+
</Grid>
161159
</div>
162160
);
163161
});

0 commit comments

Comments
 (0)