CTL-214: initial checkin

src/qqq/components/forms/DynamicFormField.tsx

@@ -23,8 +23,9 @@ import {InputAdornment, InputLabel} from "@mui/material";
 import Box from "@mui/material/Box";
 import Switch from "@mui/material/Switch";
 import {ErrorMessage, Field, useFormikContext} from "formik";
-import React, {useState} from "react";
+import React, {useContext, useState} from "react";
 import AceEditor from "react-ace";
+import QContext from "QContext";
 import BooleanFieldSwitch from "qqq/components/forms/BooleanFieldSwitch";
 import MDInput from "qqq/components/legacy/MDInput";
 import MDTypography from "qqq/components/legacy/MDTypography";
@@ -52,6 +53,7 @@ function QDynamicFormField({
 {
    const [switchChecked, setSwitchChecked] = useState(false);
    const [isDisabled, setIsDisabled] = useState(!isEditable || bulkEditMode);
+   const {setAllowShortcuts} = useContext(QContext);
 
    const {setFieldValue} = useFormikContext();
 
@@ -125,6 +127,14 @@ function QDynamicFormField({
       field = (
          <>
             <Field {...rest} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="standard" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled}
+               onBlur={(e: any) =>
+               {
+                  setAllowShortcuts(true);
+               }}
+               onFocus={(e: any) =>
+               {
+                  setAllowShortcuts(false);
+               }}
                onKeyPress={(e: any) =>
                {
                   if (e.key === "Enter")

src/qqq/components/horseshoe/NavBar.tsx

@@ -30,8 +30,9 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import Menu from "@mui/material/Menu";
 import TextField from "@mui/material/TextField";
 import Toolbar from "@mui/material/Toolbar";
-import React, {useEffect, useState} from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
+import QContext from "QContext";
 import QBreadcrumbs, {routeToLabel} from "qqq/components/horseshoe/Breadcrumbs";
 import {navbar, navbarContainer, navbarIconButton, navbarRow,} from "qqq/components/horseshoe/Styles";
 import {setTransparentNavbar, useMaterialUIController,} from "qqq/context";
@@ -62,6 +63,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const [autocompleteValue, setAutocompleteValue] = useState<any>(null);
    const route = useLocation().pathname.split("/").slice(1);
    const navigate = useNavigate();
+   const {setAllowShortcuts} = useContext(QContext);
 
    useEffect(() =>
    {
@@ -93,7 +95,6 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       buildHistoryEntries();
 
       const history = HistoryUtils.get();
-      setHistory([ {label: "The Godfather", id: 1}, {label: "Pulp Fiction", id: 2}]);
       const options = [] as any;
       history.entries.reverse().forEach((entry, index) =>
          options.push({label: `${entry.label} index`, id: index, key: index, path: entry.path, iconName: entry.iconName})
@@ -119,6 +120,17 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       setHistory(options);
    }
 
+   function handleHistoryOnOpen()
+   {
+      setAllowShortcuts(false);
+      buildHistoryEntries();
+   }
+
+   function handleHistoryOnClose()
+   {
+      setAllowShortcuts(true);
+   }
+
    const handleOpenMenu = (event: any) => setOpenMenu(event.currentTarget);
    const handleCloseMenu = () => setOpenMenu(false);
 
@@ -152,7 +164,8 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
             autoHighlight
             blurOnSelect
             style={{width: "200px"}}
-            onOpen={buildHistoryEntries}
+            onOpen={handleHistoryOnOpen}
+            onClose={handleHistoryOnClose}
             onChange={handleAutocompleteOnChange}
             PopperComponent={CustomPopper}
             isOptionEqualToValue={(option, value) => option.id === value.id}