Ios swift - SwiftUI text selection and sheet presentation conflict

RoadRunner
September 5, 2024
174 views
0 votes
2 Answers

I’m developing a SwiftUI application that includes a view displaying artwork details. This view contains several text fields with .textSelection(.enabled) to allow users to select text. However, I’m facing an issue: when I’m in text selection mode and tap outside the text fields, the selection should simply disappear. Instead, tapping outside triggers the opening of a BottomSheetView.

Current Issue:
The BottomSheetView opens every time I tap outside the text fields, even when I’m just trying to exit the text selection mode. I want the text selection to disappear without triggering the BottomSheetView when tapping outside the selection area.

Objective:
How can I modify the behavior so that tapping outside the text fields in text selection mode only dismisses the selection without opening the BottomSheetView?Any advice or solutions would be greatly appreciated! This version clarifies the issue and your desired outcome, making it easier for others to understand and provide assistance.

public var body: some View {
        VStack {
            Text(viewModel.names)
                .textSelection(.enabled)
            Text(viewModel.caption)
                .textSelection(.enabled)
            // Other UI components...
        }
        .onTapGesture {
            // This should open the BottomSheetView
            viewModel.captionViewTapped()
        }

Ensuring the onTapGesture is correctly attached to the parent view.
Searching for solutions related to gesture conflicts with text selection in SwiftUI.

Answers

I’ve encountered a similar issue in a project where I needed to handle both text selection and gesture recognition in SwiftUI. The problem is that tapping outside the text fields while in text selection mode triggers the opening of a BottomSheetView, even though you only want to exit text selection.

To address this, what worked well for me was managing the gesture priorities and ensuring that tapping outside the text fields does not interfere with text selection. Here’s how I handled it:

Solution 1: Adjust Gesture Priorities
One of the first approaches I tried was using simultaneousGesture to control how SwiftUI handles conflicting gestures. By prioritizing the text selection gesture over the tap gesture that opens the BottomSheetView, we can prevent the sheet from opening when a tap outside the text occurs.

Here’s an example of how you can achieve this:

import SwiftUI

struct ContentView: View {
    @State private var isBottomSheetVisible: Bool = false

    var body: some View {
        VStack {
            Text("Selectable Text 1")
                .textSelection(.enabled)
                .onTapGesture {
                    print("Text 1 tapped for selection")
                }

            Text("Selectable Text 2")
                .textSelection(.enabled)
                .onTapGesture {
                    print("Text 2 tapped for selection")
                }
        }
        .simultaneousGesture(TapGesture().onEnded {
            print("Tapped outside, but no action due to simultaneousGesture")
        })
        .onTapGesture {
            print("Tapped outside, opening BottomSheet")
            isBottomSheetVisible.toggle()
        }
        .sheet(isPresented: $isBottomSheetVisible) {
            BottomSheetView()
        }
    }
}

struct BottomSheetView: View {
    var body: some View {
        VStack {
            Text("This is the Bottom Sheet")
            Button("Close") {
                print("Closing BottomSheet")
            }
        }
        .frame(height: 200)
    }
}

#Preview {
    ContentView()
}

Another approach that worked well was creating a state variable to track when text selection is active. This way, you can prevent the BottomSheetView from opening while the user is selecting text.

Here’s an example of how to implement this:

import SwiftUI

struct ContentView: View {
    @State private var isBottomSheetVisible: Bool = false
    @State private var isTextSelectionActive: Bool = false

    var body: some View {
        VStack {
            Text("Selectable Text 1")
                .textSelection(.enabled)
                .onTapGesture {
                    isTextSelectionActive = true
                    print("Text 1 tapped, text selection active")
                }

            Text("Selectable Text 2")
                .textSelection(.enabled)
                .onTapGesture {
                    isTextSelectionActive = true
                    print("Text 2 tapped, text selection active")
                }
        }
        .onTapGesture {
            if !isTextSelectionActive {
                print("Tapped outside, opening BottomSheet")
                isBottomSheetVisible.toggle()
            } else {
                print("Tapped outside, closing text selection")
            }
            isTextSelectionActive = false
        }
        .sheet(isPresented: $isBottomSheetVisible) {
            BottomSheetView()
        }
    }
}

struct BottomSheetView: View {
    var body: some View {
        VStack {
            Text("This is the Bottom Sheet")
            Button("Close") {
                print("Closing BottomSheet")
            }
        }
        .frame(height: 200)
    }
}


#Preview {
    ContentView()
}

You can test each and see which one works best for you. I am still learning but I believe that manually tracking the text selection state was the most effective solution, especially in more complex UIs.

import SwiftUI

extension UIApplication {
    func endEditing(_ force: Bool) {
       self.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}

struct ContentView: View {
   @State private var name = ""
   @State private var email = ""

   var body: some View {
       VStack {
           Spacer()
           TextField("Enter your name", text: $name)
               .textSelection(.enabled)
               .background(.red)
               .padding()
           TextField("Enter your email", text: $email)
               .textSelection(.enabled)
               .background(.red)
               .padding()
           Spacer()
       }
       .background(.yellow)
       .onTapGesture {
           UIApplication.shared.endEditing(true)
           print("tap")
       }
   }
}

#Preview {
   ContentView()
}

Please signup or login to give your own answer.

Click here to cancel reply.

Ios swift – SwiftUI text selection and sheet presentation conflict

Answers