fix(ui): handle RegExp input for filters

Author: ph-fritsche

src/ui/cli/FilterSuites.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Box, Text } from 'ink'
 import { useTester } from '../TesterContext'
 import { useSubscribers } from './useSubscribers'
@@ -23,21 +23,34 @@ export function FilterSuitesValue() {
 export function FilterSuitesInput() {
     const tester = useTester()
     useSubscribers([
-        r => tester.addListener('option', e => {
+        () => tester.addListener('option', e => {
             if (e.key === 'filterSuites') {
-                r()
+                setFilter(e.value)
             }
         }),
     ], [tester])
 
     const { navigate } = useRouter()
 
+    const [filter, setFilter] = useState(tester.filterSuites.get())
     const input = useStringInput(getRegexpSource(tester.filterSuites.get()), {
-        onChange: (v: string) => tester.filterSuites.set(v ? new RegExp(v, 'i') : undefined),
+        onInput: v => {
+            try {
+                setFilter(setRegexpSource(v))
+            } catch {
+                //
+            }
+        },
+        onChange: v => {
+            try {
+                tester.filterSuites.set(setRegexpSource(v))
+            } catch {
+                return false
+            }
+        },
         onEscape: () => navigate('/'),
     })
 
-    const filter = input.value ? new RegExp(input.value, 'i') : undefined
     return <Box
         justifyContent="space-between"
         flexWrap="wrap"
@@ -79,5 +92,9 @@ export function FilterSuitesInput() {
 }
 
 function getRegexpSource(r: RegExp | undefined) {
-    return r?.source.replaceAll(/\\(.)/g, '$1') ?? ''
+    return r?.source.replaceAll('\\/', '/') ?? ''
+}
+
+function setRegexpSource(s: string) {
+    return s ? new RegExp(s.replaceAll('/', '\\/')) : undefined
 }

src/ui/cli/FilterTests.tsx

@@ -33,7 +33,13 @@ export function FilterTestsInput() {
     const { navigate } = useRouter()
 
     const input = useStringInput(getRegexpSource(tester.filterTests.get()), {
-        onChange: (v: string) => tester.filterTests.set(v ? new RegExp(v, 'i') : undefined),
+        onChange: v => {
+            try {
+                tester.filterTests.set(setRegexpSource(v))
+            } catch {
+                return false
+            }
+        },
         onEscape: () => navigate('/'),
     })
 
@@ -71,3 +77,7 @@ export function FilterTestsInput() {
 function getRegexpSource(r: RegExp | undefined) {
     return r?.source.replaceAll(/\\(.)/g, '$1') ?? ''
 }
+
+function setRegexpSource(s: string) {
+    return s ? new RegExp(s.replaceAll('/', '\\/')) : undefined
+}

src/ui/cli/Input.tsx

@@ -11,7 +11,7 @@ export function useStringInput(
         onEscape,
         isFocused = true,
     }: {
-        onChange: (s: string) => void
+        onChange: (s: string) => void|boolean
         onInput?: (s: string) => void
         onReset?: (s: string) => void
         onEscape?: () => void
@@ -41,9 +41,12 @@ export function useStringInput(
             }
         } else if (key.return) {
             if (value !== initialValue) {
-                onChange(value)
+                if (onChange(value) !== false) {
+                    onEscape?.()
+                }
+            } else {
+                onEscape?.()
             }
-            onEscape?.()
         } else if (key.shift && (key.backspace || key.delete)) {
             set({ value: '', pos: 0 })
             onInput?.('')