Merge pull request #5393 from EdgeApp/jon/fix/empty-search

Jon/fix/empty-search

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- changed: `WalletListScene` filter mode remains active on empty text
 - changed: (iOS) `SimpleTextInput` back chevron replaced with "Cancel" button
 - added: New Kado OTC provider integration.
 - changed: Improved EdgeCrashEvent reporting with additional metadata, tags, and name/message information.

src/components/scenes/WalletListScene.tsx

@@ -79,7 +79,6 @@ export function WalletListScene(props: Props) {
   })
 
   const handlePressDone = useHandler(() => {
-    setKeepOpen(true)
     setSorting(false)
   })
 

src/components/themed/SearchFooter.tsx

@@ -55,16 +55,8 @@ export const SearchFooter = (props: SearchFooterProps) => {
     onChangeText(text)
   })
 
-  const handleSearchBlur = useHandler(() => {
-    if (searchText === '') {
-      onDoneSearching()
-    }
-  })
-
   const handleSearchClear = useHandler(() => {
-    if (!textInputRef.current?.isFocused()) {
-      onDoneSearching()
-    }
+    onDoneSearching()
   })
 
   const handleSearchFocus = useHandler(() => {
@@ -107,7 +99,7 @@ export const SearchFooter = (props: SearchFooterProps) => {
           placeholder={placeholder}
           onChangeText={handleSearchChangeText}
           value={searchText}
-          onBlur={handleSearchBlur}
+          active={isSearching}
           onClear={handleSearchClear}
           onFocus={handleSearchFocus}
           ref={textInputRef}

src/components/themed/SimpleTextInput.tsx

@@ -52,12 +52,21 @@ export interface SimpleTextInputProps extends MarginRemProps {
   secureTextEntry?: boolean // Defaults to 'false'
   testID?: string
 
-  // Unless 'autoFocus' is passed explicitly in the props, Search Bars 'autoFocus' and 'regular' text inputs don't.
+  /** Unless 'autoFocus' is passed explicitly in the props, Search Bars
+  'autoFocus' and 'regular' text inputs don't. */
   autoFocus?: boolean // Defaults to 'true'
 
-  // Unless 'blurOnClear' is passed explicitly in the props, Search Bars calls 'blur' when cleared and text inputs don't call 'blur' when cleared.
+  /** Unless 'blurOnClear' is passed explicitly in the props, Search Bars calls
+   * 'blur' when cleared and text inputs don't call 'blur' when cleared. */
   blurOnClear?: boolean // Defaults to 'false'
 
+  /**
+   * Manually control whether the input appears selected. This is only a
+   * visual change. It's mutually exclusive with the text input's true
+   * blur/focus state.
+   * */
+  active?: boolean
+
   // Whether the text input is disabled. If 'true', the component will be grayed out.
   disabled?: boolean // Defaults to 'false'
 }
@@ -104,6 +113,7 @@ export const SimpleTextInput = React.forwardRef<SimpleTextInputRef, SimpleTextIn
     maxLength,
     returnKeyType,
     secureTextEntry,
+    active,
     testID,
     ...marginRemProps
   } = props
@@ -154,7 +164,8 @@ export const SimpleTextInput = React.forwardRef<SimpleTextInputRef, SimpleTextIn
   const animationDelay = 0.4 * baseDuration
 
   const handleBlur = useHandler(() => {
-    focusAnimation.value = withDelay(animationDelay, withTiming(0, { duration: baseDuration }))
+    if (active == null) focusAnimation.value = withDelay(animationDelay, withTiming(0, { duration: baseDuration }))
+
     if (onBlur != null) onBlur()
     setIsFocused(false)
   })
@@ -166,7 +177,7 @@ export const SimpleTextInput = React.forwardRef<SimpleTextInputRef, SimpleTextIn
     blur()
   })
   const handleFocus = useHandler(() => {
-    focusAnimation.value = withTiming(1, { duration: baseDuration })
+    if (active == null) focusAnimation.value = withTiming(1, { duration: baseDuration })
     if (onFocus != null) onFocus()
     setIsFocused(true)
   })
@@ -175,7 +186,9 @@ export const SimpleTextInput = React.forwardRef<SimpleTextInputRef, SimpleTextIn
   })
 
   const backIconSize = useDerivedValue(() => (isIos ? 0 : interpolate(focusAnimation.value, [0, 1], [0, themeRem])))
-  const leftIconSize = useDerivedValue(() => (hasIcon ? (hasValue ? 0 : interpolate(focusAnimation.value, [0, 1], [themeRem, 0])) : 0))
+  const leftIconSize = useDerivedValue(() =>
+    hasIcon ? (hasValue && (active == null || !active) ? 0 : interpolate(focusAnimation.value, [0, 1], [themeRem, 0])) : 0
+  )
   const rightIconSize = useDerivedValue(() => (hasValue ? themeRem : focusAnimation.value * themeRem))
 
   const scale = useDerivedValue(() => scaleProp?.value ?? 1)
@@ -187,6 +200,11 @@ export const SimpleTextInput = React.forwardRef<SimpleTextInputRef, SimpleTextIn
     return disabled ? theme.textInputPlaceholderColorDisabled : isFocused ? theme.textInputPlaceholderColorFocused : theme.textInputPlaceholderColor
   }, [disabled, isFocused, theme.textInputPlaceholderColor, theme.textInputPlaceholderColorDisabled, theme.textInputPlaceholderColorFocused])
 
+  React.useEffect(() => {
+    if (active == null) return
+    focusAnimation.value = active ? withTiming(1, { duration: baseDuration }) : withDelay(animationDelay, withTiming(0, { duration: baseDuration }))
+  }, [active, focusAnimation, baseDuration, animationDelay])
+
   return (
     <ContainerView marginRemProps={marginRemProps}>
       <EdgeTouchableWithoutFeedback accessible={false} testID={testID} onPress={() => focus()}>
@@ -236,14 +254,14 @@ export const SimpleTextInput = React.forwardRef<SimpleTextInputRef, SimpleTextIn
           </TouchContainer>
         </InputContainerView>
       </EdgeTouchableWithoutFeedback>
-      {isIos && isFocused && (
-        <TouchContainer hitSlop={theme.rem(0.75)} accessible onPress={handleDonePress} testID={`${testID}.cancelButton`}>
+      {isIos && (isFocused || active === true) && (
+        <TouchableOpacity accessible onPress={handleDonePress} testID={`${testID}.cancelButton`}>
           <CancelButton>
             <CancelText numberOfLines={1} ellipsizeMode="clip">
               {lstrings.string_cancel_cap}
             </CancelText>
           </CancelButton>
-        </TouchContainer>
+        </TouchableOpacity>
       )}
     </ContainerView>
   )