@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-462194bf

package/src/form/AutoComplete/index.tsx

@@ -5,7 +5,9 @@ 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 AutoCompleteWrapper from '@digigov/react-core/AutoCompleteWrapper';
+import AutoCompleteContainer from '@digigov/react-core/AutoCompleteContainer';
+import AutoCompleteMultipleInputContainer from '@digigov/react-core/AutoCompleteMultipleInputContainer';
+import AutoCompleteMultipleInput from '@digigov/react-core/AutoCompleteMultipleInput';
 
 import { CaretIcon } from '@digigov/react-icons/CaretIcon';
 import Status from '@digigov/ui/form/AutoComplete/Status';
@@ -14,10 +16,15 @@ import {
   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 { NormalText } from '@digigov/ui/typography/NormalText';
 
 export interface AutoCompleteProps {
   source: (query: string, syncResults: (options: string[]) => void) => void;
   id: string;
+  multiple?: boolean;
   tStatusResults?: (x: number, y: string) => string;
   tStatusNoResults?: () => string;
   tStatusQueryTooShort?: (x: number) => string;
@@ -25,30 +32,28 @@ export interface AutoCompleteProps {
   tNoResults?: () => string;
   tAssistiveHint?: () => string;
   templates?: {
-    suggestion?: (value: any) => any;
+    suggestion?: (value: any, query: string | string[]) => any;
     inputValue?: (value: any) => string;
   };
   width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
   autoselect?: boolean;
-  defaultValue?: string;
-  displayMenu?: 'overlay' | 'inline';
+  defaultValue?: string | string[];
   minLength?: number;
   name?: string;
   placeholder?: string;
   onConfirm?: (x: any) => void;
   confirmOnBlur?: boolean;
-  showNoOptionsFound?: boolean;
-  showAllValues?: boolean;
   required?: boolean;
-  dropdownArrow?: React.ElementType;
+  numberOfSelected?: 1 | 2 | 3 | 'all';
 }
 
 export type State = {
   focused: any;
   hovered: any;
   menuOpen: boolean;
-  options: string[];
+  options: any[];
   query: string;
+  selectedValues: any[];
   validChoiceMade: boolean;
   selected: any;
   ariaHint: boolean;
@@ -58,10 +63,8 @@ export type NewQueryProps = { menuOpen?: boolean; query?: string };
 
 export default class AutoComplete extends Component<AutoCompleteProps, State> {
   static defaultProps = {
-    width: '33.3%',
+    width: 'full',
     autoselect: false,
-    defaultValue: '',
-    displayMenu: 'overlay',
     minLength: 0,
     name: 'ds-input-autocomplete',
     placeholder: '',
@@ -69,35 +72,37 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       return;
     },
     confirmOnBlur: false,
-    showNoOptionsFound: true,
-    showAllValues: false,
     required: false,
     tNoResults: (): string => 'No results found',
     tAssistiveHint: (): string =>
       'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
-    dropdownArrow: (props) => (
-      <CaretIcon direction="down" size="sm" {...props} />
-    ),
   };
 
   elementReferences = {};
-  $pollInput: any;
 
   constructor(props: AutoCompleteProps) {
     super(props);
+    const customState: any = {};
+    if (Array.isArray(props.defaultValue)) {
+      customState.selectedValues = props.defaultValue as string[];
+    } else if (props.defaultValue) {
+      customState.selectedValues = [props.defaultValue as string];
+    }
 
     this.state = {
       focused: null,
       hovered: null,
       menuOpen: false,
-      options: props.defaultValue ? [props.defaultValue] : [],
-      query: props.defaultValue as string,
+      options: [],
+      query: this.props.multiple ? '' : (props.defaultValue as string) || '',
+      selectedValues: [],
       validChoiceMade: false,
       selected: null,
       ariaHint: true,
+      ...customState,
     };
-
     this.handleComponentBlur = this.handleComponentBlur.bind(this);
+    this.handleAutoCompleteBlur = this.handleAutoCompleteBlur.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleUpArrow = this.handleUpArrow.bind(this);
     this.handleDownArrow = this.handleDownArrow.bind(this);
@@ -106,17 +111,18 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 
     this.handleListMouseLeave = this.handleListMouseLeave.bind(this);
 
-    this.handleOptionBlur = this.handleOptionBlur.bind(this);
-    this.handleOptionClick = this.handleOptionClick.bind(this);
+    if (this.props.multiple) {
+      this.handleOptionClick = this.handleOptionClickMultiple.bind(this);
+    } else {
+      this.handleOptionClick = this.handleOptionClick.bind(this);
+    }
     this.handleOptionFocus = this.handleOptionFocus.bind(this);
     this.handleOptionMouseDown = this.handleOptionMouseDown.bind(this);
     this.handleOptionMouseEnter = this.handleOptionMouseEnter.bind(this);
 
-    this.handleInputBlur = this.handleInputBlur.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleInputFocus = this.handleInputFocus.bind(this);
 
-    this.pollInputElement = this.pollInputElement.bind(this);
     this.getDirectInputChanges = this.getDirectInputChanges.bind(this);
   }
 
@@ -129,29 +135,14 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
   }
 
   componentDidMount(): void {
-    this.pollInputElement();
-  }
-
-  componentWillUnmount(): void {
-    clearTimeout(this.$pollInput);
-  }
-
-  // Applications like Dragon NaturallySpeaking will modify the
-  // `input` field by directly changing its `.value`. These events
-  // don't trigger our JavaScript event listeners, so we need to poll
-  // to handle when and if they occur.
-  pollInputElement(): void {
     this.getDirectInputChanges();
-    this.$pollInput = setTimeout(() => {
-      this.pollInputElement();
-    }, 100);
+
   }
 
   getDirectInputChanges(): void {
     const inputReference = this.elementReferences[-1];
     const queryHasChanged =
-      inputReference && inputReference.value !== this.state.query;
-
+      inputReference && inputReference.value !== (this.state.query ?? '');
     if (queryHasChanged) {
       this.handleInputChange({ target: { value: inputReference.value } });
     }
@@ -191,21 +182,24 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
   templateSuggestion(value: string): string {
     const suggestionTemplate =
       this.props.templates && this.props.templates.suggestion;
-    return suggestionTemplate ? suggestionTemplate(value) : value;
+
+    return suggestionTemplate
+      ? suggestionTemplate(value, this.state.query)
+      : value;
   }
 
-  handleComponentBlur(newState: NewQueryProps): void {
+  handleComponentBlur(newState?: NewQueryProps): void {
     const { options, query, selected } = this.state;
     let newQuery: string;
     if (this.props.confirmOnBlur) {
-      newQuery = newState.query || query;
+      newQuery = newState?.query || query;
       this.props.onConfirm?.(options[selected as number]);
     } else {
       newQuery = query;
     }
     this.setState({
       focused: null,
-      menuOpen: newState.menuOpen || false,
+      menuOpen: newState?.menuOpen || false,
       query: newQuery,
       selected: null,
       validChoiceMade: this.isQueryAnOption(newQuery, options),
@@ -218,72 +212,60 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     });
   }
 
-  handleOptionBlur(
-    event: React.FocusEvent<HTMLLIElement>,
-    index: number
-  ): void {
-    const { focused, menuOpen, options, selected } = this.state;
-    const focusingOutsideComponent = event.relatedTarget === null;
+  handleAutoCompleteBlur(event, index?: number): void {
+    const { focused, options, query, selected } = this.state;
+    let focusingOutsideComponent = false;
+    if (event.relatedTarget === null) {
+      focusingOutsideComponent = true;
+    } else {
+      // This affects if we have multiple autocompletes in same page and we click the first button-arrow and then another button-arrow
+      focusingOutsideComponent =
+        this.elementReferences['button-arrow'] !== event.relatedTarget;
+    }
     const focusingInput = event.relatedTarget === this.elementReferences[-1];
-    const focusingAnotherOption = focused !== index && focused !== -1;
-    const blurComponent =
-      (!focusingAnotherOption && focusingOutsideComponent) ||
-      !(focusingAnotherOption || focusingInput);
-    if (blurComponent) {
-      const keepMenuOpen = menuOpen && isIosDevice();
-      this.handleComponentBlur({
-        menuOpen: keepMenuOpen,
-        query: this.templateInputValue(options[selected as number]),
-      });
+    const focusingButtonArrow =
+      this.elementReferences['button-arrow'] === event.relatedTarget || false;
+    let focusingAnotherOption = focused !== null && focused !== -1;
+    if (index !== undefined) {
+      focusingAnotherOption = focused !== index && focused !== -1;
     }
-  }
+    // Check if the user clicks outside and not either on option, either on input or on button arrow
+    const blurComponent =
+      focusingOutsideComponent &&
+      !(focusingAnotherOption || focusingInput || focusingButtonArrow);
 
-  handleInputBlur(): void {
-    const { focused, menuOpen, options, query, selected } = this.state;
-    const focusingAnOption = focused !== -1;
-    if (!focusingAnOption) {
-      const keepMenuOpen = menuOpen && isIosDevice();
+    if (blurComponent) {
+      // In handleInputBlur:
       const newQuery = isIosDevice()
         ? query
         : this.templateInputValue(options[selected as number]);
       this.handleComponentBlur({
-        menuOpen: keepMenuOpen,
+        menuOpen: false,
         query: newQuery,
       });
     }
   }
 
   handleInputChange(event: { target: any }): void {
-    const { minLength, source, showAllValues } = this.props;
+    const { source, minLength } = this.props;
     const autoselect = this.hasAutoselect();
     const query = event.target.value;
     const queryEmpty = query.length === 0;
-    const queryChanged = this.state.query.length !== query.length;
-    const queryLongEnough = query.length >= (minLength as number);
-
     this.setState({
       query,
       ariaHint: queryEmpty,
     });
-
-    const searchForOptions =
-      showAllValues || (!queryEmpty && queryChanged && queryLongEnough);
-    if (searchForOptions) {
-      source(query, (options) => {
-        const optionsAvailable = options.length > 0;
-        this.setState({
-          menuOpen: optionsAvailable,
-          options,
-          selected: autoselect && optionsAvailable ? 0 : -1,
-          validChoiceMade: false,
-        });
-      });
-    } else if (queryEmpty || !queryLongEnough) {
+    const minLengthQuery =
+      minLength != undefined && minLength > query.length ? '' : query;
+    source(minLengthQuery, (options) => {
+      const optionsAvailable = options.length > 0;
       this.setState({
-        menuOpen: false,
-        options: [],
+        menuOpen: optionsAvailable,
+        options,
+        selected: autoselect && optionsAvailable ? 0 : -1,
+        validChoiceMade: false,
       });
-    }
+    });
   }
 
   handleInputClick(
@@ -293,13 +275,13 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
   }
 
   handleInputFocus(): void {
+    const { source } = this.props;
     const { query, validChoiceMade, options } = this.state;
     const { minLength } = this.props;
     const shouldReopenMenu =
       !validChoiceMade &&
       query.length >= (minLength as number) &&
       options.length > 0;
-
     if (shouldReopenMenu) {
       this.setState(({ menuOpen }) => ({
         focused: -1,
@@ -307,7 +289,12 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         selected: -1,
       }));
     } else {
-      this.setState({ focused: -1 });
+      source(query, (options) => {
+        this.setState({
+          focused: -1,
+          options,
+        });
+      });
     }
   }
 
@@ -329,15 +316,43 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     }
   }
 
+  handleOptionClickMultiple(index: number): void {
+    const selectedOption = this.state.options[index];
+    let selectedValues = this.state.selectedValues;
+    if (this.state.selectedValues.indexOf(selectedOption) === -1) {
+      selectedValues = selectedValues.concat([selectedOption]);
+    } else {
+      selectedValues.splice(
+        this.state.selectedValues.indexOf(selectedOption),
+        1
+      );
+    }
+    this.props.onConfirm?.(selectedValues);
+    this.setState({
+      focused: index,
+      hovered: null,
+      menuOpen: true,
+      query: '',
+      selectedValues,
+      selected: index,
+      validChoiceMade: true,
+    });
+    this.forceUpdate();
+  }
+
   handleOptionClick(index: number): void {
     const selectedOption = this.state.options[index];
     const newQuery = this.templateInputValue(selectedOption);
     this.props.onConfirm?.(selectedOption);
+    const selectedValues = this.props.multiple
+      ? this.state.selectedValues.concat(selectedOption)
+      : [selectedOption];
     this.setState({
       focused: -1,
       hovered: null,
       menuOpen: false,
       query: newQuery,
+      selectedValues,
       selected: -1,
       validChoiceMade: true,
     });
@@ -367,7 +382,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
   handleDownArrow(event: { preventDefault: () => void }): void {
     event.preventDefault();
     // if not open, open
-    if (this.props.showAllValues && this.state.menuOpen === false) {
+    if (this.state.menuOpen === false) {
       event.preventDefault();
       this.props.source('', (options) => {
         this.setState({
@@ -390,11 +405,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 
   handleSpace(event: { preventDefault: () => void }): void {
     // if not open, open
-    if (
-      this.props.showAllValues &&
-      this.state.menuOpen === false &&
-      this.state.query === ''
-    ) {
+    if (this.state.menuOpen === false && this.state.query === '') {
       event.preventDefault();
       this.props.source('', (options) => {
         this.setState({
@@ -416,6 +427,12 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       const hasSelectedOption = this.state.selected >= 0;
       if (hasSelectedOption) {
         this.handleOptionClick(this.state.selected);
+        if (this.props.multiple) {
+          this.setState({
+            menuOpen: false,
+            focused: -1,
+          });
+        }
       }
     }
   }
@@ -454,6 +471,23 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           query: this.state.query,
         });
         break;
+      case 'backspace':
+        if (this.props.multiple) {
+          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;
+          }
+        }
+        else {
+          this.props.onConfirm?.('');
+          break;
+        }
       default:
         if (isPrintableKeyCode(event.keyCode)) {
           this.handlePrintableKey(event);
@@ -466,44 +500,37 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     const {
       id,
       width,
-      displayMenu,
       minLength,
       name,
       placeholder,
       required,
-      showAllValues,
       tNoResults,
       tStatusQueryTooShort,
       tStatusNoResults,
       tStatusSelectedOption,
       tStatusResults,
       tAssistiveHint,
-      dropdownArrow: DropdownArrow,
+      multiple,
+      source,
     } = this.props;
     const {
       focused,
       hovered,
       menuOpen,
       options,
-      query,
       selected,
       ariaHint,
       validChoiceMade,
     } = this.state;
     const autoselect = this.hasAutoselect();
-
+    const query = this.state.query ?? '';
     const inputFocused = focused === -1;
     const noOptionsAvailable = options.length === 0;
     const queryNotEmpty = query.length !== 0;
     const queryLongEnough = query.length >= (minLength as number);
     const showNoOptionsFound =
-      this.props.showNoOptionsFound &&
-      inputFocused &&
-      noOptionsAvailable &&
-      queryNotEmpty &&
-      queryLongEnough;
+      inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough;
     const componentIsFocused = focused !== null;
-    const dropdownArrowClassName = `ds-autocomplete__dropdown-arrow-down`;
     const optionFocused = focused !== -1 && focused !== null;
     const menuIsVisible = menuOpen || showNoOptionsFound;
     const selectedOptionText = this.templateInputValue(options[selected]);
@@ -522,8 +549,74 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       }
       : null;
 
+    const showAutoCompleteResultListItems = (
+      options: string[],
+      multiple: boolean
+    ) => {
+      {
+        return options.map((option, index) => {
+          const showFocused =
+            focused === -1 ? selected === index : focused === index;
+          const iosPosinsetHtml = isIosDevice() ? (
+            <span
+              id={`${id}__option-suffix--${index}`}
+              style={{
+                border: '0',
+                clip: 'rect(0 0 0 0)',
+                height: '1px',
+                marginBottom: '-1px',
+                marginRight: '-1px',
+                overflow: 'hidden',
+                padding: '0',
+                position: 'absolute',
+                whiteSpace: 'nowrap',
+                width: '1px',
+              }}
+            >
+              {index + 1} από {options.length}
+            </span>
+          ) : (
+            ''
+          );
+          return (
+            <AutoCompleteResultListItem
+              isFocused={showFocused}
+              isHovered={hovered}
+              index={index}
+              aria-selected={focused === index ? 'true' : 'false'}
+              key={index}
+              onBlur={(event) => this.handleAutoCompleteBlur(event, index)}
+              onClick={() => this.handleOptionClick(index)}
+              onMouseDown={this.handleOptionMouseDown}
+              onMouseEnter={() => this.handleOptionMouseEnter(index)}
+              ref={(optionEl) => {
+                this.elementReferences[index] = optionEl;
+              }}
+              role="option"
+              tabIndex={-1}
+              aria-posinset={index + 1}
+              aria-setsize={options.length}
+            >
+              {multiple ? (
+                <CheckboxItem
+                  value={option}
+                  checked={this.state.selectedValues.includes(option)}
+                  onChange={() => { }}
+                >
+                  {this.templateSuggestion(option)}
+                </CheckboxItem>
+              ) : (
+                this.templateSuggestion(option)
+              )}
+              {iosPosinsetHtml}
+            </AutoCompleteResultListItem>
+          );
+        });
+      }
+    };
+
     return (
-      <AutoCompleteWrapper onKeyDown={this.handleKeyDown} width={width}>
+      <AutoCompleteContainer onKeyDown={this.handleKeyDown} width={width}>
         <Status
           id={id}
           length={options.length}
@@ -539,114 +632,171 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           tResults={tStatusResults}
         />
 
-        {hintValue && <AutoCompleteInputTypeahead value={hintValue} />}
-
-        <AutoCompleteInput
-          aria-expanded={menuOpen ? 'true' : 'false'}
-          aria-activedescendant={
-            optionFocused ? `${id}__option--${focused}` : ''
-          }
-          aria-owns={`${id}__listbox`}
-          aria-autocomplete={this.hasAutoselect() ? 'both' : 'list'}
-          {...ariaDescribedProp}
-          autoComplete="off"
-          isFocused={componentIsFocused}
-          showAllValues={this.props.showAllValues}
-          id={id}
-          onClick={(event) => this.handleInputClick(event)}
-          onBlur={this.handleInputBlur}
-          onChange={this.handleInputChange}
-          onFocus={this.handleInputFocus}
-          name={name}
-          placeholder={placeholder}
-          ref={(inputElement) => {
-            this.elementReferences[-1] = inputElement;
-          }}
-          role="combobox"
-          required={required}
-          value={query}
-        />
-
-        {showNoOptionsFound ||
-          (showAllValues && !menuOpen && DropdownArrow && (
-            <DropdownArrow
-              type="button"
+        {hintValue && (placeholder === '' || !placeholder) && (
+          <AutoCompleteInputTypeahead value={hintValue} />
+        )}
+
+        {multiple ? (
+          <AutoCompleteMultipleInputContainer
+            isFocused={componentIsFocused}
+            numberOfSelected={this.props.numberOfSelected}
+          >
+            <ChipContainer>
+              {this.state.selectedValues.map((value, index) => {
+                return (
+                  <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.props.onConfirm?.(this.state.selectedValues);
+                      });
+                    }}
+                  >
+                    {typeof value === "string" ? value : value.label.primary}
+                  </Chip>
+                );
+              })}
+              {!componentIsFocused &&
+                typeof this.props.numberOfSelected === 'number' &&
+                this.state.selectedValues.length >
+                this.props.numberOfSelected && (
+                  <NormalText fontWeight="bold" margin={0}>
+                    +
+                    {this.state.selectedValues.length -
+                      this.props.numberOfSelected}
+                  </NormalText>
+                )}
+            </ChipContainer>
+            <AutoCompleteMultipleInput
+              aria-expanded={menuOpen ? 'true' : 'false'}
+              aria-activedescendant={
+                optionFocused ? `${id}__option--${focused}` : ''
+              }
+              aria-owns={`${id}__listbox`}
+              aria-autocomplete={this.hasAutoselect() ? 'both' : 'list'}
+              {...ariaDescribedProp}
+              autoComplete="off"
+              // isFocused={componentIsFocused}
+              id={id}
+              onClick={(event) => this.handleInputClick(event)}
+              onBlur={(event) => this.handleAutoCompleteBlur(event)}
+              onChange={this.handleInputChange}
+              onFocus={this.handleInputFocus}
+              name={name}
+              placeholder={placeholder}
+              ref={(inputElement) => {
+                this.elementReferences[-1] = inputElement;
+              }}
+              role="combobox"
+              required={required}
+              value={query}
+            />
+            <Button
+              ref={(buttonElement) => {
+                this.elementReferences['button-arrow'] = buttonElement;
+              }}
+              variant="link"
               onClick={() => {
-                this.elementReferences[-1].focus();
-                this.handleInputChange({
-                  target: { value: query },
-                });
+                if (!this.state.menuOpen) {
+                  source(query, (options) => {
+                    const optionsAvailable = options.length > 0;
+                    this.setState({
+                      menuOpen: optionsAvailable,
+                      options,
+                      selected: autoselect && optionsAvailable ? 0 : -1,
+                      validChoiceMade: false,
+                    });
+                  });
+                } else {
+                  this.setState({
+                    menuOpen: false,
+                    focused: null,
+                  });
+                }
+              }}
+              onBlur={(event) => this.handleAutoCompleteBlur(event)}
+            >
+              <CaretIcon direction="down" size="md" />
+            </Button>
+
+            <AutoCompleteResultList
+              isVisible={menuIsVisible}
+              onMouseLeave={() => this.handleListMouseLeave()}
+              id={`${id}__listbox`}
+              role="listbox"
+            >
+              <Checkbox>
+                {showAutoCompleteResultListItems(options, multiple)}
+              </Checkbox>
+
+              {showNoOptionsFound && (
+                <AutoCompleteResultListItem empty>
+                  {tNoResults?.()}
+                </AutoCompleteResultListItem>
+              )}
+            </AutoCompleteResultList>
+
+            <AutoCompleteAssistiveHint id={assistiveHintID}>
+              {tAssistiveHint?.()}
+            </AutoCompleteAssistiveHint>
+          </AutoCompleteMultipleInputContainer>
+        ) : (
+          <>
+            <AutoCompleteInput
+              aria-expanded={menuOpen ? 'true' : 'false'}
+              aria-activedescendant={
+                optionFocused ? `${id}__option--${focused}` : ''
+              }
+              aria-owns={`${id}__listbox`}
+              aria-autocomplete={this.hasAutoselect() ? 'both' : 'list'}
+              {...ariaDescribedProp}
+              autoComplete="off"
+              isFocused={componentIsFocused}
+              id={id}
+              onClick={(event) => this.handleInputClick(event)}
+              onBlur={this.handleAutoCompleteBlur}
+              onChange={this.handleInputChange}
+              onFocus={this.handleInputFocus}
+              name={name}
+              placeholder={placeholder}
+              ref={(inputElement) => {
+                this.elementReferences[-1] = inputElement;
               }}
-              className={dropdownArrowClassName}
+              role="combobox"
+              required={required}
+              value={query}
             />
-          ))}
-
-        <AutoCompleteResultList
-          displayMenu={displayMenu}
-          isVisible={menuIsVisible}
-          onMouseLeave={() => this.handleListMouseLeave()}
-          id={`${id}__listbox`}
-          role="listbox"
-        >
-          {options.map((option, index) => {
-            const showFocused =
-              focused === -1 ? selected === index : focused === index;
-            const iosPosinsetHtml = isIosDevice() ? (
-              <span
-                id={`${id}__option-suffix--${index}`}
-                style={{
-                  border: '0',
-                  clip: 'rect(0 0 0 0)',
-                  height: '1px',
-                  marginBottom: '-1px',
-                  marginRight: '-1px',
-                  overflow: 'hidden',
-                  padding: '0',
-                  position: 'absolute',
-                  whiteSpace: 'nowrap',
-                  width: '1px',
-                }}
-              >
-                {index + 1} από {options.length}
-              </span>
-            ) : (
-              ''
-            );
-
-            return (
-              <AutoCompleteResultListItem
-                isFocused={showFocused}
-                isHovered={hovered}
-                index={index}
-                aria-selected={focused === index ? 'true' : 'false'}
-                key={index}
-                onBlur={(event) => this.handleOptionBlur(event, index)}
-                onClick={() => this.handleOptionClick(index)}
-                onMouseDown={this.handleOptionMouseDown}
-                onMouseEnter={() => this.handleOptionMouseEnter(index)}
-                ref={(optionEl) => {
-                  this.elementReferences[index] = optionEl;
-                }}
-                role="option"
-                tabIndex={-1}
-                aria-posinset={index + 1}
-                aria-setsize={options.length}
-              >
-                {this.templateSuggestion(option)} {iosPosinsetHtml}
-              </AutoCompleteResultListItem>
-            );
-          })}
-          {showNoOptionsFound && (
-            <AutoCompleteResultListItem empty>
-              {tNoResults?.()}
-            </AutoCompleteResultListItem>
-          )}
-        </AutoCompleteResultList>
-
-        <AutoCompleteAssistiveHint id={assistiveHintID}>
-          {tAssistiveHint?.()}
-        </AutoCompleteAssistiveHint>
-      </AutoCompleteWrapper>
+            <CaretIcon direction="down" size="md" />
+
+            <AutoCompleteResultList
+              isVisible={menuIsVisible}
+              onMouseLeave={() => this.handleListMouseLeave()}
+              id={`${id}__listbox`}
+              role="listbox"
+            >
+              {showAutoCompleteResultListItems(options, false)}
+              {showNoOptionsFound && (
+                <AutoCompleteResultListItem empty>
+                  {tNoResults?.()}
+                </AutoCompleteResultListItem>
+              )}
+            </AutoCompleteResultList>
+            <AutoCompleteAssistiveHint id={assistiveHintID}>
+              {tAssistiveHint?.()}
+            </AutoCompleteAssistiveHint>
+          </>
+        )}
+      </AutoCompleteContainer>
     );
   }
 }
@@ -657,6 +807,8 @@ export {
   AutoCompleteInputTypeahead,
   AutoCompleteResultList,
   AutoCompleteResultListItem,
-  AutoCompleteWrapper,
+  AutoCompleteContainer,
   AutoCompleteAssistiveHint,
+  AutoCompleteMultipleInputContainer,
+  AutoCompleteMultipleInput,
 };