Disable autocomplete of input field inside RmgAutoComplete

railmapgen · Jan 6, 2024 · 52f8763 · 52f8763
1 parent 597fa6c
commit 52f8763
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/rmg-auto-complete/rmg-auto-complete.test.tsx b/src/rmg-auto-complete/rmg-auto-complete.test.tsx
@@ -1,6 +1,6 @@
 import { render } from '../test-utils';
 import RmgAutoComplete from './rmg-auto-complete';
-import { act, fireEvent, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
 const mockData = [

diff --git a/src/rmg-auto-complete/rmg-auto-complete.tsx b/src/rmg-auto-complete/rmg-auto-complete.tsx
@@ -1,23 +1,31 @@
 import {
     AutoComplete,
     AutoCompleteInput,
+    AutoCompleteInputProps,
     AutoCompleteItem,
+    AutoCompleteItemProps,
     AutoCompleteList,
+    AutoCompleteListProps,
+    AutoCompleteProps,
     Item,
 } from '@choc-ui/chakra-autocomplete';
 import { ReactElement } from 'react';
 
-interface RmgAutoCompleteProps<T> {
+interface RmgAutoCompleteProps<T> extends Omit<AutoCompleteProps, 'children'> {
     data: T[];
     displayValue: (item: T) => string;
     displayHandler?: (item: T) => ReactElement | string | number;
     filter?: (query: string, item: T) => boolean;
     value?: T;
     onChange?: (item: T) => void;
+    InputProps?: AutoCompleteInputProps;
+    ListProps?: AutoCompleteListProps;
+    ItemProps?: AutoCompleteItemProps;
 }
 
 export default function RmgAutoComplete<T extends { id: string }>(props: RmgAutoCompleteProps<T>) {
-    const { data, displayValue, displayHandler, filter, value, onChange } = props;
+    const { data, displayValue, displayHandler, filter, value, onChange, InputProps, ListProps, ItemProps, ...others } =
+        props;
 
     const handleFilter = (query: string, optionValue: string) => {
         if (!filter) return undefined;
@@ -32,9 +40,10 @@ export default function RmgAutoComplete<T extends { id: string }>(props: RmgAuto
             onChange={(_: string, item: Item) => onChange?.(item.originalValue)}
             suggestWhenEmpty
             openOnFocus
+            {...others}
         >
-            <AutoCompleteInput variant="flushed" size="sm" h={6} />
-            <AutoCompleteList role="menu" py={1}>
+            <AutoCompleteInput variant="flushed" size="sm" h={6} autoComplete="off" {...InputProps} />
+            <AutoCompleteList role="menu" py={1} {...ListProps}>
                 {data.map(item => {
                     const label = displayValue(item);
                     return (
@@ -46,6 +55,7 @@ export default function RmgAutoComplete<T extends { id: string }>(props: RmgAuto
                             fontSize="sm"
                             p={1}
                             mx={1}
+                            {...ItemProps}
                         >
                             {displayHandler ? displayHandler(item) : label}
                         </AutoCompleteItem>