Add a button to clear the search barimplement-floating-search-field-ios-1353

2 files changed, 13 insertions, 0 deletions

diff --git a/ios/Assets/Localizable.xcstrings b/ios/Assets/Localizable.xcstrings
index 243f8c1fc3..fcc80197fe 100644
--- a/ios/Assets/Localizable.xcstrings
+++ b/ios/Assets/Localizable.xcstrings
@@ -12743,6 +12743,10 @@
         }
       }
     },
+    "Clear search" : {
+      "comment" : "A label for a button that clears text from a search field.",
+      "isCommentAutoGenerated" : true
+    },
     "Clearing the imported overrides changes the server IPs, in the Select location view, back to default." : {
       "localizations" : {
         "da" : {
diff --git a/ios/MullvadVPN/View controllers/SelectLocation/Views/FloatingSearchBar.swift b/ios/MullvadVPN/View controllers/SelectLocation/Views/FloatingSearchBar.swift
index 44387342cb..e2d0465808 100644
--- a/ios/MullvadVPN/View controllers/SelectLocation/Views/FloatingSearchBar.swift
+++ b/ios/MullvadVPN/View controllers/SelectLocation/Views/FloatingSearchBar.swift
@@ -30,6 +30,15 @@ struct FloatingSearchBar: View {
                             }
                         }
                     }
+                    if !searchText.isEmpty {
+                        Button {
+                            searchText = ""
+                        } label: {
+                            Image.mullvadIconCross
+                                .foregroundColor(.mullvadTextSecondary)
+                        }
+                        .accessibilityLabel(Text("Clear search"))
+                    }
                 }
                 .padding(.horizontal, 8)
                 .frame(height: 48)