Fix scrambled screen when searchinfg (#2191)

Co-authored-by: Doug <6060466+pixlwave@users.noreply.github.com>
element-hq · Nov 30, 2023 · b7ecb07 · b7ecb07
1 parent edbac5f
commit b7ecb07
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git a/ElementX/Sources/Screens/InviteUsersScreen/View/InviteUsersScreen.swift b/ElementX/Sources/Screens/InviteUsersScreen/View/InviteUsersScreen.swift
@@ -33,33 +33,35 @@ struct InviteUsersScreen: View {
             .searchableConfiguration(hidesNavigationBar: false)
             .compoundSearchField()
             .alert(item: $context.alertInfo)
-            .readFrame($frame)
     }
 
     // MARK: - Private
 
     private var mainContent: some View {
-        Form {
-            // this is a fix for having the carousel not clipped, and inside the form, so when the search is dismissed, it wont break the design
-            Section {
-                EmptyView()
-            } header: {
-                VStack(spacing: 8) {
-                    selectedUsersSection
-                        .textCase(.none)
-
-                    if context.viewState.isSearching {
-                        ProgressView()
-                            .frame(maxWidth: .infinity, alignment: .center)
-                            .listRowBackground(Color.clear)
+        GeometryReader { proxy in
+            Form {
+                // this is a fix for having the carousel not clipped, and inside the form, so when the search is dismissed, it wont break the design
+                Section {
+                    EmptyView()
+                } header: {
+                    VStack(spacing: 8) {
+                        selectedUsersSection
+                            .textCase(.none)
+                            .frame(width: proxy.size.width)
+
+                        if context.viewState.isSearching {
+                            ProgressView()
+                                .frame(maxWidth: .infinity, alignment: .center)
+                                .listRowBackground(Color.clear)
+                        }
                     }
                 }
-            }
-
-            if context.viewState.hasEmptySearchResults {
-                noResultsContent
-            } else {
-                usersSection
+                
+                if context.viewState.hasEmptySearchResults {
+                    noResultsContent
+                } else {
+                    usersSection
+                }
             }
         }
     }
@@ -97,7 +99,6 @@ struct InviteUsersScreen: View {
         }
     }
 
-    @State private var frame: CGRect = .zero
     @ScaledMetric private var cellWidth: CGFloat = 72
 
     private var selectedUsersSection: some View {
@@ -120,7 +121,6 @@ struct InviteUsersScreen: View {
                 .padding(.horizontal, 14)
             }
         }
-        .frame(width: frame.width)
     }
 
     @ToolbarContentBuilder

diff --git a/ElementX/Sources/Screens/MessageForwardingScreen/View/MessageForwardingScreen.swift b/ElementX/Sources/Screens/MessageForwardingScreen/View/MessageForwardingScreen.swift
@@ -28,13 +28,15 @@ struct MessageForwardingScreen: View {
                 }
                 // Replace these with ScrollView's `scrollPosition` when dropping iOS 16.
             } header: {
-                Rectangle().hidden().onAppear {
-                    context.send(viewAction: .reachedTop)
-                }
+                emptyRectangle
+                    .onAppear {
+                        context.send(viewAction: .reachedTop)
+                    }
             } footer: {
-                Rectangle().hidden().onAppear {
-                    context.send(viewAction: .reachedBottom)
-                }
+                emptyRectangle
+                    .onAppear {
+                        context.send(viewAction: .reachedBottom)
+                    }
             }
             .compoundFormSection()
         }
@@ -59,6 +61,12 @@ struct MessageForwardingScreen: View {
         .compoundSearchField()
         .disableAutocorrection(true)
     }
+
+    /// The greedy size of Rectangle can create an issue with the navigation bar when the search is highlighted, so is best to use a fixed frame instead of hidden() or EmptyView()
+    private var emptyRectangle: some View {
+        Rectangle()
+            .frame(width: 0, height: 0)
+    }
 }
 
 private struct MessageForwardingRoomCell: View {

diff --git a/ElementX/Sources/Screens/StartChatScreen/View/StartChatScreen.swift b/ElementX/Sources/Screens/StartChatScreen/View/StartChatScreen.swift
@@ -37,6 +37,7 @@ struct StartChatScreen: View {
         .disableInteractiveDismissOnSearch()
         .dismissSearchOnDisappear()
         .searchable(text: $context.searchQuery, placement: .navigationBarDrawer(displayMode: .always), prompt: L10n.commonSearchForSomeone)
+        .searchableConfiguration(hidesNavigationBar: false)
         .compoundSearchField()
         .alert(item: $context.alertInfo)
     }