From a8061a6d15a0b56fad1688a5d36126230f08d562 Mon Sep 17 00:00:00 2001
From: Robin Davies <rerdavies@gmail.com>
Date: Tue, 8 Oct 2024 04:20:37 -0400
Subject: [PATCH] Enter key handling for dialogs.

---
 react/src/AboutDialog.tsx                     |  1 +
 react/src/AppThemed.tsx                       |  1 +
 react/src/BankDialog.tsx                      |  5 ++++-
 react/src/DialogEx.tsx                        |  6 ++++-
 react/src/FilePropertyDialog.tsx              |  7 ++++--
 .../src/FilePropertyDirectorySelectDialog.tsx |  1 +
 react/src/FullScreenIME.tsx                   | 22 ++++++++++++-------
 react/src/JackServerSettingsDialog.tsx        | 13 ++++++++---
 react/src/LoadPluginDialog.tsx                | 20 +++++++++++++++--
 react/src/MidiBindingsDialog.tsx              |  2 ++
 react/src/OkCancelDialog.tsx                  |  1 +
 react/src/OptionsDialog.tsx                   |  2 +-
 react/src/PluginInfoDialog.tsx                |  4 +++-
 react/src/PluginPresetsDialog.tsx             |  4 +++-
 react/src/PresetDialog.tsx                    |  4 +++-
 ...SelectDialog.tsx => RadioSelectDialog.tsx} | 19 ++++++----------
 react/src/RenameDialog.tsx                    |  1 +
 react/src/SelectChannelsDialog.tsx            |  8 +++++--
 react/src/SelectMidiChannelsDialog.tsx        |  4 +++-
 react/src/SelectThemeDialog.tsx               |  4 +++-
 react/src/SettingsDialog.tsx                  |  7 +++---
 react/src/SnapshotDialog.tsx                  |  1 +
 react/src/SnapshotPropertiesDialog.tsx        |  1 +
 react/src/SystemMidiBindingsDialog.tsx        |  1 +
 react/src/UpdateDialog.tsx                    |  2 ++
 react/src/UploadFileDialog.tsx                | 12 ++++++----
 react/src/UploadPresetDialog.tsx              |  3 ++-
 react/src/WifiConfigDialog.tsx                | 17 +++++++++++---
 react/src/WifiDirectConfigDialog.tsx          |  2 +-
 react/src/ZoomedUiControl.tsx                 |  1 +
 todo.txt                                      |  4 ++++
 31 files changed, 131 insertions(+), 49 deletions(-)
 rename react/src/{ListSelectDialog.tsx => RadioSelectDialog.tsx} (85%)

