Hello everyone, I have created a search bar in my app that I use in several views. An X button appears in the search bar to delete the content as soon as something has been entered. Next to it is a button that opens a barcode scanner.

import SwiftUI

struct SearchBar: View {
    @Binding var searchText: String
    @Binding var isScannerPresented: Bool
    var placeholder: String

    var body: some View {
        HStack {
            TextField(placeholder, text: $searchText)
                .padding(.vertical, 10)
                .padding(.leading, 10)
                .overlay(
                    HStack {
                        Spacer()
                        if !searchText.isEmpty {
                            Button(action: {
                                searchText = ""
                            }) {
                                Image(systemName: "multiply.circle.fill")
                                    .foregroundColor(.gray)
                                    .padding(.trailing, 10)
                            }
                        }
                    }
                )
            Button(action: {
                isScannerPresented = true
            }) {
                Image(systemName: "barcode")
                    .padding(10)
                    .foregroundColor(.yellow)
                    .cornerRadius(8)
            }
            .sheet(isPresented: $isScannerPresented) {
                BarCodeScanner(isbn: Binding($searchText), foundBooks: .constant(nil))
            }
        }
        .background(Color.secondary.opacity(0.1))
        .cornerRadius(10)
        .padding(.horizontal)
    }
}

The search bar works fine so far. But in one view the search bar is causing problems. If I press the button to delete the content here, the content is deleted, but the barcode scanner opens at the same time. The search bar is also a little more indented than in the other views in which the search bar works. What do I need to change in the implementation? Is it a problem, that the searchbar is part of the form or section?

struct BorrowFormView: View {
    @Environment(\.presentationMode) var presentationMode
    @EnvironmentObject var databaseManager: DatabaseManager

    @State private var selectedBookID: String? = nil
    @State private var checkoutDate: Date = Date()
    @State private var dueDate: Date = Date().addingTimeInterval(7 * 24 * 60 * 60) // 7 Tage später
    @State private var userName: String = ""
    @State private var books: [Book] = []
    @State private var selectedBooks: Set<String> = []
    @State private var showErrorAlert = false
    @State private var isScannerPresented = false
    @State private var foundBooks: Books?
    @State private var scannedIsbn: String? = nil

    let initialSearchText: String
    @State private var searchText: String

    init(initialSearchText: String) {
        self.initialSearchText = initialSearchText
        self._searchText = State(initialValue: initialSearchText)
    }

    private var isbnBinding: Binding<String?> {
......
    }

    private var filteredBooks: [Book] {
......
    }

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Name")) {
                    TextField("Name eingeben", text: $userName)
                }

                Section(header: Text("Buch auswählen")) {
                    VStack {
                        SearchBar(searchText: $searchText, isScannerPresented: $isScannerPresented, placeholder: "Suche nach Büchern...")

                        ScrollView {
                            LazyVStack {
......
                            }
                        }
                        .frame(maxHeight: 400) // Begrenzt die Höhe der ScrollView
                    }
    .....        
            }
            .scrollDismissesKeyboard(.immediately)
            .navigationBarTitle("Buch ausleihen", displayMode: .inline)
            .navigationBarItems(trailing: Button(action: {
                presentationMode.wrappedValue.dismiss()
            }) {
                Image(systemName: "xmark.circle")
                    .font(.title2)
                    .foregroundColor(.yellow)
            })           
.....
}