@stack-spot/citric-react 0.42.0-beta.0 → 0.43.0

package/src/components/{Autocomplete/Autocomplete.tsx → Autocomplete.tsx}

@@ -1,16 +1,36 @@
 import { ColorPaletteName, ColorSchemeName, listToClass } from '@stack-spot/portal-theme'
 import { useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { applyCSSVariable } from '../../utils/css'
-import { defaultRenderKey, defaultRenderLabel } from '../../utils/options'
-import { withRef } from '../../utils/react'
-import { Badge } from '../Badge'
-import { Checkbox } from '../Checkbox'
-import { CitricComponent } from '../CitricComponent'
-import { IconButton } from '../IconBox'
-import { ProgressCircular } from '../ProgressCircular'
-import { useDisabledEffect, useFocusEffect } from '../Select/hooks'
-import { Row } from '../layout'
+import { applyCSSVariable } from '../utils/css'
+import { defaultRenderKey, defaultRenderLabel } from '../utils/options'
+import { withRef } from '../utils/react'
+import { Badge } from './Badge'
+import { Checkbox } from './Checkbox'
+import { CitricComponent } from './CitricComponent'
+import { IconButton } from './IconBox'
+import { ProgressCircular } from './ProgressCircular'
+import { useDisabledEffect, useFocusEffect } from './Select/hooks'
+import { Row } from './layout'
+
+export interface CustomSelectedTagsConfig {
+  /**
+   * Color scheme for the tags (badges).
+   */
+  colorScheme?: ColorSchemeName,
+  /**
+   * Color palette for the tags (badges).
+   */
+  colorPalette?: ColorPaletteName,
+  /**
+   * Appearance of the tags (badges).
+   * @default 'circle'
+   */
+  appearance?: 'square' | 'circle',
+  /**
+   * Maximum number of tags to show before displaying "+N more".
+   */
+  maxItems?: number,
+}
 
 export interface BaseAutocompleteProps<T, Multiple extends boolean = false> {
   /**
@@ -19,14 +39,37 @@ export interface BaseAutocompleteProps<T, Multiple extends boolean = false> {
   options: T[],
   /**
    * The current value(s) selected.
-   * - Single selection: T | null
+   * - Single selection: T | undefined
    * - Multiple selection: T[]
    */
-  value: Multiple extends true ? T[] : (T | null),
+  value: Multiple extends true ? T[] : (T | undefined),
   /**
-   * Callback fired when the value changes.
+   * Callback fired when the value changes (user selects/removes an option).
+   * This is the main callback for getting the final selected value(s).
+   * 
+   * @example
+   * ```tsx
+   * // Single selection
+   * <Autocomplete
+   *   value={user}
+   *   onChange={(selectedUser) => {
+   *     console.log('Selected:', selectedUser)
+   *     setUser(selectedUser)
+   *   }}
+   * />
+   * 
+   * // Multiple selection
+   * <Autocomplete
+   *   multiple
+   *   value={selectedUsers}
+   *   onChange={(users) => {
+   *     console.log('Selected users:', users)
+   *     setSelectedUsers(users)
+   *   }}
+   * />
+   * ```
    */
-  onChange: Multiple extends true ? (value: T[]) => void : (value: T | null) => void,
+  onChange: Multiple extends true ? (value: T[]) => void : (value: T | undefined) => void,
   /**
    * If true, enables multiple selection mode.
    * @default false
@@ -50,20 +93,70 @@ export interface BaseAutocompleteProps<T, Multiple extends boolean = false> {
   onCreate?: (inputValue: string) => void,
   /**
    * Function to create a new option object from the input value.
-   * Required when creatable is true without onCreate and working with objects.
+   * Used when creatable is true and onCreate is NOT defined.
+   * Allows automatic option creation on Enter key.
+   * 
+   * Note: This prop has no effect when onCreate is defined, as onCreate takes precedence.
+   * 
+   * @param inputValue - The text typed by the user
+   * @returns A new option object
    * 
    * @example
    * ```tsx
-   * getOptionFromInput={(inputValue) => ({ id: Date.now(), name: inputValue })}
+   * // Auto-create tags on Enter
+   * <Autocomplete
+   *   multiple
+   *   creatable
+   *   freeSolo
+   *   getOptionFromInput={(text) => ({
+   *     id: Date.now(),
+   *     name: text,
+   *     isCustom: true
+   *   })}
+   * />
    * ```
    */
   getOptionFromInput?: (inputValue: string) => T,
   /**
-   * The input value (controlled).
+   * The input value (controlled mode).
+   * Use this when you need full control over the input text.
+   * Usually used with onInputChange for controlled components.
+   * 
+   * @example
+   * ```tsx
+   * const [inputValue, setInputValue] = useState('')
+   * 
+   * <Autocomplete
+   *   inputValue={inputValue}
+   *   onInputChange={setInputValue}
+   *   options={options}
+   * />
+   * ```
    */
   inputValue?: string,
   /**
-   * Callback fired when the input value changes.
+   * Callback fired when the input text changes (user types).
+   * Use this to control the input value or perform side effects like API calls.
+   * Different from onChange which fires when an option is selected.
+   * 
+   * @param value - The current text in the input field
+   * 
+   * @example
+   * ```tsx
+   * // Debounced API search
+   * <Autocomplete
+   *   onInputChange={(text) => {
+   *     console.log('User typed:', text)
+   *     debouncedSearch(text)
+   *   }}
+   * />
+   * 
+   * // Controlled input
+   * <Autocomplete
+   *   inputValue={inputValue}
+   *   onInputChange={(text) => setInputValue(text.toUpperCase())}
+   * />
+   * ```
    */
   onInputChange?: (value: string) => void,
   /**
@@ -74,18 +167,76 @@ export interface BaseAutocompleteProps<T, Multiple extends boolean = false> {
   /**
    * A function to generate a unique key for each option.
    */
-  renderKey?: (option: T) => string | number,
+  renderKey?: (option: T) => string | number | undefined,
   /**
    * A function to render an option in the dropdown.
    */
   renderOption?: (option: T) => React.ReactNode,
   /**
-   * A function to render a tag in multiple mode.
+   * Custom function to render the selected values display area in multiple mode.
+   * When defined, gives you full control over how selected values are displayed.
+   * The customSelectedTags prop has no effect when this is defined.
+   * 
+   * @param values - Array of selected options
+   * @param onRemove - Function to call when user wants to remove an option
+   * @returns React element to display selected values
+   * 
+   * @example
+   * ```tsx
+   * <Autocomplete
+   *   multiple
+   *   renderSelected={(values, onRemove) => (
+   *     <div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
+   *       {values.map(user => (
+   *         <div key={user.id} style={{ background: '#e3f2fd', padding: '4px 8px', borderRadius: '12px' }}>
+   *           <Avatar src={user.avatar} size="xs" />
+   *           {user.name}
+   *           <button onClick={() => onRemove(user)}>×</button>
+   *         </div>
+   *       ))}
+   *     </div>
+   *   )}
+   * />
+   * ```
+   */
+  renderSelected?: (values: T[], onRemove: (option: T) => void) => React.ReactElement,
+  /**
+   * Configuration for the default selected tags appearance in multiple mode.
+   * Has no effect when renderSelected is defined.
+   * 
+   * @example
+   * ```tsx
+   * <Autocomplete
+   *   multiple
+   *   customSelectedTags={{
+   *     colorScheme: 'primary',
+   *     appearance: 'square',
+   *     maxItems: 3
+   *   }}
+   * />
+   * ```
    */
-  renderTag?: (option: T, onRemove: () => void) => React.ReactNode,
+  customSelectedTags?: CustomSelectedTagsConfig,
   /**
    * Custom filter function for options.
-   * @default filters by label includes input (case insensitive)
+   * When not set, the filter will use the text returned by renderLabel (case-insensitive includes).
+   * 
+   * @param options - The full list of options
+   * @param inputValue - The current input text
+   * @returns Filtered array of options
+   * 
+   * @example
+   * ```tsx
+   * // Search by name OR email
+   * <Autocomplete
+   *   filterOptions={(options, input) =>
+   *     options.filter(user =>
+   *       user.name.toLowerCase().includes(input.toLowerCase()) ||
+   *       user.email.toLowerCase().includes(input.toLowerCase())
+   *     )
+   *   }
+   * />
+   * ```
    */
   filterOptions?: (options: T[], inputValue: string) => T[],
   /**
@@ -106,11 +257,6 @@ export interface BaseAutocompleteProps<T, Multiple extends boolean = false> {
    * Maximum height for the dropdown panel in pixels.
    */
   maxHeight?: number,
-  /**
-   * Maximum number of tags to show before truncating.
-   * Only applies when multiple is true.
-   */
-  maxTagsToShow?: number,
   /**
    * If true, automatically highlights the first option.
    * @default false
@@ -119,7 +265,30 @@ export interface BaseAutocompleteProps<T, Multiple extends boolean = false> {
   /**
    * If true, clears the input value when an option is selected.
    * Only applies when multiple is true.
-   * @default true (for multiple)
+   * When false, the input keeps the text after selection, useful for adding multiple similar items quickly.
+   * 
+   * Note: Adding multiple tags with similar prefixes when clearOnSelect={false}, you can select "React", 
+   * then easily select "React Native" 
+   * without retyping "React" from scratch
+   * @default true (for multiple mode)
+   * 
+   * @example
+   * ```tsx
+   * // Clear input after each selection (default)
+   * <Autocomplete multiple clearOnSelect />
+   * 
+   * // Keep input text after selection
+   * const [tags, setTags] = useState<Tag[]>([])
+   * 
+   * <Autocomplete
+   *   multiple
+   *   clearOnSelect={false}
+   *   value={tags}
+   *   onChange={setTags}
+   *   options={availableTags}
+   *   renderLabel={tag => tag.name}
+   * />
+   * ```
    */
   clearOnSelect?: boolean,
   /**
@@ -127,10 +296,6 @@ export interface BaseAutocompleteProps<T, Multiple extends boolean = false> {
    * @default true
    */
   openOnFocus?: boolean,
-  /**
-   * Callback fired when an option is selected (before onChange).
-   */
-  onSelect?: (option: T | null) => void,
   /**
    * Text to display when no options are available.
    */
@@ -159,24 +324,19 @@ export interface BaseAutocompleteProps<T, Multiple extends boolean = false> {
    */
   scrollEndMargin?: number,
   /**
-   * Color scheme for the tags (badges) in multiple mode.
-   * @example 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
+   * Color scheme for the autocomplete component.
+   * Applies the theme's color scheme to the component root.
    */
-  tagColorScheme?: ColorSchemeName,
+  colorScheme?: ColorSchemeName,
   /**
-   * Color palette for the tags (badges) in multiple mode.
-   * @example 'blue' | 'green' | 'red' | 'yellow' | 'purple'
-   */
-  tagColorPalette?: ColorPaletteName,
-  /**
-   * Appearance of the tags (badges) in multiple mode.
-   * @default 'circle'
+   * The id attribute for the input element.
+   * Useful for associating with a label element.
    */
-  tagAppearance?: 'square' | 'circle',
+  id?: string,
 }
 
 export type AutocompleteProps<T, Multiple extends boolean = false> =
-  Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange' | 'onSelect'> &
+  Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange'> &
   BaseAutocompleteProps<T, Multiple>
 
 /**
@@ -239,24 +399,22 @@ export const Autocomplete = withRef(
     renderLabel = defaultRenderLabel,
     renderKey = defaultRenderKey as (option: T) => string | number,
     renderOption,
-    renderTag,
+    renderSelected,
+    customSelectedTags,
     filterOptions,
     loading = false,
     disabled = false,
     placeholder,
     maxHeight,
-    maxTagsToShow,
     autoHighlight = false,
     clearOnSelect = multiple,
     openOnFocus = true,
-    onSelect,
     noOptionsText,
     loadingText,
     onScrollEnd,
     scrollEndMargin = 200,
-    tagColorScheme,
-    tagColorPalette,
-    tagAppearance = 'circle',
+    colorScheme,
+    id,
     style,
     className,
     ...props
@@ -265,6 +423,7 @@ export const Autocomplete = withRef(
     const _element = useRef<HTMLDivElement | null>(null)
     const inputRef = useRef<HTMLInputElement | null>(null)
     const dropdownRef = useRef<HTMLDivElement | null>(null)
+    const isNavigatingWithKeyboard = useRef(false)
     const element = (ref as React.RefObject<HTMLDivElement>) ?? _element
 
     const [open, setOpen] = useState(false)
@@ -306,13 +465,18 @@ export const Autocomplete = withRef(
     const defaultFilter = useCallback((opts: T[], input: string) => {
       if (!input) return opts
       return opts.filter(option =>
-        renderLabel(option).toLowerCase().includes(input.toLowerCase()),
+        renderLabel(option)?.toLowerCase()?.includes(input?.toLowerCase()),
       )
     }, [renderLabel])
 
     const filter = filterOptions ?? defaultFilter
 
-    const filteredOptions = useMemo(() => filter(options, inputValue), [options, inputValue, filter])
+    const filteredOptions = useMemo(() => {
+      if (!multiple && value && renderLabel(value as T) === inputValue) {
+        return options
+      }
+      return filter(options, inputValue)
+    }, [options, inputValue, filter, multiple, value, renderLabel])
 
     const showCreateOption = useMemo(() => {
       if (!creatable || !onCreate || !inputValue.trim()) return false
@@ -343,8 +507,6 @@ export const Autocomplete = withRef(
     }, [value, multiple, renderKey])
 
     const handleSelect = useCallback((option: T) => {
-      if (onSelect) onSelect(option)
-
       if (multiple) {
         const currentValue = value as T[]
         const isAlreadySelected = currentValue.some(v => renderKey(v) === renderKey(option))
@@ -364,7 +526,7 @@ export const Autocomplete = withRef(
         setInputValue(renderLabel(option))
         setOpen(false)
       }
-    }, [multiple, value, onChange, renderKey, renderLabel, clearOnSelect, setInputValue, onSelect])
+    }, [multiple, value, onChange, renderKey, clearOnSelect, setInputValue, renderLabel])
 
     const handleRemoveTag = useCallback((optionToRemove: T) => {
       if (!multiple) return
@@ -384,6 +546,10 @@ export const Autocomplete = withRef(
       setFocused(true)
       if (openOnFocus) {
         setOpen(true)
+        
+        if (autoHighlight && filteredOptions.length > 0) {
+          setHighlightedIndex(0)
+        }
       }
     }
 
@@ -411,17 +577,114 @@ export const Autocomplete = withRef(
             handleSelect(exactMatch)
           }
         }
+      } else if (!multiple && inputValue) {
+        const exactMatch = options.find(o =>
+          renderLabel(o).toLowerCase() === inputValue.toLowerCase(),
+        )
+        
+        if (exactMatch) {
+          handleSelect(exactMatch)
+        } else {
+          if (value) {
+            setInputValue(renderLabel(value as T))
+          } else {
+            setInputValue('')
+          }
+        }
       }
     }
 
+    const handleCreateNewOption = useCallback(() => {
+      if (!inputValue.trim()) return false
+
+      if (onCreate) {
+        handleCreate()
+        return true
+      }
+
+      if (freeSolo && getOptionFromInput) {
+        const newOption = getOptionFromInput(inputValue.trim())
+        if (multiple) {
+          const currentValue = value as T[]
+          const isDuplicate = currentValue.some(v => renderKey(v) === renderKey(newOption))
+          if (!isDuplicate) {
+            (onChange as (value: T[]) => void)([...currentValue, newOption])
+          }
+          setInputValue('')
+        } else {
+          (onChange as (value: T | null) => void)(newOption)
+          setInputValue(renderLabel(newOption))
+          setOpen(false)
+        }
+        return true
+      }
+
+      if (freeSolo) {
+        if (multiple) {
+          const currentValue = value as T[]
+          const inputAsOption = inputValue as unknown as T
+          const isDuplicate = currentValue.some(v => renderLabel(v).toLowerCase() === inputValue.toLowerCase())
+          if (!isDuplicate) {
+            (onChange as (value: T[]) => void)([...currentValue, inputAsOption])
+          }
+          setInputValue('')
+        } else {
+          (onChange as (value: T | null) => void)(inputValue as unknown as T)
+          setOpen(false)
+        }
+        return true
+      }
+
+      return false
+    }, [onCreate, handleCreate, freeSolo, getOptionFromInput, inputValue, multiple, value, renderKey, onChange, setInputValue, renderLabel])
+
+    const handleEnterKey = useCallback(() => {
+      if (open && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+        handleSelect(filteredOptions[highlightedIndex])
+        return
+      }
+
+      if (!open && filteredOptions.length === 1) {
+        handleSelect(filteredOptions[0])
+        return
+      }
+
+      if (creatable && handleCreateNewOption()) {
+        return
+      }
+
+      if (freeSolo && inputValue && !multiple) {
+        const exactMatch = options.find(o =>
+          renderLabel(o).toLowerCase() === inputValue.toLowerCase(),
+        )
+        if (exactMatch) {
+          handleSelect(exactMatch)
+        }
+      }
+    }, [
+      open,
+      highlightedIndex,
+      filteredOptions,
+      handleSelect,
+      creatable,
+      handleCreateNewOption,
+      freeSolo,
+      inputValue,
+      multiple,
+      options,
+      renderLabel,
+    ])
+
     const handleKeyDown = (e: React.KeyboardEvent) => {
       if (disabled) return
 
       switch (e.key) {
         case 'ArrowDown':
           e.preventDefault()
+          isNavigatingWithKeyboard.current = true
           if (!open) {
             setOpen(true)
+            setHighlightedIndex(0)
           } else {
             setHighlightedIndex(prev =>
               prev < filteredOptions.length - 1 ? prev + 1 : prev,
@@ -431,6 +694,7 @@ export const Autocomplete = withRef(
 
         case 'ArrowUp':
           e.preventDefault()
+          isNavigatingWithKeyboard.current = true
           if (open) {
             setHighlightedIndex(prev => prev > 0 ? prev - 1 : 0)
           }
@@ -438,47 +702,7 @@ export const Autocomplete = withRef(
 
         case 'Enter':
           e.preventDefault()
-          if (open && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
-            handleSelect(filteredOptions[highlightedIndex])
-          } else if (creatable && inputValue.trim()) {
-            if (onCreate) {
-              handleCreate()
-            } else if (freeSolo && getOptionFromInput) {
-              const newOption = getOptionFromInput(inputValue.trim())
-              if (multiple) {
-                const currentValue = value as T[]
-                const isDuplicate = currentValue.some(v => renderKey(v) === renderKey(newOption))
-                if (!isDuplicate) {
-                  (onChange as (value: T[]) => void)([...currentValue, newOption])
-                }
-                setInputValue('')
-              } else {
-                (onChange as (value: T | null) => void)(newOption)
-                setInputValue(renderLabel(newOption))
-                setOpen(false)
-              }
-            } else if (freeSolo) {
-              if (multiple) {
-                const currentValue = value as T[]
-                const inputAsOption = inputValue as unknown as T
-                const isDuplicate = currentValue.some(v => renderLabel(v).toLowerCase() === inputValue.toLowerCase())
-                if (!isDuplicate) {
-                  (onChange as (value: T[]) => void)([...currentValue, inputAsOption])
-                }
-                setInputValue('')
-              } else {
-                (onChange as (value: T | null) => void)(inputValue as unknown as T)
-                setOpen(false)
-              }
-            }
-          } else if (freeSolo && inputValue && !multiple) {
-            const exactMatch = options.find(o =>
-              renderLabel(o).toLowerCase() === inputValue.toLowerCase(),
-            )
-            if (exactMatch) {
-              handleSelect(exactMatch)
-            }
-          }
+          handleEnterKey()
           break
 
         case 'Escape':
@@ -493,6 +717,8 @@ export const Autocomplete = withRef(
           if (multiple && !inputValue && (value as T[]).length > 0) {
             const lastTag = (value as T[])[(value as T[]).length - 1]
             handleRemoveTag(lastTag)
+          } else if (!multiple && !inputValue && value) {
+            (onChange as (value: T | null) => void)(null)
           }
           break
 
@@ -513,17 +739,14 @@ export const Autocomplete = withRef(
       }
     }
 
-    useEffect(() => {
-      if (!multiple && value && !focused) {
-        setInternalInputValue(renderLabel(value as T))
-      }
-    }, [value, multiple, renderLabel, focused])
-
-    useEffect(() => {
-      if (autoHighlight && open && filteredOptions.length > 0) {
-        setHighlightedIndex(0)
+    const handleFocusAndOpen = () => {
+      if (disabled) return
+      setFocused(true)
+      inputRef.current?.focus()
+      if (openOnFocus) {
+        setOpen(true)
       }
-    }, [autoHighlight, open, filteredOptions.length])
+    }
 
     useEffect(() => {
       if (highlightedIndex < 0 || !open) return
@@ -574,50 +797,53 @@ export const Autocomplete = withRef(
       if (!multiple || (value as T[]).length === 0) return null
 
       const tags = value as T[]
-      const visibleTags = maxTagsToShow && tags.length > maxTagsToShow
-        ? tags.slice(0, maxTagsToShow)
+
+      if (renderSelected) {
+        return renderSelected(tags, handleRemoveTag)
+      }
+
+      const config = customSelectedTags || {}
+      const maxItems = config.maxItems
+      const visibleTags = maxItems && tags.length > maxItems
+        ? tags.slice(0, maxItems)
         : tags
-      const remainingCount = maxTagsToShow && tags.length > maxTagsToShow
-        ? tags.length - maxTagsToShow
+      const remainingCount = maxItems && tags.length > maxItems
+        ? tags.length - maxItems
         : 0
 
       return (
         <>
-          {visibleTags.map(tag => {
-            if (renderTag) {
-              return renderTag(tag, () => handleRemoveTag(tag))
-            }
-            return (
-              <Badge 
-                key={renderKey(tag)}
-                colorScheme={tagColorScheme}
-                colorPalette={tagColorPalette}
-                appearance={tagAppearance}
-              >
-                {renderLabel(tag)}
-                {!disabled && (
-                  <IconButton
-                    icon="Times"
-                    type="button"
-                    appearance="none"
-                    size="xs"
-                    style={{ color: 'inherit' }}
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      if (!disabled) handleRemoveTag(tag)
-                    }}
-                    aria-label={`${t.removeTag} ${renderLabel(tag)}`}
-                    disabled={disabled}
-                    tabIndex={0}
-                  />)}
-              </Badge>
-            )
-          })}
+          {visibleTags.map(tag => (
+            <Badge
+              key={renderKey(tag)}
+              colorScheme={config.colorScheme}
+              colorPalette={config.colorPalette}
+              appearance={config.appearance || 'circle'}
+            >
+              {renderLabel(tag)}
+              {!disabled && (
+                <IconButton
+                  icon="Times"
+                  type="button"
+                  appearance="none"
+                  size="xs"
+                  style={{ color: 'inherit' }}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (!disabled) handleRemoveTag(tag)
+                  }}
+                  aria-label={`${t.removeTag} ${renderLabel(tag)}`}
+                  disabled={disabled}
+                  tabIndex={0}
+                />
+              )}
+            </Badge>
+          ))}
           {remainingCount > 0 && (
             <Badge
-              colorScheme={tagColorScheme}
-              colorPalette={tagColorPalette}
-              appearance={tagAppearance}
+              colorScheme={config.colorScheme}
+              colorPalette={config.colorPalette}
+              appearance={config.appearance || 'circle'}
             >
               +{remainingCount}
             </Badge>
@@ -635,7 +861,7 @@ export const Autocomplete = withRef(
       <CitricComponent
         tag="div"
         component="autocomplete"
-        data-citric="autocomplete"
+        colorScheme={colorScheme}
         style={maxHeight ? applyCSSVariable(style, 'max-height', `${maxHeight}px`) : style}
         className={listToClass([
           className,
@@ -649,29 +875,24 @@ export const Autocomplete = withRef(
         {...props}
       >
         <header
-          onClick={() => {
-            if (disabled) return
-            setFocused(true)
-            setOpen(true)
-            if (inputRef.current) {
-              inputRef.current.focus()
-            }
-          }}
-          onFocus={() => setFocused(true)}
           tabIndex={disabled ? undefined : 0}
+          onClick={handleFocusAndOpen}
+          onFocus={handleFocusAndOpen}
+          onKeyDown={handleKeyDown}
         >
           <Row gap="4px" className="input-container">
             {multiple && renderTags()}
             <input
               ref={inputRef}
+              id={id}
               type="text"
               value={inputValue}
               onChange={(e) => handleInputChange(e.target.value)}
               onFocus={handleFocus}
               onBlur={handleBlur}
-              onKeyDown={handleKeyDown}
               disabled={disabled}
-              placeholder={multiple && (value as T[]).length > 0 ? '' : placeholder}
+              placeholder={(multiple && (value as T[]).length > 0) ? '' : placeholder}
+              tabIndex={disabled ? undefined : 0}
               autoComplete="off"
               aria-autocomplete="list"
               aria-expanded={open}
@@ -688,11 +909,19 @@ export const Autocomplete = withRef(
                 type="button"
                 onClick={(e) => {
                   e.stopPropagation()
+                  e.preventDefault()
                   handleClear()
                 }}
+                onMouseDown={(e) => {
+                  e.stopPropagation()
+                  e.preventDefault()
+                }}
+                onFocus={(e) => {
+                  e.stopPropagation()
+                }}
                 disabled={disabled}
                 aria-label={t.clear}
-                tabIndex={1}
+                tabIndex={0}
                 style={{ width: '12px', height: '12px' }}
               />
             )}
@@ -703,11 +932,19 @@ export const Autocomplete = withRef(
               type="button"
               onClick={(e) => {
                 e.stopPropagation()
+                e.preventDefault()
                 setOpen((prev) => !prev)
               }}
+              onMouseDown={(e) => {
+                e.stopPropagation()
+                e.preventDefault()
+              }}
+              onFocus={(e) => {
+                e.stopPropagation()
+              }}
               disabled={disabled}
               aria-label={open ? t.collapse : t.expand}
-              tabIndex={1}
+              tabIndex={0}
               style={{ width: '12px', height: '12px' }}
             />
           </div>
@@ -719,11 +956,14 @@ export const Autocomplete = withRef(
           id="autocomplete-listbox"
           role="listbox"
           aria-hidden={!open}
+          onMouseMove={() => {
+            isNavigatingWithKeyboard.current = false
+          }}
           {...(open ? {} : { inert: 'true' })}
         >
           {loading && !filteredOptions.length ? (
             <div className="message">{loadingText || t.loading}</div>
-          ) : filteredOptions.length === 0 && !showCreateOption ? (
+          ) : filteredOptions.length === 0 && !showCreateOption && !freeSolo ? (
             <div className="message">{noOptionsText || t.noOptions}</div>
           ) : (
             <div className="options">
@@ -756,7 +996,11 @@ export const Autocomplete = withRef(
                     e.preventDefault()
                   }}
                   onClick={() => handleSelect(option)}
-                  onMouseEnter={() => setHighlightedIndex(index)}
+                  onMouseEnter={() => {
+                    if (!isNavigatingWithKeyboard.current) {
+                      setHighlightedIndex(index)
+                    }
+                  }}
                 >
                   {multiple && <Checkbox value={isSelected(option)} readOnly />}
                   {renderOption ? renderOption(option) : renderLabel(option)}