diff --git a/react/src/AboutDialog.tsx b/react/src/AboutDialog.tsx
index 8a65e02..eb95eef 100644
--- a/react/src/AboutDialog.tsx
+++ b/react/src/AboutDialog.tsx
@@ -199,6 +199,7 @@ const AboutDialog = withStyles(styles, { withTheme: true })(
             return (
                 <DialogEx tag="about" fullScreen open={this.props.open}
                     onClose={() => { this.props.onClose() }} TransitionComponent={Transition}
+                    onEnterKey={() => { this.props.onClose() }}
                     style={{ userSelect: "none" }}
                 >
 
diff --git a/react/src/AppThemed.tsx b/react/src/AppThemed.tsx
index 73615d5..4845347 100644
--- a/react/src/AppThemed.tsx
+++ b/react/src/AppThemed.tsx
@@ -1020,6 +1020,7 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
                 <DialogEx tag="Alert"
                     open={this.state.alertDialogOpen}
                     onClose={this.handleCloseAlert}
+                    onEnterKey={this.handleCloseAlert}
                     aria-describedby="alert-dialog-description"
                 >
                     <DialogContent>
diff --git a/react/src/BankDialog.tsx b/react/src/BankDialog.tsx
index 2b0940f..e22fd4c 100644
--- a/react/src/BankDialog.tsx
+++ b/react/src/BankDialog.tsx
@@ -409,6 +409,7 @@ const BankDialog = withStyles(styles, { withTheme: true })(
             return (
                 <DialogEx tag="bank" fullScreen open={this.props.show}
                     onClose={() => { this.handleDialogClose() }} TransitionComponent={Transition}
+                    onEnterKey={()=>{}}
                     style={{ userSelect: "none" }}
                 >
                     <div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
@@ -544,7 +545,9 @@ const BankDialog = withStyles(styles, { withTheme: true })(
                     />
 
                     <DialogEx tag="deletePrompt" open={this.state.showDeletePrompt} onClose={() => this.handleDeletePromptClose()}
-                        style={{ userSelect: "none" }}>
+                        style={{ userSelect: "none" }}
+                        onEnterKey={()=>{ this.handleDeletePromptOk() }}
+                        >
                         <DialogContent>
                             <Typography>Are you sure you want to delete bank '{this.getSelectedBankName()}'?</Typography>
                         </DialogContent>
diff --git a/react/src/DialogEx.tsx b/react/src/DialogEx.tsx
index 4879613..0fb78d9 100644
--- a/react/src/DialogEx.tsx
+++ b/react/src/DialogEx.tsx
@@ -25,6 +25,7 @@ import Dialog, {DialogProps} from '@mui/material/Dialog';
 interface DialogExProps extends DialogProps {
     tag: string;
     fullwidth?: boolean;
+    onEnterKey: () => void;
 }
 
 interface DialogExState {
@@ -186,7 +187,10 @@ class DialogEx extends React.Component<DialogExProps,DialogExState> implements I
     }
 
     onEnterKey() {
-
+        if (this.props.onEnterKey)
+        {
+            this.props.onEnterKey();
+        }
     }
     onKeyDown(evt: React.KeyboardEvent<HTMLDivElement>)
     {
diff --git a/react/src/FilePropertyDialog.tsx b/react/src/FilePropertyDialog.tsx
index 7a15512..7fdeecc 100644
--- a/react/src/FilePropertyDialog.tsx
+++ b/react/src/FilePropertyDialog.tsx
@@ -484,9 +484,12 @@ export default withStyles(styles, { withTheme: true })(
                     fullScreen={this.state.fullScreen} 
                     onClose={() => {
                         this.props.onCancel();
-                    }} 
+                    }}
+                    onEnterKey={()=> {
+                        this.openSelectedFile();
+                    }}
                     open={this.props.open} tag="fileProperty" 
-                    fullWidth maxWidth="xl" 
+                    fullWidth maxWidth="md" 
                     PaperProps={
                         this.state.fullScreen ? 
                         {}
diff --git a/react/src/FilePropertyDirectorySelectDialog.tsx b/react/src/FilePropertyDirectorySelectDialog.tsx
index ec468c3..a9b341f 100644
--- a/react/src/FilePropertyDirectorySelectDialog.tsx
+++ b/react/src/FilePropertyDirectorySelectDialog.tsx
@@ -319,6 +319,7 @@ export default class FilePropertyDirectorySelectDialog extends ResizeResponsiveC
             <DialogEx tag="fpDirectorySelect" open={this.props.open} fullWidth onClose={() => { this.onClose(); }} aria-labelledby="Rename-dialog-title"
                 fullScreen={this.state.fullScreen}
                 style={{ userSelect: "none" }}
+                onEnterKey={()=>{ this.onOK(); }}
                 PaperProps={{ style: { minHeight: "80%", maxHeight: "80%", minWidth: "75%", maxWidth: "75%", overflowY: "visible" } }}
             >
                 <DialogTitle>
diff --git a/react/src/FullScreenIME.tsx b/react/src/FullScreenIME.tsx
index dcc9a08..f3ec69a 100644
--- a/react/src/FullScreenIME.tsx
+++ b/react/src/FullScreenIME.tsx
@@ -166,15 +166,19 @@ const FullScreenIME =
                 }
             }
 
+            onOk() {
+                if (this.inputChanged) {
+                    this.inputChanged = false;
+                    this.validateInput(true);
+                }
+                else {
+                    this.props.onClose();
+                }
+            }
+
             onInputKeyPress(e: any): void {
                 if (e.charCode === 13) {
-                    if (this.inputChanged) {
-                        this.inputChanged = false;
-                        this.validateInput(true);
-                    }
-                    else {
-                        this.props.onClose();
-                    }
+                    this.onOk();
                 }
             }
 
@@ -196,7 +200,9 @@ const FullScreenIME =
                 let value = this.props.value;
 
                 return (
-                    <DialogEx tag="ime" fullScreen open={!!(this.props.uiControl)} onClose={(e, r) => this.handleClose(e, r)} >
+                    <DialogEx tag="ime" fullScreen open={!!(this.props.uiControl)} onClose={(e, r) => this.handleClose(e, r)} 
+                        onEnterKey={()=>{ /*nothing*/}}
+                    >
                         <div style={{
                             width: "100%", height: "100%", position: "relative",
                             display: "flex", flexDirection: "column", flexWrap: "nowrap",
diff --git a/react/src/JackServerSettingsDialog.tsx b/react/src/JackServerSettingsDialog.tsx
index d3d2e3a..aa9530d 100644
--- a/react/src/JackServerSettingsDialog.tsx
+++ b/react/src/JackServerSettingsDialog.tsx
@@ -393,8 +393,10 @@ const JackServerSettingsDialog = withStyles(styles)(
         }
 
         handleApply() {
-
-            this.props.onApply(this.state.jackServerSettings.clone());
+            if (this.state.okEnabled)
+            {
+                this.props.onApply(this.state.jackServerSettings.clone());
+            }
         };
 
         render() {
@@ -422,7 +424,12 @@ const JackServerSettingsDialog = withStyles(styles)(
             let bufferCountDisabled = !selectedDevice;
 
             return (
-                <DialogEx tag="jack" onClose={handleClose} aria-labelledby="select-channels-title" open={open}>
+                <DialogEx tag="jack" onClose={handleClose} aria-labelledby="select-channels-title" open={open}
+                    onEnterKey={() => {
+                        this.handleApply();
+                    }}
+
+                >
                     <DialogContent>
                         <div>
                             <FormControl className={classes.formControl}>
diff --git a/react/src/LoadPluginDialog.tsx b/react/src/LoadPluginDialog.tsx
index 6cfaec5..2a9eeba 100644
--- a/react/src/LoadPluginDialog.tsx
+++ b/react/src/LoadPluginDialog.tsx
@@ -375,8 +375,22 @@ export const LoadPluginDialog =
                 e.preventDefault();
                 this.cancel();
             }
-            handleOk(e: SyntheticEvent): void {
-                e.preventDefault();
+            handleOk(e?: SyntheticEvent): void {
+                if (e) {
+                    e.preventDefault();
+                }
+
+                let selectedPlugin: UiPlugin | undefined = undefined;
+                if (this.state.selected_uri) {
+                    let t = this.model.getUiPlugin(this.state.selected_uri);
+                    if (t) selectedPlugin = t;
+                }
+                if (!selectedPlugin)
+                {
+                    return;
+                }
+
+
                 if (this.state.selected_uri) {
                     this.props.onOk(this.state.selected_uri);
                 }
@@ -688,7 +702,9 @@ export const LoadPluginDialog =
                 return (
                     <React.Fragment>
                         <DialogEx tag="plugins"
+                            onEnterKey={()=>{ this.handleOk(); }}
                             onKeyPress={(e) => { this.handleKeyPress(e); }}
+
                             fullScreen={true}
                             TransitionComponent={undefined}
                             maxWidth={false}
diff --git a/react/src/MidiBindingsDialog.tsx b/react/src/MidiBindingsDialog.tsx
index bd4c6f1..1fe9991 100644
--- a/react/src/MidiBindingsDialog.tsx
+++ b/react/src/MidiBindingsDialog.tsx
@@ -326,6 +326,8 @@ export const MidiBindingDialog =
                     <DialogEx tag="midiBindings" open={open} fullWidth onClose={this.handleClose} aria-labelledby="Rename-dialog-title" 
                         fullScreen={true} 
                         style={{userSelect: "none"}}
+                        onEnterKey={()=>{}}
+
                     >
                             <div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
                                 <div style={{ flex: "0 0 auto" }}>
diff --git a/react/src/OkCancelDialog.tsx b/react/src/OkCancelDialog.tsx
index 726ac3b..c46384e 100644
--- a/react/src/OkCancelDialog.tsx
+++ b/react/src/OkCancelDialog.tsx
@@ -63,6 +63,7 @@ export default class OkCancelDialog extends React.Component<OkCancelDialogProps,
         }
         return (
             <DialogEx tag="okCancel" open={open} onClose={handleClose} 
+                onEnterKey={handleOk}
                 style={{userSelect: "none"}}
                 >
                 <DialogContent>
diff --git a/react/src/OptionsDialog.tsx b/react/src/OptionsDialog.tsx
index bdae319..890df65 100644
--- a/react/src/OptionsDialog.tsx
+++ b/react/src/OptionsDialog.tsx
@@ -70,7 +70,7 @@ function OptionsDialog(props: OptionsDialogProps) {
         onClose();
     };
     return (
-        <DialogEx tag="options" onClose={handleCancel} aria-labelledby="select-option" open={open}  >
+        <DialogEx tag="options" onClose={handleCancel} aria-labelledby="select-option" open={open} onEnterKey={()=>{}}  >
         {title && (
             <DialogTitle style={{paddingLeft: 8}}>
                 <Typography variant="body2" color="textSecondary">
diff --git a/react/src/PluginInfoDialog.tsx b/react/src/PluginInfoDialog.tsx
index 2e9bfca..6d9e887 100644
--- a/react/src/PluginInfoDialog.tsx
+++ b/react/src/PluginInfoDialog.tsx
@@ -235,7 +235,9 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => {
                 <InfoOutlinedIcon className={classes.icon} color='inherit' />
             </IconButton>
             {open && (
-                <DialogEx tag="info" onClose={handleClose} open={open} fullWidth >
+                <DialogEx tag="info" onClose={handleClose} open={open} fullWidth maxWidth="md" 
+                    onEnterKey={handleClose}
+                >
                     <MuiDialogTitle >
                         <div style={{ display: "flex", flexDirection: "row", alignItems: "start", flexWrap: "nowrap" }}>
                             <div style={{ flex: "0 0 auto", marginRight: 16 }}>
diff --git a/react/src/PluginPresetsDialog.tsx b/react/src/PluginPresetsDialog.tsx
index 35bd05a..9e012c9 100644
--- a/react/src/PluginPresetsDialog.tsx
+++ b/react/src/PluginPresetsDialog.tsx
@@ -361,7 +361,9 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })(
             return (
                 <DialogEx tag="pluginPresets" fullScreen open={this.props.show}
                     onClose={() => { this.handleDialogClose() }} TransitionComponent={Transition}
-                    style={{userSelect: "none"}}>
+                    style={{userSelect: "none"}}
+                    onEnterKey={()=>{}}
+                    >
                     <div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
                         <div style={{ flex: "0 0 auto" }}>
                             <AppBar className={classes.dialogAppBar} style={{ display: this.isEditMode() ? "none" : "block" }} >
diff --git a/react/src/PresetDialog.tsx b/react/src/PresetDialog.tsx
index 6f7d159..5d5f9c6 100644
--- a/react/src/PresetDialog.tsx
+++ b/react/src/PresetDialog.tsx
@@ -340,7 +340,9 @@ const PresetDialog = withStyles(styles, { withTheme: true })(
             return (
                 <DialogEx tag="preset" fullScreen open={this.props.show}
                     onClose={() => { this.handleDialogClose() }} TransitionComponent={Transition}
-                    style={{userSelect: "none"}}>
+                    style={{userSelect: "none"}}
+                    onEnterKey={()=>{}}
+                    >
                     <div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
                         <div style={{ flex: "0 0 auto" }}>
                             <AppBar className={classes.dialogAppBar} style={{ display: this.isEditMode() ? "none" : "block" }} >
diff --git a/react/src/ListSelectDialog.tsx b/react/src/RadioSelectDialog.tsx
similarity index 85%
rename from react/src/ListSelectDialog.tsx
rename to react/src/RadioSelectDialog.tsx
index 03f145d..6856fb0 100644
--- a/react/src/ListSelectDialog.tsx
+++ b/react/src/RadioSelectDialog.tsx
@@ -18,7 +18,6 @@
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
-import Button from '@mui/material/Button';
 
 
 import Radio from '@mui/material/Radio';
@@ -29,11 +28,10 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 
 import DialogEx from './DialogEx';
-import DialogActions from '@mui/material/DialogActions';
 import ResizeResponsiveComponent from './ResizeResponsiveComponent';
 
 
-export interface ListSelectDialogProps {
+export interface RadioSelectDialogProps {
     open: boolean,
     title: string,
     width: number,
@@ -43,15 +41,15 @@ export interface ListSelectDialogProps {
     onClose: () => void
 };
 
-export interface ListSelectDialogState {
+export interface RadioSelectDialogState {
     fullScreen: boolean;
 };
 
-export default class ListSelectDialog extends ResizeResponsiveComponent<ListSelectDialogProps, ListSelectDialogState> {
+export default class RadioSelectDialog extends ResizeResponsiveComponent<RadioSelectDialogProps, RadioSelectDialogState> {
 
     refText: React.RefObject<HTMLInputElement>;
 
-    constructor(props: ListSelectDialogProps) {
+    constructor(props: RadioSelectDialogProps) {
         super(props);
         this.state = {
             fullScreen: false
@@ -82,7 +80,9 @@ export default class ListSelectDialog extends ResizeResponsiveComponent<ListSele
     render() {
 
         return (
-            <DialogEx tag="list" onClose={()=>this.props.onClose()} open={this.props.open}>
+            <DialogEx tag="list" onClose={()=>this.props.onClose()} open={this.props.open}
+            onEnterKey={()=>{  }}
+            >
                 <List sx={{pt: 0}}>
                 {
                     this.props.items.map(
@@ -105,11 +105,6 @@ export default class ListSelectDialog extends ResizeResponsiveComponent<ListSele
                     )
                 }
                 </List>
-                <DialogActions>
-                    <Button variant="dialogSecondary" onClick={()=> this.props.onClose()} color="primary">
-                        Cancel
-                    </Button>
-                </DialogActions>
             </DialogEx>
         );
     }
diff --git a/react/src/RenameDialog.tsx b/react/src/RenameDialog.tsx
index 583dadb..cafe277 100644
--- a/react/src/RenameDialog.tsx
+++ b/react/src/RenameDialog.tsx
@@ -117,6 +117,7 @@ export default class RenameDialog extends ResizeResponsiveComponent<RenameDialog
             <DialogEx tag="nameDialog" open={open} fullWidth maxWidth="sm" onClose={handleClose} aria-labelledby="Rename-dialog-title" 
                 fullScreen={this.state.fullScreen}
                 style={{userSelect: "none"}}
+                onEnterKey={()=>{}}
                 >
                 <DialogContent style={{minHeight: 96}}>
                     <TextField
diff --git a/react/src/SelectChannelsDialog.tsx b/react/src/SelectChannelsDialog.tsx
index ccabcd2..59672dd 100644
--- a/react/src/SelectChannelsDialog.tsx
+++ b/react/src/SelectChannelsDialog.tsx
@@ -90,7 +90,9 @@ function SelectChannelsDialog(props: SelectChannelsDialogProps) {
 
 
         return (
-            <DialogEx tag="audioChannels" onClose={handleClose} aria-labelledby="select-channels-title" open={open}>
+            <DialogEx tag="audioChannels" onClose={handleClose} aria-labelledby="select-channels-title" open={open}
+                onEnterKey={handleOk}
+            >
                 <DialogTitle id="simple-dialog-title">Select Channels</DialogTitle>
                 <List>
                     {availableChannels.map((channel) => (
@@ -154,7 +156,9 @@ function SelectChannelsDialog(props: SelectChannelsDialogProps) {
         }
 
         return (
-            <DialogEx tag="channels" onClose={handleCancel} aria-labelledby="select-channels-title" open={open}>
+            <DialogEx tag="channels" onClose={handleCancel} aria-labelledby="select-channels-title" open={open}
+                onEnterKey={()=>{}}
+            >
                 
                 <List style={{ marginLeft: 0, marginRight: 0}}>
                     <ListItem button onClick={() => handleListItemClick("Stereo")} key={"Stereo"} selected={selectionKey === "Stereo"} >
diff --git a/react/src/SelectMidiChannelsDialog.tsx b/react/src/SelectMidiChannelsDialog.tsx
index df621bc..23b74a5 100644
--- a/react/src/SelectMidiChannelsDialog.tsx
+++ b/react/src/SelectMidiChannelsDialog.tsx
@@ -93,7 +93,9 @@ function SelectMidiChannelsDialog(props: SelectMidiChannelsDialogProps) {
 
 
     return (
-        <DialogEx tag="midiChannels" onClose={handleClose} aria-labelledby="select-channels-title" open={open}>
+        <DialogEx tag="midiChannels" onClose={handleClose} aria-labelledby="select-channels-title" open={open}
+            onEnterKey={handleOk}
+        >
             <DialogTitle id="simple-dialog-title">Select MIDI Device</DialogTitle>
             <List>
                 {availableChannels.map((channel) => (
diff --git a/react/src/SelectThemeDialog.tsx b/react/src/SelectThemeDialog.tsx
index c4db808..f829045 100644
--- a/react/src/SelectThemeDialog.tsx
+++ b/react/src/SelectThemeDialog.tsx
@@ -64,7 +64,9 @@ function SelectThemesDialog(props: SelectThemesDialogProps) {
 
 
     return (
-        <DialogEx tag="theme" onClose={handleClose} open={open}>
+        <DialogEx tag="theme" onClose={handleClose} open={open}
+            onEnterKey={handleOk}
+        >
             <DialogTitle id="simple-dialog-title">Theme</DialogTitle>
             <DialogContent>
                 <FormControl>
diff --git a/react/src/SettingsDialog.tsx b/react/src/SettingsDialog.tsx
index f70b42a..5e0389e 100644
--- a/react/src/SettingsDialog.tsx
+++ b/react/src/SettingsDialog.tsx
@@ -20,7 +20,7 @@
 import React, { SyntheticEvent, Component } from 'react';
 import Switch from "@mui/material/Switch";
 import OkCancelDialog from './OkCancelDialog';
-import ListSelectDialog from './ListSelectDialog';
+import RadioSelectDialog from './RadioSelectDialog';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel';
@@ -542,6 +542,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                 <DialogEx tag="settings" fullScreen open={this.props.open}
                     onClose={() => { this.props.onClose() }} TransitionComponent={Transition}
                     style={{ userSelect: "none" }}
+                    onEnterKey={()=>{}}
                 >
 
                     <div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
@@ -882,7 +883,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                     {
                         (this.state.showGovernorSettingsDialog) &&
                         (
-                            <ListSelectDialog
+                            <RadioSelectDialog
                                 width={220}
                                 open={this.state.showGovernorSettingsDialog}
                                 items={this.state.governorSettings.governors}
@@ -901,7 +902,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                                     this.setState({ showGovernorSettingsDialog: false })
                                 }}
                             >
-                            </ListSelectDialog>
+                            </RadioSelectDialog>
                         )
                     }
                     {
diff --git a/react/src/SnapshotDialog.tsx b/react/src/SnapshotDialog.tsx
index 4b0cc13..3076795 100644
--- a/react/src/SnapshotDialog.tsx
+++ b/react/src/SnapshotDialog.tsx
@@ -108,6 +108,7 @@ export default class SnapshotDialog extends ResizeResponsiveComponent<SnapshotDi
                       
                     },
                   }}
+                onEnterKey={()=>{} }
             >
                 <DialogTitle>
                     <div>
diff --git a/react/src/SnapshotPropertiesDialog.tsx b/react/src/SnapshotPropertiesDialog.tsx
index 8f3d33a..f828742 100644
--- a/react/src/SnapshotPropertiesDialog.tsx
+++ b/react/src/SnapshotPropertiesDialog.tsx
@@ -113,6 +113,7 @@ export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<
         return (
             <DialogEx maxWidth="sm" fullWidth={true} tag="snapshotProps" open={this.props.open} onClose={handleClose} 
                 style={{ userSelect: "none" }} fullScreen={this.state.compactVertical}
+                onEnterKey={()=> { this.handleOk(); }}
             >
                 <DialogTitle>
                     <div>
diff --git a/react/src/SystemMidiBindingsDialog.tsx b/react/src/SystemMidiBindingsDialog.tsx
index 4c398d4..52ad0e0 100644
--- a/react/src/SystemMidiBindingsDialog.tsx
+++ b/react/src/SystemMidiBindingsDialog.tsx
@@ -328,6 +328,7 @@ export const SystemMidiBindingDialog =
                     <DialogEx tag="systemMidiBindings" open={open} fullWidth onClose={this.handleClose} aria-labelledby="Rename-dialog-title"
                         fullScreen={true}
                         style={{ userSelect: "none" }}
+                        onEnterKey={()=>{}}
                     >
                         <div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
                             <div style={{ flex: "0 0 auto" }}>
diff --git a/react/src/UpdateDialog.tsx b/react/src/UpdateDialog.tsx
index 3ece574..2347948 100644
--- a/react/src/UpdateDialog.tsx
+++ b/react/src/UpdateDialog.tsx
@@ -166,6 +166,7 @@ export default class UpdateDialog extends ResizeResponsiveComponent<UpdateDialog
         return (
             <DialogEx tag="update" open={this.props.open} onClose={() => { this.handleClose(); }}
                 style={{ userSelect: "none" }}
+                onEnterKey={()=>{ this.handleOK();}}
             >
                 <DialogTitle>
                     <div style={{ display: "flex", flexFlow: "row noWrap", alignItems: "center" }} >
@@ -288,6 +289,7 @@ export default class UpdateDialog extends ResizeResponsiveComponent<UpdateDialog
                     open={this.state.alertDialogOpen}
                     onClose={() => { this.handleCloseAlert(); }}
                     aria-describedby="Alert Dialog"
+                    onEnterKey={()=>{ this.handleCloseAlert(); }}
                 >
                     <DialogContent>
                         <Typography variant="body2" color="secondaryText">
diff --git a/react/src/UploadFileDialog.tsx b/react/src/UploadFileDialog.tsx
index 368432d..689ff5d 100644
--- a/react/src/UploadFileDialog.tsx
+++ b/react/src/UploadFileDialog.tsx
@@ -311,9 +311,13 @@ export default class UploadFileDialog extends ResizeResponsiveComponent<UploadFi
 
         let isAndroid = UploadFileDialog.IsAndroid();
         return (
-            <DialogEx tag="uploadFile" open={this.props.open} fullWidth onClose={() => this.handleClose()}
-                fullScreen={this.state.fullScreen}
-                style={{ userSelect: "none" }}
+            <DialogEx tag="uploadFile" open={this.props.open} onClose={() => this.handleClose()}
+                fullScreen={false}
+                fullWidth={true}
+                maxWidth={"sm"}
+                style={{ userSelect: "none",}}
+                onEnterKey={()=>{ this.handleClose(); }}
+
             >
                 <DialogTitle >
                     <div>
@@ -326,7 +330,7 @@ export default class UploadFileDialog extends ResizeResponsiveComponent<UploadFi
                 </DialogTitle>
                 <DialogContent style={{ paddingBottom: 0 }}>
                     <div style={{
-                        width: "100%", height: 140, marginBottom: 0,
+                        height: 140, marginBottom: 0,
                         border: (isAndroid? "2px solid #CCC" :"2px dashed #CCC"),
                         borderRadius: "10px",
                         fontFamily: "Roboto",
diff --git a/react/src/UploadPresetDialog.tsx b/react/src/UploadPresetDialog.tsx
index 073179c..b862342 100644
--- a/react/src/UploadPresetDialog.tsx
+++ b/react/src/UploadPresetDialog.tsx
@@ -157,9 +157,10 @@ export default class UploadPresetDialog extends ResizeResponsiveComponent<Upload
 
 
         return (
-            <DialogEx tag="uploadPreset" open={this.props.open} fullWidth onClose={() => this.handleClose()} 
+            <DialogEx tag="uploadPreset" open={this.props.open} fullWidth maxWidth="sm" onClose={() => this.handleClose()} 
                 fullScreen={this.state.fullScreen}
                 style={{userSelect: "none"}}
+                onEnterKey={()=>{}}
             >
                 <DialogTitle>{this.props.title}</DialogTitle>
                 <DialogContent>
diff --git a/react/src/WifiConfigDialog.tsx b/react/src/WifiConfigDialog.tsx
index 0fcbc05..886af57 100644
--- a/react/src/WifiConfigDialog.tsx
+++ b/react/src/WifiConfigDialog.tsx
@@ -328,6 +328,13 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
             }
             return result;
         }
+        handleWarningDialogOk() 
+        {
+            this.setState({ showWifiWarningDialog: false });
+            this.handleOk(true);
+        }
+
+
         render() {
             let props = this.props;
             let classes = this.props.classes;
@@ -569,7 +576,11 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
                     </DialogActions>
                     {this.state.showHelpDialog && (
                         <DialogEx open={this.state.showHelpDialog} tag="wifiHelp"
-                            style={{ userSelect: "none" }}>
+                            style={{ userSelect: "none" }}
+                            onEnterKey={()=>{ 
+                                this.setState({ showHelpDialog: false });
+                            }}
+                        >
                             <DialogContent>
                                 <Typography className={classes.pgraph} variant="h6" color="textPrimary">
                                     PiPedal Auto-Hotspot
@@ -633,6 +644,7 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
                     )}
                     {this.state.showWifiWarningDialog && (
                         <DialogEx open={this.state.showWifiWarningDialog} tag="wifiConfirm"
+                            onEnterKey={()=>{ this.handleWarningDialogOk();}}
                             style={{ userSelect: "none" }}>
                             <DialogContent>
                                 <Typography className={classes.pgraph} variant="body2" color="textPrimary">
@@ -654,8 +666,7 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
                                     Cancel
                                 </Button>
                                 <Button onClick={() => {
-                                    this.setState({ showWifiWarningDialog: false });
-                                    this.handleOk(true);
+                                    this.handleWarningDialogOk();
                                 }} variant="dialogPrimary" style={{ width: 120 }} >
                                     PROCEED
                                 </Button>
diff --git a/react/src/WifiDirectConfigDialog.tsx b/react/src/WifiDirectConfigDialog.tsx
index 268f88e..679a2ab 100644
--- a/react/src/WifiDirectConfigDialog.tsx
+++ b/react/src/WifiDirectConfigDialog.tsx
@@ -307,7 +307,7 @@ const WifiDirectConfigDialog = withStyles(styles, { withTheme: true })(
 
             return (
                 <DialogEx tag="p2pConfig" open={open} onClose={handleClose} style={{ userSelect: "none", }}
-                    fullScreen={this.state.fullScreen} fullWidth={this.useLandscapeLayout()}
+                    fullScreen={this.state.fullScreen} fullWidth={this.useLandscapeLayout()} onEnterKey={()=>{}}
                 >
                     {this.state.landscapeLayout && (
                         <DialogContent >
diff --git a/react/src/ZoomedUiControl.tsx b/react/src/ZoomedUiControl.tsx
index 57522f9..06d71b7 100644
--- a/react/src/ZoomedUiControl.tsx
+++ b/react/src/ZoomedUiControl.tsx
@@ -222,6 +222,7 @@ const ZoomedUiControl = withStyles(styles, { withTheme: true })(
                 <DialogEx tag="zoomedControl" open={this.props.dialogOpen}
                     onClose={() => { this.props.onDialogClose() }}
                     onAbort={() => { this.props.onDialogClose() }}
+                    onEnterKey={()=>{/*nothing*/}}
                 >
                     <div  style={{
                         width: 380, height: 300,
diff --git a/todo.txt b/todo.txt
index e242bfd..3d2380a 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,3 +1,7 @@
+Splittype changes. 
+- disable splittype control when editing snapshot.
+- identical structure requires no changes in split type.
+
 
 Review current handleNotifyPatchProperty. I tink server-side support needs to be
 removed, and rely on handleNotifyPathPatchPropertyChanged instead.