filter with Items' text

example/app.tsx

@@ -30,7 +30,7 @@ const App = () => {
 
   return (
     <Flex justify="center" pt="150px">
-      <AutoComplete rollNavigation>
+      <AutoComplete rollNavigation openOnFocus>
         {({ isOpen }) => (
           <>
             <InputGroup>
@@ -57,7 +57,6 @@ const App = () => {
                   {option}
                 </AutoCompleteItem>
               ))} */}
-
               <AutoCompleteGroup title="Title" showDivider>
                 <AutoCompleteItem key="2" value="Apple">
                   Apple
@@ -66,11 +65,17 @@ const App = () => {
                   Appoint
                 </AutoCompleteItem>
               </AutoCompleteGroup>
-              <AutoCompleteFixedItem value="F1">
-                Fixed Item 1
-              </AutoCompleteFixedItem>
-              <AutoCompleteFixedItem value="F2">
-                Fixed Item 2
+              <AutoCompleteGroup title="Titles" showDivider>
+                <AutoCompleteItem key="2g" value="f2">
+                  Apple
+                </AutoCompleteItem>
+                <AutoCompleteItem key="3g" value="appoin">
+                  Appoint
+                </AutoCompleteItem>
+              </AutoCompleteGroup>
+
+              <AutoCompleteFixedItem value="F3">
+                Fixed Item 3
               </AutoCompleteFixedItem>
             </AutoCompleteList>
           </>

package.json

@@ -70,5 +70,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {}
+  "dependencies": {
+    "react-innertext": "^1.1.5"
+  }
 }

src/helpers/input.ts

@@ -22,7 +22,7 @@ export const useOptionsFilter = (props: AutoCompleteInputProps) => {
   const filteredItems = options
     .filter(
       opt =>
-        opt.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1 ||
+        opt.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1 ||
         opt.value.trim().length === 0 ||
         opt.fixed
     )
@@ -40,7 +40,14 @@ export const useOptionsFilter = (props: AutoCompleteInputProps) => {
 
   useEffect(() => {
     const filterPayload = creatable
-      ? [...filteredItems, creatable && { key: 'newInput', value: inputValue }]
+      ? [
+          ...filteredItems,
+          creatable && {
+            key: 'newInput',
+            value: inputValue,
+            label: inputValue,
+          },
+        ]
       : filteredItems;
     dispatch({ type: ItemAction.SetFiltered, payload: filterPayload });
     dispatch({ type: ItemAction.ResetActive, payload: false });

src/helpers/list.ts

@@ -1,4 +1,6 @@
 import React, { ReactNode, useState } from 'react';
+import innerText from 'react-innertext';
+
 import { State, StoreDispatch } from '../store';
 import { Item } from '../store/reducers/item';
 import { ListAction } from '../store/reducers/list';
@@ -66,6 +68,7 @@ export const getItemKeys: string[] | any = (children: ReactNode) => {
 const getChildProps = (child: any, fixed?: boolean) => ({
   key: child.key || child.props.children.toString(),
   value: child.props.value || '',
+  label: innerText(child.props.children),
   fixed,
 });
 

src/store/reducers/item.ts

@@ -3,6 +3,7 @@ import { ActionMap, State } from '..';
 export interface Item {
   key: string;
   value: string;
+  label: string;
   fixed?: boolean;
 }
 

yarn.lock

@@ -7706,6 +7706,11 @@ react-focus-lock@2.5.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
+react-innertext@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/react-innertext/-/react-innertext-1.1.5.tgz#8147ac54db3f7067d95f49e2d2c05a720d27d8d0"
+  integrity sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==
+
 react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"