@digigov/ui 2.0.0-daaf7bdf → 2.0.0-e20fed09

package/src/form/AutoComplete/__stories__/Multiple.tsx

@@ -4,11 +4,16 @@ import { suggest } from '@digigov/ui/form/AutoComplete/utils';
 import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer, Fieldset } from '@digigov/ui/form/FieldContainer';
 
-export const Multiple = () => (
+export const Multiple = (_: any) => (
   <div>
     <FieldContainer>
       <Fieldset marginBottom={4}>
-        <AutoComplete source={suggest} multiple width="50%" id="multiple-select-default" />
+        <AutoComplete
+          source={suggest}
+          multiple
+          width="50%"
+          id="multiple-select-default"
+        />
       </Fieldset>
     </FieldContainer>
     <Button>Υποβολή</Button>

package/src/form/AutoComplete/__stories__/MultipleShowingTwoSelected.tsx

@@ -4,10 +4,16 @@ import { suggest } from '@digigov/ui/form/AutoComplete/utils';
 import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 
-export const MultipleShowingTwoSelected = () => (
+export const MultipleShowingTwoSelected = (_: any) => (
   <div>
     <FieldContainer>
-      <AutoComplete source={suggest} multiple width='75%' id="multiple-showing-two-selected" numberOfSelected={2} />
+      <AutoComplete
+        source={suggest}
+        multiple
+        width="75%"
+        id="multiple-showing-two-selected"
+        numberOfSelected={2}
+      />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

package/src/form/AutoComplete/__stories__/MultipleWithDefaultValues.tsx

@@ -4,10 +4,16 @@ import { suggest } from '@digigov/ui/form/AutoComplete/utils';
 import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 
-export const MultipleWithDefaultValues = () => (
+export const MultipleWithDefaultValues = (_: any) => (
   <div>
     <FieldContainer>
-      <AutoComplete source={suggest} multiple defaultValue={['Ελλάδα', 'Ιταλία']} width="50%" id="govgr" />
+      <AutoComplete
+        source={suggest}
+        multiple
+        defaultValue={['Ελλάδα', 'Ιταλία']}
+        width="50%"
+        id="govgr"
+      />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

package/src/form/AutoComplete/__stories__/MultipleWithMinLength.tsx

@@ -5,11 +5,11 @@ import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer, Fieldset } from '@digigov/ui/form/FieldContainer';
 import Paragraph from '@digigov/ui/typography/Paragraph';
 
-export const MultipleWithMinLength = () => (
+export const MultipleWithMinLength = (_: any) => (
   <div>
     <Paragraph>
-      Εδώ, ο ελάχιστος αριθμός χαρακτήρων που πρέπει να
-      εισαχθεί ώστε να αρχίσει να φιλτράρεται η αναζήτηση είναι 2.
+      Εδώ, ο ελάχιστος αριθμός χαρακτήρων που πρέπει να εισαχθεί ώστε να αρχίσει
+      να φιλτράρεται η αναζήτηση είναι 2.
     </Paragraph>
     <FieldContainer>
       <Fieldset marginBottom={4}>

package/src/form/AutoComplete/__stories__/WithAutoSelect.tsx

@@ -4,26 +4,10 @@ import { suggest } from '@digigov/ui/form/AutoComplete/utils';
 import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 
-export const WithAutoSelect = () => (
+export const WithAutoSelect = (_: any) => (
   <div>
     <FieldContainer>
-      <AutoComplete
-        source={suggest}
-        autoselect={true}
-        id="govgr"
-        // tStatusResults={(x, y) => {
-        //   return `Results x: ${x} y: ${y}`;
-        // }}
-        templates={{
-          suggestion: (value) => {
-            return '--> ' + value;
-          },
-          inputValue: (value) => {
-            return value ? 'Χώρα: ' + value : '';
-          },
-        }}
-        tNoResults={() => 'Δεν υπάρχουν αποτελέσματα'}
-      />
+      <AutoComplete source={suggest} autoselect={true} id="govgr" />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

package/src/form/AutoComplete/__stories__/WithCustomValue.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { AutoComplete } from '@digigov/ui/form/AutoComplete';
+import { suggest } from '@digigov/ui/form/AutoComplete/utils';
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+
+export const WithCustomValue = () => (
+  <div>
+    <FieldContainer>
+      <AutoComplete
+        source={suggest}
+        id="govgr"
+        templates={{
+          suggestion: (value) => {
+            return '--> ' + value;
+          },
+          inputValue: (value) => {
+            return value ? 'Χώρα: ' + value : '';
+          },
+        }}
+        tNoResults={() => 'Δεν υπάρχουν αποτελέσματα'}
+      />
+    </FieldContainer>
+    <Button>Υποβολή</Button>
+  </div>
+);
+
+export default WithCustomValue;

package/src/form/AutoComplete/__stories__/WithDefaultValue.tsx

@@ -4,15 +4,10 @@ import { suggest } from '@digigov/ui/form/AutoComplete/utils';
 import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 
-export const WithDefaultValue = () => (
+export const WithDefaultValue = (_: any) => (
   <div>
     <FieldContainer>
-      <AutoComplete
-        source={suggest}
-        autoselect={true}
-        defaultValue="Γερμανία"
-        id="govgr"
-      />
+      <AutoComplete source={suggest} defaultValue="Γερμανία" id="govgr" />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

package/src/form/AutoComplete/__stories__/WithHint.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { AutoComplete } from '@digigov/ui/form/AutoComplete';
+import { suggest } from '@digigov/ui/form/AutoComplete/utils';
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+
+export const WithHint = () => (
+  <div>
+    <FieldContainer>
+      <AutoComplete source={suggest} id="govgr" hint={true} />
+    </FieldContainer>
+    <Button>Υποβολή</Button>
+  </div>
+);
+
+export default WithHint;

package/src/form/AutoComplete/__stories__/WithMinLength.tsx

@@ -5,7 +5,7 @@ import Button from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
-export const WithMinLength = () => (
+export const WithMinLength = (_: any) => (
   <div>
     <Paragraph>
       Σε αυτό το παράδειγμα, ο ελάχιστος αριθμός χαρακτήρων που πρέπει να

package/src/form/AutoComplete/__stories__/WithPlaceHolder.tsx

@@ -4,7 +4,7 @@ import { suggest } from '@digigov/ui/form/AutoComplete/utils';
 import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 
-export const WithPlaceHolder = () => (
+export const WithPlaceHolder = (_: any) => (
   <div>
     <FieldContainer>
       <AutoComplete

package/src/form/AutoComplete/__stories__/WithShowAllValues.tsx

@@ -4,14 +4,10 @@ import { suggest } from '@digigov/ui/form/AutoComplete/utils';
 import Button from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 
-export const WithShowAllValues = () => (
+export const WithShowAllValues = (_: any) => (
   <div>
     <FieldContainer>
-      <AutoComplete
-        source={suggest}
-        autoselect={true}
-        id="govgr"
-      />
+      <AutoComplete source={suggest} autoselect={true} id="govgr" />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

package/src/form/AutoComplete/doc.mdx

@@ -0,0 +1,51 @@
+---
+id: auto-complete
+title: AutoComplete
+---
+
+# AutoComplete
+
+Autocomplete is a feature in which an input field suggests a word based on user input. This allows users to quickly search
+through, select from large collections of options and help services get more consistent data.
+
+## How to use
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/Default.tsx" />
+
+### With auto select
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect.tsx" />
+
+### With default value
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue.tsx" />
+
+### With placeholder
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder.tsx" />
+
+### With all option's values
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues.tsx" />
+
+### With min length
+
+This is the minimum number of characters that should be entered before the AutoComplete will attempt to suggest options(in above example is 2)
+
+<code src="@digigov/ui/form/AutoComplete/__stories__/WithMinLength.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps
+  componentName={[
+    'AutoCompleteWrapper',
+    'AutoCompleteStatus',
+    'AutoCompleteStatusWrapper',
+    'AutoCompleteInput',
+    'AutoCompleteResultList',
+    'AutoCompleteResultListItem',
+    'AutoCompleteAssistiveHint',
+  ]}
+/>{' '}

package/src/form/AutoComplete/index.test.tsx

@@ -7,7 +7,9 @@ import { MultipleShowingTwoSelected } from '@digigov/ui/form/AutoComplete/__stor
 import { MultipleWithDefaultValues } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithDefaultValues';
 import { MultipleWithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength';
 import { WithAutoSelect } from '@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect';
+import { WithCustomValue } from '@digigov/ui/form/AutoComplete/__stories__/WithCustomValue';
 import { WithDefaultValue } from '@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue';
+import { WithHint } from '@digigov/ui/form/AutoComplete/__stories__/WithHint';
 import { WithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/WithMinLength';
 import { WithPlaceHolder } from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
 import { WithShowAllValues } from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';
@@ -34,9 +36,15 @@ test('renders the All AutoComplete variants', async ({ mount, page }) => {
     <TestVariant title="WithAutoSelect">
       <WithAutoSelect />
     </TestVariant>
+    <TestVariant title="WithCustomValue">
+      <WithCustomValue />
+    </TestVariant>
     <TestVariant title="WithDefaultValue">
       <WithDefaultValue />
     </TestVariant>
+    <TestVariant title="WithHint">
+      <WithHint />
+    </TestVariant>
     <TestVariant title="WithMinLength">
       <WithMinLength />
     </TestVariant>
@@ -50,6 +58,10 @@ test('renders the All AutoComplete variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/form/AutoComplete/index.tsx

@@ -1,24 +1,22 @@
-import React from 'react';
-import { Component } from 'react';
-import AutoCompleteAssistiveHint from '@digigov/react-core/AutoCompleteAssistiveHint';
-import AutoCompleteInput from '@digigov/react-core/AutoCompleteInput';
-import AutoCompleteInputTypeahead from '@digigov/react-core/AutoCompleteInputTypeahead';
-import AutoCompleteResultList from '@digigov/react-core/AutoCompleteResultList';
-import AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultListItem';
-import AutoCompleteContainer from '@digigov/react-core/AutoCompleteContainer';
-import AutoCompleteMultipleInputContainer from '@digigov/react-core/AutoCompleteMultipleInputContainer';
-import AutoCompleteMultipleInput from '@digigov/react-core/AutoCompleteMultipleInput';
+import React, { Component, type JSX } from 'react';
+import { AutoCompleteAssistiveHint } from '@digigov/react-core/AutoCompleteAssistiveHint';
+import { AutoCompleteContainer } from '@digigov/react-core/AutoCompleteContainer';
+import { AutoCompleteInputBase } from '@digigov/react-core/AutoCompleteInputBase';
+import { AutoCompleteMultipleInput } from '@digigov/react-core/AutoCompleteMultipleInput';
+import { AutoCompleteMultipleInputContainer } from '@digigov/react-core/AutoCompleteMultipleInputContainer';
+import { AutoCompleteResultList } from '@digigov/react-core/AutoCompleteResultList';
+import { AutoCompleteResultListItem } from '@digigov/react-core/AutoCompleteResultListItem';
 import { Base } from '@digigov/react-core/Base';
 import { CaretIcon } from '@digigov/react-icons/CaretIcon';
+import { Chip, ChipContainer } from '@digigov/ui/content/Chip';
 import Status from '@digigov/ui/form/AutoComplete/Status';
 import {
   isIosDevice,
   keyCodes,
   isPrintableKeyCode,
 } from '@digigov/ui/form/AutoComplete/utils';
-import Checkbox, { CheckboxItem } from '../Checkbox';
-import { Chip, ChipContainer } from '@digigov/ui/content/Chip';
 import Button from '@digigov/ui/form/Button';
+import Checkbox, { CheckboxItem } from '@digigov/ui/form/Checkbox';
 import { NormalText } from '@digigov/ui/typography/NormalText';
 
 export interface AutoCompleteProps {
@@ -37,6 +35,7 @@ export interface AutoCompleteProps {
   };
   width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
   autoselect?: boolean;
+  hint?: boolean;
   defaultValue?: string | string[];
   minLength?: number;
   name?: string;
@@ -47,7 +46,7 @@ export interface AutoCompleteProps {
   numberOfSelected?: 1 | 2 | 3 | 'all';
 }
 
-export type State = {
+export interface State {
   focused: any;
   hovered: any;
   menuOpen: boolean;
@@ -57,9 +56,12 @@ export type State = {
   validChoiceMade: boolean;
   selected: any;
   ariaHint: boolean;
-};
+}
 
-export type NewQueryProps = { menuOpen?: boolean; query?: string };
+export interface NewQueryProps {
+  menuOpen?: boolean;
+  query?: string;
+}
 
 export default class AutoComplete extends Component<AutoCompleteProps, State> {
   static defaultProps = {
@@ -68,6 +70,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     minLength: 0,
     name: 'ds-input-autocomplete',
     placeholder: '',
+    hint: false,
     onConfirm: (): void => {
       return;
     },
@@ -136,7 +139,6 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 
   componentDidMount(): void {
     this.getDirectInputChanges();
-
   }
 
   getDirectInputChanges(): void {
@@ -190,12 +192,13 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 
   handleComponentBlur(newState?: NewQueryProps): void {
     const { options, query, selected } = this.state;
-    let newQuery: string;
-    if (this.props.confirmOnBlur) {
-      newQuery = newState?.query || query;
-      this.props.onConfirm?.(options[selected as number]);
-    } else {
-      newQuery = query;
+    const { confirmOnBlur, autoselect, onConfirm } = this.props;
+    let newQuery = query;
+    if (confirmOnBlur || autoselect) {
+      newQuery = newState?.query ?? query;
+    }
+    if (confirmOnBlur) {
+      onConfirm?.(options[selected as number]);
     }
     this.setState({
       focused: null,
@@ -213,6 +216,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
   }
 
   handleAutoCompleteBlur(event, index?: number): void {
+    const { autoselect } = this.props;
     const { focused, options, query, selected } = this.state;
     let focusingOutsideComponent = false;
     if (event.relatedTarget === null) {
@@ -234,7 +238,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       focusingOutsideComponent &&
       !(focusingAnotherOption || focusingInput || focusingButtonArrow);
 
-    if (blurComponent) {
+    if (blurComponent && !autoselect) {
       // In handleInputBlur:
       const newQuery = isIosDevice()
         ? query
@@ -244,11 +248,24 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         query: newQuery,
       });
     }
+    if (blurComponent && autoselect) {
+      // In handleInputBlur:
+      const selectedOption = this.templateInputValue(
+        options[selected as number]
+      );
+      const newQuery = isIosDevice()
+        ? query
+        : selectedOption?.toLowerCase().includes(query.toLowerCase())
+          ? selectedOption
+          : query;
+      this.handleComponentBlur({
+        menuOpen: false,
+        query: newQuery,
+      });
+    }
   }
-
   handleInputChange(event: { target: any }): void {
     const { source, minLength } = this.props;
-    const autoselect = this.hasAutoselect();
     const query = event.target.value;
     const queryEmpty = query.length === 0;
     this.setState({
@@ -262,7 +279,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       this.setState({
         menuOpen: optionsAvailable,
         options,
-        selected: autoselect && optionsAvailable ? 0 : -1,
+        selected: -1,
         validChoiceMade: false,
       });
     });
@@ -314,6 +331,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         hovered: index,
       });
     }
+    this.handleOptionFocus(index);
   }
 
   handleOptionClickMultiple(index: number): void {
@@ -466,28 +484,41 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       case 'enter':
         this.handleEnter(event);
         break;
-      case 'escape':
+      case 'escape': {
         this.handleComponentBlur({
           query: this.state.query,
+          menuOpen: false,
         });
         break;
+      }
       case 'backspace':
         if (this.props.multiple) {
-          if (this.state.query.length === 0 && this.state.selectedValues.length > 0) {
+          if (
+            this.state.query.length === 0 &&
+            this.state.selectedValues.length > 0
+          ) {
             event.preventDefault();
-            const updatedSelectedValues = this.state.selectedValues.slice(0, -1);
-            this.setState({
-              selectedValues: updatedSelectedValues,
-            }, () => {
-              this.props.onConfirm?.(updatedSelectedValues);
-            });
-            break;
+            const updatedSelectedValues = this.state.selectedValues.slice(
+              0,
+              -1
+            );
+            this.setState(
+              {
+                selectedValues: updatedSelectedValues,
+              },
+              () => {
+                this.props.onConfirm?.(updatedSelectedValues);
+              }
+            );
+          } else {
+            if (isPrintableKeyCode(event.keyCode)) {
+              this.handlePrintableKey(event);
+            }
           }
-        }
-        else {
+        } else {
           this.props.onConfirm?.('');
-          break;
         }
+        break;
       default:
         if (isPrintableKeyCode(event.keyCode)) {
           this.handlePrintableKey(event);
@@ -495,7 +526,6 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         break;
     }
   }
-
   render(): JSX.Element {
     const {
       id,
@@ -504,6 +534,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       name,
       placeholder,
       required,
+      hint,
       tNoResults,
       tStatusQueryTooShort,
       tStatusNoResults,
@@ -538,15 +569,15 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       selectedOptionText &&
       selectedOptionText.toLowerCase().indexOf(query.toLowerCase()) === 0;
     const hintValue =
-      optionBeginsWithQuery && autoselect
+      optionBeginsWithQuery && (autoselect || hint)
         ? query + selectedOptionText.substr(query.length)
         : '';
 
     const assistiveHintID = id + '__assistiveHint';
     const ariaDescribedProp = ariaHint
       ? {
-        'aria-describedby': assistiveHintID,
-      }
+          'aria-describedby': assistiveHintID,
+        }
       : null;
 
     const showAutoCompleteResultListItems = (
@@ -558,7 +589,8 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           const showFocused =
             focused === -1 ? selected === index : focused === index;
           const iosPosinsetHtml = isIosDevice() ? (
-            <Base as='span'
+            <Base
+              as="span"
               id={`${id}__option-suffix--${index}`}
               style={{
                 border: '0',
@@ -603,7 +635,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
                 <CheckboxItem
                   value={option}
                   checked={this.state.selectedValues.includes(option)}
-                  onChange={() => { }}
+                  onChange={() => {}}
                 >
                   {this.templateSuggestion(option)}
                 </CheckboxItem>
@@ -633,12 +665,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           tSelectedOption={tStatusSelectedOption}
           tResults={tStatusResults}
         />
-
-        {hintValue && (placeholder === '' || !placeholder) && (
-          <AutoCompleteInputTypeahead value={hintValue} />
-        )}
-
-        {multiple ? (
+        {multiple && !autoselect ? (
           <AutoCompleteMultipleInputContainer
             isFocused={componentIsFocused}
             numberOfSelected={this.props.numberOfSelected}
@@ -649,29 +676,32 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
                   <Chip
                     key={index}
                     onDelete={() => {
-                      this.setState(prevState => ({
-                        selectedValues: prevState.selectedValues.filter(
-                          (v) => {
-                            if (typeof v === "string") {
-                              return v !== value;
-                            } else {
-                              return v.value !== value.value;
+                      this.setState(
+                        (prevState) => ({
+                          selectedValues: prevState.selectedValues.filter(
+                            (v) => {
+                              if (typeof v === 'string') {
+                                return v !== value;
+                              } else {
+                                return v.value !== value.value;
+                              }
                             }
-                          }
-                        ),
-                      }), () => {
-                        this.props.onConfirm?.(this.state.selectedValues);
-                      });
+                          ),
+                        }),
+                        () => {
+                          this.props.onConfirm?.(this.state.selectedValues);
+                        }
+                      );
                     }}
                   >
-                    {typeof value === "string" ? value : value.label.primary}
+                    {typeof value === 'string' ? value : value.label.primary}
                   </Chip>
                 );
               })}
               {!componentIsFocused &&
                 typeof this.props.numberOfSelected === 'number' &&
                 this.state.selectedValues.length >
-                this.props.numberOfSelected && (
+                  this.props.numberOfSelected && (
                   <NormalText fontWeight="bold" margin={0}>
                     +
                     {this.state.selectedValues.length -
@@ -695,7 +725,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
               onChange={this.handleInputChange}
               onFocus={this.handleInputFocus}
               name={name}
-              placeholder={placeholder}
+              placeholder={hintValue || placeholder}
               ref={(inputElement) => {
                 this.elementReferences[-1] = inputElement;
               }}
@@ -716,7 +746,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
                     this.setState({
                       menuOpen: optionsAvailable,
                       options,
-                      selected: autoselect && optionsAvailable ? 0 : -1,
+                      selected: -1,
                       validChoiceMade: false,
                     });
                   });
@@ -755,7 +785,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           </AutoCompleteMultipleInputContainer>
         ) : (
           <>
-            <AutoCompleteInput
+            <AutoCompleteInputBase
               aria-expanded={menuOpen ? 'true' : 'false'}
               aria-activedescendant={
                 optionFocused ? `${id}__option--${focused}` : ''
@@ -771,7 +801,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
               onChange={this.handleInputChange}
               onFocus={this.handleInputFocus}
               name={name}
-              placeholder={placeholder}
+              placeholder={hintValue || placeholder}
               ref={(inputElement) => {
                 this.elementReferences[-1] = inputElement;
               }}
@@ -806,8 +836,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 
 export {
   AutoComplete,
-  AutoCompleteInput,
-  AutoCompleteInputTypeahead,
+  AutoCompleteInputBase,
   AutoCompleteResultList,
   AutoCompleteResultListItem,
   AutoCompleteContainer,