@eccenca/gui-elements 23.2.0 → 23.3.0-rc.1

package/src/components/Dialog/Modal.tsx

@@ -1,82 +1,139 @@
-import React from 'react';
+import React from "react";
 import {
     Classes as BlueprintClassNames,
-    OverlayProps, Overlay as BlueprintOverlay,
-    IOverlayState,
+    IOverlayState as BlueprintOverlayState,
+    Overlay as BlueprintOverlay,
+    OverlayProps as BlueprintOverlayProps,
 } from "@blueprintjs/core";
-import {Card} from "./../Card";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 
-export interface ModalProps extends OverlayProps, IOverlayState {
-  children: React.ReactNode | React.ReactNode[];
-  /**
-   * A space-delimited list of class names to pass along to the BlueprintJS `Overlay` element that is used to create the modal.
-   */
-  overlayClassName?: string;
-  /**
-   * Size of the modal.
-   */
-  size?: "tiny" | "small" | "regular" | "large" | "fullscreen";
-  /**
-   * Prevents that a backdrop area is displayed behind the modal elements.
-   */
-  preventBackdrop?: boolean;
-    /** Optional props for the wrapper div element inside the modal overlay. */
-  wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+import { Utilities } from "../../common";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { Card } from "./../Card";
+
+export interface ModalProps extends BlueprintOverlayProps, BlueprintOverlayState {
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * A space-delimited list of class names to pass along to the BlueprintJS `Overlay` element that is used to create the modal.
+     */
+    overlayClassName?: string;
+    /**
+     * Size of the modal.
+     */
+    size?: "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
+    /**
+     * Prevents that a backdrop area is displayed behind the modal elements.
+     */
+    preventBackdrop?: boolean;
+    /**
+     * Optional props for the wrapper div element inside the modal overlay.
+     */
+    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Make the modal focusable, e.g. when clicking somewhere on it.
+     * This is needed, e.g. when capturing key (down, up) events that should bubble to the modal's parent elements.
+     */
+    modalFocusable?: boolean;
+    /**
+     * Works only for modals inside portals (`usePortal={true}`).
+     * When set to `true` then the `z-index` of the modal's portal element is recalculated, so that the modal is always shown on top of all other visible elements.
+     * Use this with care!
+     * Usually the normal opening sequence is enough to show the currently most important modal on top.
+     * If this option is used inflationary then this could harm the visibility of other overlays.
+     */
+    forceTopPosition?: boolean;
 }
 
 /**
  * Displays contents on top of other elements, used to create dialogs.
- * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficent.
+ * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficient.
  * Otherwise this element can be used to create own modal elements and edge cases for modal dialogs.
  * Then it is recommended to use the `Card` element inside.
  */
 export const Modal = ({
     children,
-    className='',
-    overlayClassName='',
-    size="regular",
-    canOutsideClickClose=false,
-    canEscapeKeyClose=false,
-    preventBackdrop=false,
+    className = "",
+    overlayClassName = "",
+    size = "regular",
+    canOutsideClickClose = false,
+    canEscapeKeyClose = false,
+    preventBackdrop = false,
     wrapperDivProps,
+    modalFocusable = true,
+    usePortal = true,
+    forceTopPosition = false,
+    onOpening,
     ...otherProps
 }: ModalProps) => {
+    const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
+        !canOutsideClickClose && canEscapeKeyClose
+            ? {
+                  ...otherProps.backdropProps,
+                  // Escape key won't work anymore otherwise after clicking on the backdrop
+                  tabIndex: 0,
+              }
+            : otherProps.backdropProps;
+
+    const focusableProps = modalFocusable
+        ? {
+              tabIndex: 0,
+          }
+        : undefined;
 
     const alteredChildren = React.Children.map(children, (child) => {
-        if ((child as React.ReactElement).type && (child  as React.ReactElement).type === Card) {
-            return React.cloneElement(
-                child as React.ReactElement,
-                {
-                    isOnlyLayout: true,
-                    elevation: 4
-                }
-            );
+        if ((child as React.ReactElement).type && (child as React.ReactElement).type === Card) {
+            return React.cloneElement(child as React.ReactElement, {
+                isOnlyLayout: true,
+                elevation: 4,
+            });
         }
 
         return child;
     });
 
+    const handlerOnOpening = (modalElement: HTMLElement) => {
+        if (onOpening) {
+            // call the original event handler
+            onOpening(modalElement);
+        }
+        if (usePortal && forceTopPosition) {
+            const parentalPortal = modalElement.closest(`.${BlueprintClassNames.PORTAL}`) as HTMLElement;
+            const highestTopIndex = (Utilities.getGlobalVar("highestModalTopIndex") as unknown as number) ?? 0;
+            if (parentalPortal) {
+                const portalTopIndex = parseInt(getComputedStyle(parentalPortal).zIndex ?? 0, 10);
+                const newTopIndex = Math.max(portalTopIndex, highestTopIndex) + 1;
+                parentalPortal.style.zIndex = `${newTopIndex}`;
+                Utilities.setGlobalVar("highestModalTopIndex", newTopIndex);
+            }
+        }
+    };
+
     return (
         <BlueprintOverlay
             {...otherProps}
+            backdropProps={backdropProps}
             className={overlayClassName}
             backdropClassName={`${eccgui}-dialog__backdrop`}
             canOutsideClickClose={canOutsideClickClose}
             canEscapeKeyClose={canEscapeKeyClose}
             hasBackdrop={!preventBackdrop}
+            usePortal={usePortal}
+            onOpening={handlerOnOpening}
+            portalClassName={`${eccgui}-dialog__portal`}
         >
             <div
                 {...wrapperDivProps}
                 className={BlueprintClassNames.DIALOG_CONTAINER}
                 // this is a workaround because data attribute on SimpleDialog is not correctly routed to the overlay by blueprint js
                 data-test-id={(otherProps as any)["data-test-id"] ?? "simpleDialogWidget"}
+                {...focusableProps}
+                tabIndex={0}
             >
                 <section
                     className={
                         `${eccgui}-dialog__wrapper` +
-                        (typeof size === 'string' ? ` ${eccgui}-dialog__wrapper--` + size : '') +
-                        (className ? ' ' + className : '')
+                        (typeof size === "string" ? ` ${eccgui}-dialog__wrapper--` + size : "") +
+                        (className ? " " + className : "")
                     }
                 >
                     {alteredChildren}
@@ -84,6 +141,6 @@ export const Modal = ({
             </div>
         </BlueprintOverlay>
     );
-}
+};
 
 export default Modal;

package/src/components/Dialog/SimpleDialog.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {BaseSyntheticEvent} from "react";
 
 import { IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -71,10 +71,15 @@ export const SimpleDialog = ({
     const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
     const showToggler = startInFullScreenMode || showFullScreenToggler;
     const intentClassName = intent ? `${eccgui}-intent--${intent}` : "";
+    const wrapperDivProps = {
+        ...modalPreventEvents,
+        ...otherProps.wrapperDivProps,
+    };
     return (
         <Modal
             enforceFocus={enforceFocus}
             {...otherProps}
+            wrapperDivProps={wrapperDivProps}
             // set default test id if not given
             data-test-id={otherProps["data-test-id"] ?? "simpleDialogWidget"}
             canOutsideClickClose={canOutsideClickClose || !preventSimpleClosing}
@@ -116,4 +121,17 @@ export const SimpleDialog = ({
     );
 };
 
+/** Events that should be prevented to bubble up from a modal that goes beyond the most simple version of a modal, e.g.
+ * allows to drag or supports hot keys etc. */
+export const modalPreventEvents = {
+    // Prevent certain events from leaving the modal, so that e.g. react-flow does not receive these events doing unexpected stuff
+    onContextMenu: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onDrag: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onDragStart: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onDragEnd: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onMouseUp: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    onClick: (event: BaseSyntheticEvent) => event.stopPropagation()
+};
+
 export default SimpleDialog;

package/src/components/Dialog/dialog.scss

@@ -2,31 +2,37 @@
 
 // our vars
 $eccgui-size-modal-tiny-width: math.div(4, 16) * 100vw !default;
-$eccgui-size-modal-tiny-height:  math.div(1, 9) * 100vh !default;
-$eccgui-size-modal-small-width:  math.div(6, 16) * 100vw !default;
-$eccgui-size-modal-small-height:  math.div(2, 9) * 100vh !default;
-$eccgui-size-modal-regular-width:  math.div(6, 16) * 100vw !default;
-$eccgui-size-modal-regular-height:  math.div(3, 9) * 100vh !default;
-$eccgui-size-modal-large-width:  math.div(8, 16) * 100vw !default;
-$eccgui-size-modal-large-height:  math.div(6, 9) * 100vh !default;
+$eccgui-size-modal-tiny-height: math.div(1, 9) * 100vh !default;
+$eccgui-size-modal-small-width: math.div(5, 16) * 100vw !default;
+$eccgui-size-modal-small-height: math.div(2, 9) * 100vh !default;
+$eccgui-size-modal-regular-width: math.div(6, 16) * 100vw !default;
+$eccgui-size-modal-regular-height: math.div(3, 9) * 100vh !default;
+$eccgui-size-modal-large-width: math.div(9, 16) * 100vw !default;
+$eccgui-size-modal-large-height: math.div(6, 9) * 100vh !default;
+$eccgui-size-modal-xlarge-width: math.div(12, 16) * 100vw !default;
+$eccgui-size-modal-xlarge-height: math.div(7, 9) * 100vh !default;
 $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0.69) !default;
 
 @import "~@blueprintjs/core/src/components/dialog/dialog";
 
+.#{$eccgui}-dialog__portal {
+    z-index: 8001; // higher than carbon ui shell header
+}
+
 .#{$eccgui}-dialog__backdrop {
     background-color: $eccgui-color-modal-backdrop;
 }
 
 .#{$eccgui}-dialog__wrapper {
-    margin: 2rem;
+    display: flex;
+    align-content: stretch;
+    align-items: stretch;
+    justify-content: center;
     max-width: calc(100vw - 4rem);
     max-height: calc(100vh - 4rem);
+    margin: 2rem;
     pointer-events: all;
     user-select: text;
-    display: flex;
-    justify-content: center;
-    align-items: stretch;
-    align-content: stretch;
 
     & > * {
         flex-grow: 1;
@@ -34,9 +40,14 @@ $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0
         max-width: 100%;
     }
 
-    & * {
+    * {
         pointer-events: all;
     }
+
+    .#{$prefix}--popover {
+        // workaround to fix the arrows in pagination when used in modal
+        pointer-events: none;
+    }
 }
 
 .#{$eccgui}-dialog__wrapper--tiny {
@@ -59,14 +70,19 @@ $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0
     min-height: $eccgui-size-modal-large-height;
 }
 
+.#{$eccgui}-dialog__wrapper--xlarge {
+    width: $eccgui-size-modal-xlarge-width;
+    min-height: $eccgui-size-modal-xlarge-height;
+}
+
 .#{$eccgui}-dialog__wrapper--fullscreen {
-    margin: 0;
-    padding: $eccgui-size-block-whitespace;
     box-sizing: border-box;
-    height: 100vh;
     width: 100vw;
-    max-height: 100vh;
     max-width: 100vw;
+    height: 100vh;
+    max-height: 100vh;
+    padding: $eccgui-size-block-whitespace;
+    margin: 0;
 }
 
 .#{$eccgui}-dialog__notifications {

