diff --git a/docs/src/pages/components/AutoComplete.svx b/docs/src/pages/components/AutoComplete.svx
index 6f5980ab..d8d356b8 100644
--- a/docs/src/pages/components/AutoComplete.svx
+++ b/docs/src/pages/components/AutoComplete.svx
@@ -6,31 +6,29 @@ components: ["AutoComplete", "AutoCompleteSkeleton"]
   import { AutoComplete, AutoCompleteSkeleton, InlineNotification } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 
-  let items = [];
+  let filteredItems = [];
 
-  fetch('https://restcountries.com/v3.1/all?fields=name,ccn3')
-    .then(res => {
-      if (!res.ok) {
-        throw new Error("Failed!");
-      }
-      return res.json();
-    })
-    .then(data => {
-      let _items = [];
-      Object.values(data).forEach(country => {
-        _items.push({ id: country.ccn3, text: country.name.common});
+  function shouldFilterItem(value) {
+    if (!value) return [];
+
+    fetch('https://restcountries.com/v3.1/all?fields=name,ccn3')
+      .then(res => {
+        if (!res.ok) {
+          throw new Error("Failed!");
+        }
+        return res.json();
+      })
+      .then(data => {
+        let _items = [];
+        Object.values(data).forEach(country => {
+          if (country.name.common.startsWith(value)) _items.push({ id: country.ccn3, text: country.name.common});
+        });
+
+        filteredItems = _items;
+      })
+      .catch(err => {
+        console.log(err);
       });
-
-      items = _items;
-
-      return items;
-    })
-    .catch(err => {
-      console.log(err);
-    });
-
-  function filteredItems(value) {
-    return value ? items.filter(country => country.text.startsWith(value)) : [];
   }
 </script>
 
@@ -42,7 +40,7 @@ components: ["AutoComplete", "AutoCompleteSkeleton"]
 
 ### Default
 
-<AutoComplete titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
+<AutoComplete titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
 
 ### Custom slot
 
@@ -52,41 +50,37 @@ Override the default slot to customize the display of each item. Access the item
 
 ### Hidden label
 
-<AutoComplete hideLabel titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
+<AutoComplete hideLabel titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
 
 ### Top direction
 
 Set `direction` to `"top"` for the dropdown menu to appear above the input.
 
-<AutoComplete direction="top" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
+<AutoComplete direction="top" titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
 
 ### Light variant
 
-<AutoComplete light titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
-
-### Inline variant
-
-<AutoComplete type="inline" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
+<AutoComplete light titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
 
 ### Extra-large size
 
-<AutoComplete size="xl" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
+<AutoComplete size="xl" titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
 
 ### Small size
 
-<AutoComplete size="sm" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
+<AutoComplete size="sm" titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
 
 ### Invalid state
 
-<AutoComplete invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
+<AutoComplete invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
 
 ### Warning state
 
-<AutoComplete warn warnText="This contact method is not associated with your account" titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
+<AutoComplete warn warnText="This contact method is not associated with your account" titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
 
 ### Disabled state
 
-<AutoComplete disabled titleText="Contact" selectedId="0" shouldFilterItem="{filteredItems}" />
+<AutoComplete disabled titleText="Contact" selectedId="0" filteredItems="{filteredItems}" shouldFilterItem="{shouldFilterItem}" />
 
 ### Skeleton
 
diff --git a/docs/src/pages/framed/AutoComplete/AutoCompleteSlot.svelte b/docs/src/pages/framed/AutoComplete/AutoCompleteSlot.svelte
index 7058b4e3..e7b92570 100644
--- a/docs/src/pages/framed/AutoComplete/AutoCompleteSlot.svelte
+++ b/docs/src/pages/framed/AutoComplete/AutoCompleteSlot.svelte
@@ -1,40 +1,38 @@
 <script>
   import { AutoComplete } from "carbon-components-svelte";
 
-  let items = [];
+  let filteredItems = [];
 
-  fetch("https://restcountries.com/v3.1/all?fields=name,ccn3")
-    .then((res) => {
-      if (!res.ok) {
-        throw new Error("Failed!");
-      }
-      return res.json();
-    })
-    .then((data) => {
-      let _items = [];
-      Object.values(data).forEach((country) => {
-        _items.push({ id: country.ccn3, text: country.name.common });
+  function shouldFilterItem(value) {
+    if (!value) return [];
+
+    fetch("https://restcountries.com/v3.1/all?fields=name,ccn3")
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error("Failed!");
+        }
+        return res.json();
+      })
+      .then((data) => {
+        let _items = [];
+        Object.values(data).forEach((country) => {
+          if (country.name.common.startsWith(value))
+            _items.push({ id: country.ccn3, text: country.name.common });
+        });
+
+        filteredItems = _items;
+      })
+      .catch((err) => {
+        console.log(err);
       });
-
-      items = _items;
-
-      return items;
-    })
-    .catch((err) => {
-      console.log(err);
-    });
-
-  function filteredItems(value) {
-    return value
-      ? items.filter((country) => country.text.startsWith(value))
-      : [];
   }
 </script>
 
 <AutoComplete
   titleText="Contact"
   selectedId="0"
-  shouldFilterItem="{filteredItems}"
+  filteredItems="{filteredItems}"
+  shouldFilterItem="{shouldFilterItem}"
   let:item
   let:index
 >
diff --git a/src/AutoComplete/AutoComplete.svelte b/src/AutoComplete/AutoComplete.svelte
index 10fa8d9f..ae578655 100644
--- a/src/AutoComplete/AutoComplete.svelte
+++ b/src/AutoComplete/AutoComplete.svelte
@@ -27,9 +27,9 @@
 
   /**
    * Determine if an item should be filtered given the current combobox value
-   * @type {(value: string) => AutoCompleteItem[]}
+   * @type {(value: string) => {}}
    */
-  export let shouldFilterItem = () => [];
+  export let shouldFilterItem = () => {};
 
   /**
    * Specify the direction of the dropdown menu
@@ -113,8 +113,8 @@
 
   const dispatch = createEventDispatcher();
 
-  let filteredItems = [];
-  let inputValue = value;
+  export let filteredItems = [];
+  let inputValue = ""; //value;
   let prevSelectedId = null;
   let highlightedIndex = -1;
 
@@ -146,7 +146,7 @@
   afterUpdate(() => {
     if (open) {
       ref.focus();
-      filteredItems = shouldFilterItem(value);
+      //filteredItems = shouldFilterItem(value);
     } else {
       highlightedIndex = -1;
       filteredItems = [];
@@ -171,7 +171,10 @@
         highlightedIndex = -1;
         highlightedId = undefined;
       } else {
-        selectedItem = filteredItems.find((item) => item.id === selectedId);
+        selectedItem =
+          filteredItems?.length > 0
+            ? filteredItems.find((item) => item.id === selectedId)
+            : null;
       }
       dispatch("select", { selectedId, selectedItem });
     }
@@ -186,8 +189,12 @@
   $: highlightedId = filteredItems[highlightedIndex]
     ? filteredItems[highlightedIndex].id
     : 0;
-  $: filteredItems = shouldFilterItem(value);
-  $: value = inputValue;
+  $: if (inputValue) {
+    shouldFilterItem(inputValue);
+  } else {
+    filteredItems = [];
+  }
+  //$: value = inputValue;
 </script>
 
 <svelte:window