submit action - run with enter

packages/web/src/modals/ChangeDownloadUrlModal.js

@@ -12,10 +12,19 @@ export default function ChangeDownloadUrlModal({ modalState, url = '', onConfirm
   // React.useEffect(() => {
   //   if (textFieldRef.current) textFieldRef.current.focus();
   // }, [textFieldRef.current]);
-  const handleSubmit = async (values) => {
+
+  // const handleSubmit = () => async (values) => {
+  //   onConfirm(values.url);
+  //   modalState.close();
+  // };
+
+  const handleSubmit = React.useCallback(
+    async (values) => {
       onConfirm(values.url);
       modalState.close();
-  };
+    },
+    [modalState, onConfirm]
+  );
   return (
     <ModalBase modalState={modalState}>
       <ModalHeader modalState={modalState}>Download imported file from web</ModalHeader>

packages/web/src/modals/ConfirmModal.js

@@ -3,14 +3,17 @@ import ModalBase from './ModalBase';
 import FormStyledButton from '../widgets/FormStyledButton';
 import ModalFooter from './ModalFooter';
 import ModalContent from './ModalContent';
+import { FormSubmit } from '../utility/forms';
+import { FormProvider } from '../utility/FormProvider';
 
 export default function ConfirmModal({ message, modalState, onConfirm }) {
   return (
+    <FormProvider>
       <ModalBase modalState={modalState}>
         <ModalContent>{message}</ModalContent>
 
         <ModalFooter>
-        <FormStyledButton
+          <FormSubmit
             value="OK"
             onClick={() => {
               modalState.close();
@@ -20,5 +23,6 @@ export default function ConfirmModal({ message, modalState, onConfirm }) {
           <FormStyledButton type="button" value="Close" onClick={modalState.close} />
         </ModalFooter>
       </ModalBase>
+    </FormProvider>
   );
 }

packages/web/src/modals/ModalBase.js

@@ -70,6 +70,7 @@ export default function ModalBase({ modalState, children, isFlex = false, fullSc
       overlayClassName="RactModalOverlay"
       fullScreen={fullScreen}
       isFlex={isFlex}
+      ariaHideApp={false}
       // style={{
       //   overlay: {
       //     backgroundColor: '#000',

packages/web/src/utility/FormProvider.js

@@ -1,9 +1,26 @@
 import React from 'react';
+import keycodes from './keycodes';
 
 const FormContext = React.createContext(null);
 
-export function FormProvider({ children, initialValues }) {
+export function FormProvider({ children, initialValues = {} }) {
   const [values, setValues] = React.useState(initialValues);
+  const [submitAction, setSubmitAction] = React.useState(null);
+  const handleEnter = React.useCallback(
+    (e) => {
+      if (e.keyCode == keycodes.enter && submitAction && submitAction.action) {
+        e.preventDefault();
+        submitAction.action(values);
+      }
+    },
+    [submitAction, values]
+  );
+  React.useEffect(() => {
+    document.addEventListener('keyup', handleEnter);
+    return () => {
+      document.removeEventListener('keyup', handleEnter);
+    };
+  }, [handleEnter]);
   const setFieldValue = React.useCallback(
     (field, value) =>
       setValues((v) => ({
@@ -16,6 +33,7 @@ export function FormProvider({ children, initialValues }) {
     values,
     setValues,
     setFieldValue,
+    setSubmitAction,
   };
   return <FormContext.Provider value={provider}>{children}</FormContext.Provider>;
 }

packages/web/src/utility/forms.js

@@ -106,7 +106,10 @@ export function FormSelectField({ label, name, children = null, ...other }) {
 }
 
 export function FormSubmit({ onClick, value, ...other }) {
-  const { values } = useForm();
+  const { values, setSubmitAction } = useForm();
+  React.useEffect(() => {
+    setSubmitAction({ action: onClick });
+  }, [onClick]);
   return <FormStyledButton type="submit" value={value} onClick={() => onClick(values)} {...other} />;
 }
 

packages/web/src/widgets/DatabaseWidget.js

@@ -73,7 +73,9 @@ function ConnectionList() {
 
       <WidgetsInnerContainer>
         <AppObjectList
-          list={connectionsWithStatus}
+          list={_.sortBy(connectionsWithStatus, ({ displayName, server }) =>
+            (displayName || server || '').toUpperCase()
+          )}
           AppObjectComponent={ConnectionAppObject}
           // makeAppObj={connectionAppObject({ boldCurrentDatabase: true })}
           SubItems={SubDatabaseList}