@eccenca/gui-elements 23.0.0-rc.5 → 23.0.0-rc.7

package/src/components/Accordion/AccordionItem.tsx

@@ -1,45 +1,35 @@
 import React from "react";
-import {AccordionItem as CarbonAccordionItem} from "carbon-components-react";
+import {
+    AccordionItem as CarbonAccordionItem,
+    AccordionItemProps as CarbonAccordionItemProps,
+} from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface AccordionItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
-    /*
-        additional user class name
-    */
+export interface AccordionItemProps extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando"> {
+    /**
+     * additional user class name
+     */
     className?: string;
-    /*
-        content of accordion item
-    */
-    children: string | JSX.Element | JSX.Element[];
-    /*
-        disable accordion item
-    */
-    disabled?: boolean;
-    /*
-        set accordion item expliciteky as open when displayed first
-    */
-    open?: boolean;
-    /*
-        header of accordion item
-    */
+    /**
+     * header of accordion item
+     */
     label: string | JSX.Element;
-    /*
-        use full available width for content
-    */
+    /**
+     * use full available width for content
+     */
     fullWidth?: boolean;
-    /*
-        minimize white space and paddings
-    */
+    /**
+     * minimize white space and paddings
+     */
     condensed?: boolean;
-    /*
-        do not use borders as visible separations on accordion item
-    */
+    /**
+     * do not use borders as visible separations on accordion item
+     */
     noBorder?: boolean;
-    /*
-        highlight accordion item by different background color
-    */
+    /**
+     * highlight accordion item by different background color
+     */
     elevated?: boolean;
-    title?: never;
 };
 
 function AccordionItem({

package/src/components/Accordion/Stories/Accordion.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Accordion, AccordionItem } from "../../../../index";
+import { Default as AccordionStoryItem } from '../Stories/AccordionItem.stories'
+
+export default {
+    title: "Components/Accordion",
+    component: Accordion,
+    subcomponents: { AccordionItem },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements to include into the Accordion component"
+        },
+    }
+
+} as ComponentMeta<typeof Accordion>;
+
+const TemplateIcons: ComponentStory<typeof Accordion> = (args) => (
+    <Accordion {...args} />
+);
+export const Default = TemplateIcons.bind({});
+Default.args = {
+    children : [
+        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 1" />,
+        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 2 (elevated)" elevated />,
+        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 3 (initially opened)" open />,
+        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 4 (disabled)" disabled />,
+        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 5" />,
+    ],
+    align: "start",
+    size: "medium"
+};

package/src/components/Accordion/Stories/AccordionItem.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Accordion, AccordionItem, HtmlContentBlock } from "../../../../index";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+export default {
+    title: "Components/Accordion/AccordionItem",
+    component: AccordionItem,
+    argTypes: {
+        children: {
+            control: "none",
+            description: "content of accordion item"
+        },
+    }
+
+} as ComponentMeta<typeof AccordionItem>;
+
+const Template : ComponentStory<typeof AccordionItem> = (args) => (
+    <Accordion>
+        <AccordionItem {...args} />
+    </Accordion>
+);
+export const Default = Template.bind({});
+Default.args = {
+    label: "Title of accordion item",
+    children : <HtmlContentBlock><LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} /></HtmlContentBlock>
+};

package/src/components/Accordion/accordion.scss

@@ -1,3 +1,8 @@
+// own vars
+$eccgui-color-accordion-background-elevated: rgba($eccgui-color-accent, 0.1) !default;
+$eccgui-color-accordion-toggler-hover: $menu-item-color-hover !default;
+$eccgui-color-accordion-toggler-elevated-hover: mix($eccgui-color-accordion-background-elevated, $eccgui-color-accordion-toggler-hover, 50%) !default;
+
 // lib import
 @import "~carbon-components/scss/components/accordion/accordion";
 
@@ -57,8 +62,22 @@
     }
 }
 
+.#{$prefix}--accordion__heading {
+    &:hover::before,
+    &:focus::before {
+        background-color: $eccgui-color-accordion-toggler-hover;
+    }
+}
+
 .#{$eccgui}-accordion__item--elevated {
