Merge pull request #5085 from Shopify/shauns/12-11-fix_an_error_when_…

…user_enters_in_an_auto_complete

Fix an error when user enters '\' in an auto complete

packages/cli-kit/src/private/node/ui/components/AutocompletePrompt.test.tsx

@@ -530,6 +530,95 @@ describe('AutocompletePrompt', async () => {
     expect(onEnter).toHaveBeenCalledWith('fifth')
   })
 
+  test('allows searching with malformed regex', async () => {
+    const onEnter = vi.fn()
+    const db = [...DATABASE, {label: 'with\\slash', value: 'with\\slash'}]
+
+    const search = async (term: string) => {
+      return {
+        data: db.filter((item) => item.label.includes(term)),
+      }
+    }
+
+    const renderInstance = render(
+      <AutocompletePrompt
+        message="Associate your project with the org Castile Ventures?"
+        choices={db}
+        onSubmit={onEnter}
+        search={search}
+      />,
+    )
+
+    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "?  Associate your project with the org Castile Ventures?   Type to search...
+
+      >  first                                                                        
+         second                                                                       
+         third                                                                        
+         fourth                                                                       
+         fifth                                                                        
+         sixth                                                                        
+         seventh                                                                      
+         eighth                                                                       
+         ninth                                                                        
+         tenth                                                                        
+         eleventh                                                                     
+         twelfth                                                                      
+         thirteenth                                                                   
+         fourteenth                                                                   
+         fifteenth                                                                    
+         sixteenth                                                                    
+         seventeenth                                                                  
+         eighteenth                                                                   
+         nineteenth                                                                   
+         twentieth                                                                    
+         twenty-first                                                                 
+         twenty-second                                                                
+         twenty-third                                                                 
+         twenty-fourth                                                                
+         twenty-fifth                                                                 
+
+         Press ↑↓ arrows to select, enter to confirm.
+      "
+    `)
+
+    await waitForInputsToBeReady()
+    await sendInputAndWaitForContent(renderInstance, 'slash', '\\')
+
+    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "?  Associate your project with the org Castile Ventures?   \\\\█
+
+      >  with\\\\slash
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+         Press ↑↓ arrows to select, enter to confirm.
+      "
+    `)
+  })
+
   test('displays an error message if the search fails', async () => {
     const search = (_term: string) => {
       return Promise.reject(new Error('Something went wrong'))

packages/cli-kit/src/private/node/ui/components/SelectInput.tsx

@@ -45,7 +45,14 @@ function highlightedLabel(label: string, term: string | undefined) {
     return label
   }
 
-  const regex = new RegExp(term, 'i')
+  let regex
+  try {
+    regex = new RegExp(term, 'i')
+    // eslint-disable-next-line no-catch-all/no-catch-all
+  } catch (error) {
+    // term is user provided and could be an invalid regex at that moment (e.g. ending in '\')
+    return label
+  }
   return label.replace(regex, (match) => {
     return chalk.bold(match)
   })