chore: update Autocomplete filter to be case insensitive (#3019)

* chore: update filter to be case insensitive

* Create grumpy-apricots-sparkle.md

.changeset/grumpy-apricots-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+chore: update Autocomplete filter to be case insensitive

packages/react/src/primitives/Autocomplete/__tests__/Autocomplete.test.tsx

@@ -255,6 +255,21 @@ describe('Autocomplete: ', () => {
     );
   });
 
+  it('should be case insensitive filtering', async () => {
+    render(<Autocomplete label={label} options={options} />);
+
+    const textInput = await screen.findByRole('combobox');
+    userEvent.type(textInput, 'ap');
+    let optionElements = await screen.findAllByRole('option');
+    expect(optionElements).toHaveLength(1);
+    expect(optionElements[0]).toHaveTextContent('apple');
+    userEvent.clear(textInput);
+    userEvent.type(textInput, 'AP');
+    optionElements = await screen.findAllByRole('option');
+    expect(optionElements).toHaveLength(1);
+    expect(optionElements[0]).toHaveTextContent('apple');
+  });
+
   it('should be able to apply custom filtering', async () => {
     const optionFilter = jest.fn();
     render(

packages/react/src/primitives/Autocomplete/useAutocomplete.tsx

@@ -36,7 +36,9 @@ export const useAutocomplete = ({
   const filteredOptions = React.useMemo(() => {
     const defaultFilter = (option: ComboBoxOption) => {
       const { label } = option;
-      return label?.includes(composedValue);
+      return label
+        ?.toLocaleLowerCase()
+        .includes(composedValue?.toLocaleLowerCase());
     };
     const filter = isCustomFiltering
       ? (option: ComboBoxOption) => optionFilter(option, composedValue)

packages/react/src/primitives/HighlightMatch/HighlightMatch.tsx

@@ -12,8 +12,9 @@ export const HighlightMatchPrimitive: Primitive<HighlightMatchProps, 'span'> = (
   ref
 ) => {
   const matchTestId = getTestId(testId, 'match');
-  const startIndex =
-    children?.toLocaleLowerCase().indexOf(query?.toLocaleLowerCase()) ?? -1;
+  const startIndex = children
+    ?.toLocaleLowerCase()
+    .indexOf(query?.toLocaleLowerCase());
 
   if (strHasLength(query) && startIndex !== -1) {
     const match = children.substring(startIndex, startIndex + query.length);