package/src/components/Icon/IconButton.tsx

@@ -48,7 +48,7 @@ export const IconButton = ({
 }: IconButtonProps) => {
     const defaultIconTooltipProps = {
         hoverOpenDelay: 1000,
-        openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? "0") < 0 ? false : undefined,
+        openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? 0) < 0 ? false : undefined,
     };
     const iconProps = {
         small: restProps.small,

package/src/components/Icon/canonicalIconNames.tsx

@@ -13,6 +13,7 @@ export type ValidIconName =
     | "application-useraccount"
     | "application-vocabularies"
     | "application-warning"
+    | "application-hotkeys"
     | "artefact-commit"
     | "artefact-customtask"
     | "artefact-dataset"
@@ -162,6 +163,7 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "application-useraccount": icons.UserAvatar,
     "application-vocabularies": icons.Catalog,
     "application-warning": icons.WarningAlt,
+    "application-hotkeys": icons.Keyboard,
 
     "artefact-commit": icons.Commit,
     "artefact-customtask": icons.Script,

package/src/components/OverviewItem/OverviewItemDepiction.tsx

@@ -11,7 +11,7 @@ export interface OverviewItemDepictionProps extends React.HTMLAttributes<HTMLDiv
 
 export const OverviewItemDepiction = ({
     children,
-    className = '',
+    className = "",
     keepColors = false,
     ...restProps
 }: OverviewItemDepictionProps) => {
@@ -20,19 +20,11 @@ export const OverviewItemDepiction = ({
         border: false,
         backgroundColor: keepColors ? undefined : "dark",
         ratio: "1:1" as "1:1",
-        padding: "medium" as "medium"
-    }
+        padding: "medium" as "medium",
+    };
     // only return Depiction element if it is wrapped inside OverviewItemDepiction
-    if (
-        typeof children === "object" &&
-        !!children &&
-        "type" in children &&
-        children.type === Depiction
-    ) {
-        return React.cloneElement(
-            children,
-            defaultDepictionDisplay
-        );
+    if (typeof children === "object" && !!children && "type" in children && children.type === Depiction) {
+        return React.cloneElement(children, defaultDepictionDisplay);
     }
     // use Depiction element for basic icons
     if (
@@ -41,7 +33,7 @@ export const OverviewItemDepiction = ({
         "type" in children &&
         (children.type === Icon || children.type === TestIcon)
     ) {
-        return <Depiction image={children} {...defaultDepictionDisplay} />
+        return <Depiction image={children as JSX.Element} {...defaultDepictionDisplay} />;
     }
     return (
         <div
@@ -54,7 +46,7 @@ export const OverviewItemDepiction = ({
         >
             {children}
         </div>
-    )
-}
+    );
+};
 
 export default OverviewItemDepiction;

package/src/components/PropertyValuePair/PropertyName.tsx

@@ -1,16 +1,21 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Label from "../Label/Label";
+import Label, { LabelProps } from "../Label/Label";
 
 export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Increase or decrease the width used for the property name.
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Additional label properties, e.g. `tooltip`.
+     * It is only used if the `PropertyName` has simple text input.
+     */
+    labelProps?: LabelProps;
 }
 
-export const PropertyName = ({ className = "", size, children, ...otherProps }: PropertyNameProps) => {
+export const PropertyName = ({ className = "", size, children, labelProps, ...otherDtProps }: PropertyNameProps) => {
     return (
         <dt
             className={
@@ -18,9 +23,15 @@ export const PropertyName = ({ className = "", size, children, ...otherProps }:
                 (size ? ` ${eccgui}-propertyvalue__property--${size}` : "") +
                 (className ? " " + className : "")
             }
-            {...otherProps}
+            {...otherDtProps}
         >
-            <div>{typeof children === "string" ? <Label text={children} isLayoutForElement="span" /> : children}</div>
+            <div>
+                {typeof children === "string" ? (
+                    <Label text={children} isLayoutForElement="span" {...labelProps} />
+                ) : (
+                    children
+                )}
+            </div>
         </dt>
     );
 };

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -6,6 +6,7 @@
 
 .#{$eccgui}-propertyvalue__pair {
     display: block;
+    max-width: 100%;
     clear: both;
 
     &.#{$eccgui}-propertyvalue__pair--hasdivider {

package/src/components/Separation/Spacing.tsx

@@ -1,38 +1,42 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface SpacingProps {
+export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Set the amount of white space that separates two elements.
      */
-    size?: "tiny" | "small" | "medium" | "large" | "xlarge"
+    size?: "tiny" | "small" | "medium" | "large" | "xlarge";
     /**
      * If set then is a ruler displayed in the middle of the spacing area.
      * The direction of the ruler is used from the spacing.
      */
-    hasDivider?: boolean
+    hasDivider?: boolean;
     /**
      * If set then the spacing separates two elements on the horizontal axis.
      * The spacing area then is created on a vertical axis.
      */
-    vertical?: boolean
+    vertical?: boolean;
 }
 
 /**
  * Adds horizontal or vertical space between neighbouring elements.
  * It also can add a visual ruler inside.
  */
-export const Spacing = ({ size = "medium", hasDivider = false, vertical = false }: SpacingProps) => {
+export const Spacing = ({ size = "medium", hasDivider = false, vertical = false, ...otherDivProps }: SpacingProps) => {
     const direction = vertical ? "vertical" : "horizontal";
     return (
         <div
             className={
-                `${eccgui}-separation__spacing-` + direction +
-                ` ${eccgui}-separation__spacing--` + size +
+                `${eccgui}-separation__spacing-` +
+                direction +
+                ` ${eccgui}-separation__spacing--` +
+                size +
                 (hasDivider ? ` ${eccgui}-separation__spacing--hasdivider` : "")
             }
+            {...otherDivProps}
         />
     );
-}
+};
 
 export default Spacing;

package/src/components/Table/TableExpandHeader.tsx

@@ -3,49 +3,52 @@ import {
     TableExpandHeader as CarbonTableExpandHeader,
     TableExpandHeaderProps as CarbonTableExpandHeaderProps,
 } from "carbon-components-react";
-import IconButton from "./../Icon/IconButton";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestIconProps } from "../Icon";
+import { ValidIconName } from "../Icon/canonicalIconNames";
+
+import IconButton from "./../Icon/IconButton";
 
-export interface TableExpandHeaderProps extends Omit<
-    CarbonTableExpandHeaderProps,
-    "children" | "ariaLabel" | "enableExpando" | "expandIconDescription"
->, React.ThHTMLAttributes<HTMLTableCellElement> {
+export interface TableExpandHeaderProps
+    extends Omit<CarbonTableExpandHeaderProps, "children" | "ariaLabel" | "enableExpando" | "expandIconDescription">,
+        React.ThHTMLAttributes<HTMLTableCellElement> {
     /**
      * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.
      */
     togglerText: string;
-};
+
+    /** An optional icon that is shown as toggle icon. */
+    toggleIcon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
+}
 
 /**
  * Adds a button to the table header that can trigger a function to expand/collapse all rows of the table.
  */
-export function TableExpandHeader ({
+export function TableExpandHeader({
     togglerText,
     isExpanded,
     onExpand,
     className,
     enableToggle,
+    toggleIcon,
     ...otherCarbonTableExpandHeaderProps
 }: TableExpandHeaderProps) {
-
-    const toggleButton = isExpanded ?
-        React.cloneElement(<IconButton name="toggler-rowcollapse" text={togglerText} />, {onClick: onExpand}) :
-        React.cloneElement(<IconButton name="toggler-rowexpand" text={togglerText} />, {onClick: onExpand});
-
+    const defaultToggleIcon = isExpanded ? "toggler-rowcollapse" : "toggler-rowexpand";
+    const toggleButton = React.cloneElement(<IconButton name={toggleIcon ?? defaultToggleIcon} text={togglerText} />, {
+        onClick: onExpand,
+    });
     return (
         <CarbonTableExpandHeader
-            className={
-                `${eccgui}-simpletable__headexpander` +
-                (!!className ? ` ${className}` : "")
-            }
+            className={`${eccgui}-simpletable__headexpander` + (className ? ` ${className}` : "")}
             isExpanded={isExpanded}
             onExpand={onExpand}
             enableToggle={false}
             {...otherCarbonTableExpandHeaderProps}
         >
-            { enableToggle && toggleButton }
+            {enableToggle && toggleButton}
         </CarbonTableExpandHeader>
-    )
+    );
 }
 
 export default TableExpandHeader;

package/src/components/TextField/TextField.tsx

@@ -1,15 +1,15 @@
-import React from "react";
+import React, {KeyboardEventHandler, RefObject} from "react";
 import {
-    InputGroup as BlueprintInputGroup,
     Classes as BlueprintClassNames,
-    Intent as BlueprintIntent,
-    MaybeElement,
     HTMLInputProps,
+    InputGroup as BlueprintInputGroup,
     InputGroupProps2,
+    Intent as BlueprintIntent,
+    MaybeElement,
 } from "@blueprintjs/core";
-import { IntentTypes, Definitions as IntentDefinitions } from "../../common/Intent";
+import {Definitions as IntentDefinitions, IntentTypes} from "../../common/Intent";
 import Icon from "../Icon/Icon";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import {ValidIconName} from "../Icon/canonicalIconNames";
 import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
 
@@ -50,6 +50,9 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps2, "intent"
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
     invisibleCharacterWarning?: InvisibleCharacterWarningProps
+
+    /** If true pressing the Escape key will blur/de-focus the input field. Default: false */
+    escapeToBlur?: boolean
 }
 
 /**
@@ -64,8 +67,10 @@ export const TextField = ({
   fullWidth = true,
   leftIcon,
   invisibleCharacterWarning,
+  escapeToBlur = false,
   ...otherProps
 }: TextFieldProps) => {
+    const inputRef = React.useRef<HTMLInputElement | null>(null)
   let deprecatedIntent;
   switch (true) {
     case hasStatePrimary:
@@ -84,6 +89,25 @@ export const TextField = ({
       break;
   }
 
+    const handleLabelEscape = React.useCallback(() => {
+        inputRef.current?.blur()
+        if(otherProps.inputRef) {
+            const otherInputRef = otherProps.inputRef as RefObject<HTMLInputElement>
+            if(otherInputRef.current) {
+                otherInputRef.current.blur()
+            }
+        }
+    }, [])
+
+    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = React.useCallback((event) => {
+        if(escapeToBlur && event.key === "Escape") {
+            event.preventDefault()
+            handleLabelEscape()
+            return false
+        }
+        return otherProps.onKeyDown?.(event)
+    }, [otherProps.onKeyDown, escapeToBlur])
+
   const {
       intent = deprecatedIntent,
       ...otherBlueprintInputGroupProps
@@ -110,6 +134,7 @@ export const TextField = ({
 
   return (
     <BlueprintInputGroup
+        inputRef={inputRef}
       className={
           `${eccgui}-textfield` +
           (intent ? ` ${eccgui}-intent--${intent}` : "") +
@@ -133,6 +158,7 @@ export const TextField = ({
       }
       dir={"auto"}
       onChange={maybeWrappedOnChange}
+        onKeyDown={otherProps.onKeyDown || escapeToBlur ? onKeyDown : undefined}
     />
   );
 }