-    background-color: $data-table-zebra-color; //rgba($ui-03, alpha($ui-03) * $eccgui-opacity-muted);
+    background-color: $eccgui-color-accordion-background-elevated;
+
+    .#{$prefix}--accordion__heading {
+        &:hover::before,
+        &:focus::before {
+            background-color: $eccgui-color-accordion-toggler-elevated-hover;
+        }
+    }
 }
 
 .#{$eccgui}-accordion__item--noborder {

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useState} from "react";
-import CodeMirror from "codemirror";
+import CodeMirror, {Position} from "codemirror";
 import {FieldItem, IconButton, Spinner, Toolbar, ToolbarSection, ContextOverlay} from "./../../";
 import {Classes as BlueprintClassNames} from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -111,6 +111,13 @@ export interface IProps {
     validationRequestDelay?: number
 }
 
+// Meta data regarding a request
+interface RequestMetaData {
+    requestId: string | undefined
+}
+
+type HorizontalShiftCallbackFunction = (shift: number) => any
+
 /** Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
  * This is comparable to a one line code editor. */
 const AutoSuggestion = ({
@@ -132,20 +139,22 @@ const AutoSuggestion = ({
                             autoCompletionRequestDelay = 1000,
                             validationRequestDelay = 200
                         }: IProps) => {
-    const [value, setValue] = React.useState(initialValue);
-    const [cursorPosition, setCursorPosition] = React.useState(0);
-    const [horizontalShift, setHorizontalShift] = React.useState<number>(0);
+    const value = React.useRef<string>(initialValue)
+    const cursorPosition = React.useRef(0);
+    const horizontalShiftSubscriber = React.useRef<HorizontalShiftCallbackFunction | undefined>(undefined)
     const [shouldShowDropdown, setShouldShowDropdown] = React.useState(false);
     const [suggestions, setSuggestions] = React.useState<ISuggestionWithReplacementInfo[]>([]);
     const [suggestionsPending, setSuggestionsPending] = React.useState(false);
+    const suggestionRequestData = React.useRef<RequestMetaData>({requestId: undefined})
     const [pathValidationPending, setPathValidationPending] = React.useState(false)
+    const validationRequestData = React.useRef<RequestMetaData>({requestId: undefined})
     const [, setErrorMarkers] = React.useState<CodeMirror.TextMarker[]>([]);
     const [validationResponse, setValidationResponse] = useState<IValidationResult | undefined>(undefined)
     const [suggestionResponse, setSuggestionResponse] = useState<IPartialAutoCompleteResult | undefined>(undefined)
     // The element that should be used for replacement highlighting
     const [highlightedElement, setHighlightedElement] = useState<ISuggestionWithReplacementInfo | undefined>(undefined)
     const [editorInstance, setEditorInstance] = React.useState<CodeMirror.Editor>();
-    const [isFocused, setIsFocused] = React.useState(false);
+    const isFocused = React.useRef(false);
     /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
     const [editorState] = React.useState<{
         index: number,
@@ -155,7 +164,7 @@ const AutoSuggestion = ({
     }>({index: 0, suggestions: [], dropdownShown: false})
     /** This is for the AutoSuggestionList component in order to re-render. */
     const [focusedIndex, setFocusedIndex] = React.useState(0)
-    const [selectedTextRanges, setSelectedTextRanges] = useState<IRange[]>([])
+    const selectedTextRanges = React.useRef<IRange[]>([])
 
     const pathIsValid = validationResponse?.valid ?? true;
 
@@ -170,8 +179,10 @@ const AutoSuggestion = ({
     }, [editorInstance, editorState])
 
     React.useEffect(() => {
-        setValue(initialValue)
-    }, [initialValue])
+        if(initialValue != null) {
+            editorInstance?.setValue(initialValue)
+        }
+    }, [initialValue, editorInstance])
 
     React.useEffect(() => {
         editorState.dropdownShown = shouldShowDropdown
@@ -181,7 +192,7 @@ const AutoSuggestion = ({
     useEffect(() => {
         if (highlightedElement && editorInstance) {
             const { from, length } = highlightedElement;
-            if(length > 0 && selectedTextRanges.length === 0) {
+            if(length > 0 && selectedTextRanges.current.length === 0) {
                 const to = from + length;
                 const marker = editorInstance.markText(
                     {line: 0, ch: from},
@@ -216,7 +227,8 @@ const AutoSuggestion = ({
                 return []
             })
         }
-        onInputChecked && onInputChecked(!!validationResponse?.valid)
+        const isValid = validationResponse?.valid === undefined || validationResponse.valid
+        onInputChecked && onInputChecked(isValid)
     }, [validationResponse?.valid, validationResponse?.parseError, editorInstance, onInputChecked]);
 
     /** generate suggestions and also populate the replacement indexes dict */
@@ -245,9 +257,10 @@ const AutoSuggestion = ({
     }, [suggestionResponse, editorState]);
 
     const asyncCheckInput = useMemo(() => async (inputString: string) => {
-        if(!checkInput) {
+        if(!checkInput || inputString !== value.current || validationRequestData.current.requestId === inputString) {
             return
         }
+        validationRequestData.current.requestId = inputString
         setPathValidationPending(true)
         try {
             const result: IValidationResult | undefined = await checkInput(inputString)
@@ -266,10 +279,17 @@ const AutoSuggestion = ({
     )
 
     const asyncHandleEditorInputChange = useMemo(() => async (inputString: string, cursorPosition: number) => {
+        const requestId = `${inputString} ${cursorPosition}`
+        if(requestId === suggestionRequestData.current.requestId) {
+            return
+        }
+        suggestionRequestData.current.requestId = requestId
         setSuggestionsPending(true)
         try {
             const result: IPartialAutoCompleteResult | undefined = await fetchSuggestions(inputString, cursorPosition)
-            setSuggestionResponse(result)
+            if(value.current === inputString) {
+                setSuggestionResponse(result)
+            }
         } catch(e) {
             setSuggestionResponse(undefined)
             // TODO: Error handling
@@ -283,29 +303,24 @@ const AutoSuggestion = ({
         [asyncHandleEditorInputChange, autoCompletionRequestDelay]
     )
 
-    React.useEffect(() => {
-        if (isFocused) {
-            setShouldShowDropdown(true);
-            handleEditorInputChange(value, cursorPosition)
-            return handleEditorInputChange.cancel
-        }
-        return;
-    }, [cursorPosition, value, isFocused, handleEditorInputChange]);
-
-    // Trigger input validation
-    useEffect(() => {
-        checkValuePathValidity(value)
-        return checkValuePathValidity.cancel
-    }, [value, checkValuePathValidity])
-
     const handleChange = (val: string) => {
-        setValue(val);
+        value.current = val
+        checkValuePathValidity.cancel()
+        checkValuePathValidity(value.current)
         onChange(val)
     };
 
-    const handleCursorChange = (pos: any, coords: any, scrollinfo: any) => {
-        setCursorPosition(pos.ch);
-        setHorizontalShift(Math.min(coords.left, Math.max(coords.left - scrollinfo.left, 0)));
+    const handleCursorChange = (pos: Position, coords: any, scrollinfo: any) => {
+        cursorPosition.current = pos.ch;
+        // cursor change is fired after onChange, so we put the auto-complete logic here
+        if (isFocused.current) {
+            setShouldShowDropdown(true);
+            handleEditorInputChange.cancel()
+            handleEditorInputChange(value.current, cursorPosition.current)
+        }
+        horizontalShiftSubscriber.current && horizontalShiftSubscriber.current(
+            Math.min(coords.left, Math.max(coords.left - scrollinfo.left, 0))
+        )
     };
 
     const handleInputEditorKeyPress = (event: KeyboardEvent) => {
@@ -333,15 +348,26 @@ const AutoSuggestion = ({
     };
 
     const handleInputEditorClear = () => {
-        handleChange("");
-        setValue("")
+        editorInstance?.setValue("")
+        cursorPosition.current = 0
+        handleChange("")
         editorInstance?.focus();
     };
 
     const handleInputFocus = (focusState: boolean) => {
         onFocusChange && onFocusChange(focusState)
-        setIsFocused(focusState)
         focusState ? setShouldShowDropdown(true) : closeDropDown()
+        if(!isFocused.current && focusState) {
+            // Just got focus
+            // Clear suggestions and repeat suggestion request, something else might have changed while this component was not focused
+            setSuggestions([])
+            suggestionRequestData.current.requestId = undefined
+            isFocused.current = focusState
+            handleEditorInputChange.cancel()
+            handleEditorInputChange(value.current, cursorPosition.current)
+        } else {
+            isFocused.current = focusState
+        }
     };
 
     //keyboard handlers
@@ -390,7 +416,15 @@ const AutoSuggestion = ({
         setHighlightedElement(item)
     }, [])
 
-    const hasError = !!value && !pathIsValid && !pathValidationPending;
+    const onSelection = React.useMemo(() => (ranges: IRange[]) => {
+        selectedTextRanges.current = ranges
+    }, [])
+
+    const subscribeToHorizontalShift = React.useMemo(() => (callback: HorizontalShiftCallbackFunction) => {
+        horizontalShiftSubscriber.current = callback
+    }, [])
+
+    const hasError = !!value.current && !pathIsValid && !pathValidationPending;
     const autoSuggestionInput = (
         <div id={id} className={`${eccgui}-autosuggestion`}>
             <div className={`${eccgui}-autosuggestion__inputfield ${BlueprintClassNames.INPUT_GROUP} ${BlueprintClassNames.FILL} ${hasError ? BlueprintClassNames.INTENT_DANGER : ""}`}>
@@ -404,7 +438,7 @@ const AutoSuggestion = ({
                     content={(
                         <AutoSuggestionList
                             id={id+"__dropdown"}
-                            left={horizontalShift}
+                            registerForHorizontalShift={subscribeToHorizontalShift}
                             loading={suggestionsPending}
                             options={suggestions}
                             isOpen={!suggestionsPending && shouldShowDropdown}
@@ -419,16 +453,16 @@ const AutoSuggestion = ({
                         setEditorInstance={setEditorInstance}
                         onChange={handleChange}
                         onCursorChange={handleCursorChange}
-                        initialValue={value}
+                        initialValue={initialValue}
                         onFocusChange={handleInputFocus}
                         onKeyDown={handleInputEditorKeyPress}
                         enableTab={useTabForCompletions}
                         placeholder={placeholder}
-                        onSelection={setSelectedTextRanges}
+                        onSelection={onSelection}
                         showScrollBar={showScrollBar}
                     />
                 </ContextOverlay>
-                {!!value && (
+                {!!value.current && (
                     <span className={BlueprintClassNames.INPUT_ACTION}>
                         <IconButton
                             data-test-id={"value-path-clear-btn"}

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -24,13 +24,16 @@ export interface IDropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement
     isOpen: boolean;
     // If the drop down should show a loading state
     loading?: boolean;
-    left?: number;
+    // Register for changes in horizontal shift
+    registerForHorizontalShift?: (callback: HorizontalShiftCallbackFunction) => any
     // The item from the drop down that is active
     currentlyFocusedIndex: number;
     // Callback indicating what item should currently being highlighted, i.e. is either active or is hovered over
     itemToHighlight: (item: ISuggestionWithReplacementInfo | undefined) => any;
 }
 
+type HorizontalShiftCallbackFunction = (shift: number) => any
+
 const ListItem = ({ item }: any, ref: any) => {
     const listItem = (
         <OverviewItem densityHigh={true}>
@@ -76,7 +79,7 @@ export const AutoSuggestionList = ({
     options,
     loading,
     onItemSelectionChange,
-    left,
+    registerForHorizontalShift,
     currentlyFocusedIndex,
     itemToHighlight,
     style,
@@ -85,6 +88,7 @@ export const AutoSuggestionList = ({
     const [hoveredItem, setHoveredItem] = React.useState<
         ISuggestionWithReplacementInfo | undefined
     >(undefined);
+    const [left, setLeft] = React.useState(0)
     // Refs of list items
     const [refs] = React.useState<React.RefObject<Element>[]>([])
     const dropdownRef = React.useRef<HTMLDivElement>(null);
@@ -95,6 +99,15 @@ export const AutoSuggestionList = ({
         return refs[index];
     };
 
+    React.useEffect(() => {
+        if(registerForHorizontalShift) {
+            const callback = (shift: number) => {
+                setTimeout(() => setLeft(shift), 1)
+            }
+            registerForHorizontalShift(callback)
+        }
+    }, [registerForHorizontalShift])
+
     React.useEffect(() => {
         const listIndexNode = refs[currentlyFocusedIndex];
         if (dropdownRef?.current && listIndexNode?.current) {

package/src/components/AutoSuggestion/SingleLineCodeEditor.tsx

@@ -1,10 +1,10 @@
 import "codemirror/addon/display/placeholder.js"
 import "codemirror/mode/sparql/sparql.js";
 import React from "react";
-import { Controlled as ControlledEditor } from "react-codemirror2";
-import { Classes as BlueprintClassNames } from "@blueprintjs/core";
+import {UnControlled as UnControlledEditor} from "react-codemirror2";
+import {Classes as BlueprintClassNames} from "@blueprintjs/core";
 import {Editor as CodeMirrorEditor} from "codemirror";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 
 export interface IEditorProps {
   // Is called with the editor instance that allows access via the CodeMirror API
@@ -51,9 +51,9 @@ const SingleLineCodeEditor = ({
                               }: IEditorProps) => {
     return (
         <div className={`${eccgui}-singlelinecodeeditor ${BlueprintClassNames.INPUT}`}>
-            <ControlledEditor
-        editorDidMount={(editor) => {
-          editor.on("beforeChange", (_, change) => {
+            <UnControlledEditor
+        editorDidMount={(editor: any) => {
+          editor.on("beforeChange", (_: any, change: any) => {
             // Prevent the user from entering new-line characters, since this is supposed to be a one-line editor.
             const newText = change.text.join("").replace(/\n/g, "");
             //failing unexpectedly during undo and redo
@@ -89,10 +89,18 @@ const SingleLineCodeEditor = ({
               editor.getScrollInfo()
           );
         }}
-        onBeforeChange={(_editor, _data, value) => {
-          const trimmedValue = value.replace(/\n/g, "");
-          onChange(trimmedValue);
+        onBeforeChange={(_editor, _data, value, next) => {
+            // Remove entered new lines
+            const trimmedValue = value.replace(/[\r\n]/g, "");
+            if (trimmedValue !== value) {
+                _editor.setValue(trimmedValue)
+            }
+            next()
         }}
+        onChange={(_editor, _data, value) => {
+            onChange(value);
+        }
+        }
         onKeyDown={(_, event) => onKeyDown(event)}
       />
     </div>

package/src/components/AutoSuggestion/tests/AutoSuggestionList.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom'
-import {fireEvent, render} from '@testing-library/react'
+import {fireEvent, render, waitFor} from '@testing-library/react'
 import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
 import {AutoSuggestionList, IDropdownProps} from '../AutoSuggestionList'
 
@@ -10,7 +10,6 @@ describe("Dropdown list", () => {
         props  = {
             currentlyFocusedIndex: 0,
             loading: false,
-            left:0,
             isOpen: false,
             options: [],
             itemToHighlight: () => {},
@@ -62,18 +61,21 @@ describe("Dropdown list", () => {
        expect(dropdownItems.length).toBe(2)
     })
 
-    it("should move horizontally for every cursor movement", () => {
+    it("should move horizontally for every cursor movement", async () => {
+       const offset = 10
        props = {
            ...props,
            options: mockOptions,
            loading: false,
            isOpen: true,
-           left: 10
+           registerForHorizontalShift: (callback => callback(offset)),
        }
        const {container} = render(<AutoSuggestionList {...props} />)
-       const parentDiv:HTMLElement = container.querySelector(`.${eccgui}-autosuggestion__dropdown`)!!
-       const leftOffset = Number(parentDiv.style.left.replace(/px$/,""));
-       expect(leftOffset).toBe(props.left)
+       await waitFor(() => {
+           const parentDiv:HTMLElement = container.querySelector(`.${eccgui}-autosuggestion__dropdown`)!!
+           const leftOffset = Number(parentDiv.style.left.replace(/px$/,""));
+           expect(leftOffset).toBe(offset)
+       })
     })
 
     it("should have one active item at a time", () => {

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -128,6 +128,9 @@ export interface IAutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any
         showNewItemOptionFirst?: boolean
     };
 
+    /** Dropdown is only rendered when the query has a value (input field is not empty). */
+    onlyDropdownWithQuery?: boolean;
+
     /** If true the input field will be disabled. */
     disabled?: boolean;
 
@@ -140,6 +143,12 @@ export interface IAutoCompleteFieldProps<T extends any, UPDATE_VALUE extends any
 
     /** If an error occurs during the auto-completion request, the error details will be prefixed with this string. */
     requestErrorPrefix?: string
+
+    /** Creates a backdrop when the popover is shown that captures outside clicks in order to close the popover.
+     * This is needed if other components on the same page are swallowing events, e.g. the react-flow canvas.
+     * hasBackDrop should then be set to true in these cases otherwise the popover won't close when clicking those other components.
+     **/
+    hasBackDrop?: boolean
 }
 
 AutoCompleteField.defaultProps = {
@@ -166,6 +175,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         reset,
         noResultText,
         disabled,
+        onlyDropdownWithQuery = false,
         itemValueSelector,
         itemRenderer,
         onSearch,
@@ -177,6 +187,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         resetQueryToValue,
         itemValueString,
         requestErrorPrefix = "",
+        hasBackDrop = false,
         ...otherProps
     } = props;
     const [selectedItem, setSelectedItem] = useState<T | undefined>(initialValue);
@@ -184,7 +195,8 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     const [listLoading, setListLoading] = useState<boolean>(false);
 
     const [query, setQuery] = useState<string>("");
-    const [hasFocus, setHasFocus] = useState<boolean>(false);
+    // If the input field has focus
+    const [inputHasFocus, setInputHasFocus] = useState<boolean>(false);
     const [highlightingEnabled, setHighlightingEnabled] = useState<boolean>(true);
     const [requestError, setRequestError] = useState<string | undefined>(undefined)
 
@@ -222,7 +234,7 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
     );
 
     useEffect(() => {
-        if (!disabled && !readOnly && hasFocus) {
+        if (!disabled && !readOnly && inputHasFocus) {
             setListLoading(true);
             const timeout: number = window.setTimeout(async () => {
                 fetchQueryResults(query);
@@ -235,18 +247,18 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         return;
     },
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [hasFocus, query]
+        [inputHasFocus, query]
     );
 
     const fieldWidthLimits = elementWidth(fieldRef);
 
     // We need to fire some actions when the auto-complete widget gets or loses focus
     const handleOnFocusIn = () => {
-        setHasFocus(true);
+        setInputHasFocus(true);
     };
 
     const handleOnFocusOut = () => {
-        setHasFocus(false);
+        setInputHasFocus(false);
     };
 
     // On popover close reset query to selected item
@@ -380,6 +392,8 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
         onClosed: onPopoverClose,
         ...otherProps.contextOverlayProps,
         ...preventOverlayOnReadonly,
+        // Needed to capture clicks outside of the popover, e.g. in order to close it.
+        hasBackdrop: hasBackDrop
     }
     if(selectedItem !== undefined) {
         // Makes sure that even when an empty string is selected, the placeholder won't be shown.
@@ -405,7 +419,11 @@ export function AutoCompleteField<T extends any, UPDATE_VALUE extends any>(props
                 className={`${eccgui}-autocompletefield__input`}
                 disabled={disabled}
                 // Need to display error messages in list
-                items={requestError ? [requestError as T] : filtered}
+                items={requestError ?
+                    [requestError as T] :
+                    filtered
+                }
+                initialContent={onlyDropdownWithQuery ? null : undefined}
                 inputValueRenderer={selectedItem !== undefined ? itemValueRenderer : () => ""}
                 itemRenderer={requestError ? requestErrorRenderer : optionRenderer}
                 itemsEqual={areEqualItems}

package/src/components/AutocompleteField/autoCompleteFieldUtils.tsx

@@ -17,7 +17,7 @@ export const createNewItemRendererFactory = (
         let textElement = itemTextRenderer(query, modifiers.styleWidth)
         if(typeof textElement === "string") {
             textElement = <OverflowText style={modifiers.styleWidth}>
-                {`Create option '${query}'`}
+                {textElement.trim() !== "" ? textElement : `Create option '${query}'`}
             </OverflowText>
         }
         return (

package/src/components/AutocompleteField/autocompletefield.scss

@@ -1,5 +1,5 @@
 .#{$eccgui}-autocompletefield__options {
-    .#{$ns}-select-popover {
+    .#{$ns}-popover2-content {
         .#{$ns}-menu {
             max-height: 45vh;
             overflow: auto;