Hey all,
I found a weird behaviour with the searchable component. I created a custom bottom nav bar (because I have custom design in my app) to switch between screens.
On one screen I display a List component with the searchable component. Whenever I enter the search screen the first time, the searchable component is displayed at the bottom.
This is wrong. It should be displayed at the top under the navigationTitle. When I enter the screen a second time, everything is correct.
This behaviour can be reproduced on all iOS 26 versions on the simulator and on a physical device with debug and release build.
On iOS 18 everything works fine.
Steps to reproduce:
Cold start of the app
Click on Search TabBarIcon (searchable wrong location)
Click on Home TabBarIcon
Click on Search TabBarIcon (searchable correct location)
Simple code example:
import SwiftUI
struct ContentView: View {
@State var selectedTab: Page = Page.main
var body: some View {
NavigationStack {
ZStack {
VStack {
switch selectedTab {
case .main:
MainView()
case .search:
SearchView()
}
}
VStack {
Spacer()
VStack(spacing: 0) {
HStack(spacing: 0) {
TabBarIcon(iconName: "house", selected: selectedTab == .main, displayName: "Home")
.onTapGesture {
selectedTab = .main
}
TabBarIcon(iconName: "magnifyingglass", selected: selectedTab == .search, displayName: "Search")
.onTapGesture {
selectedTab = .search
}
}
.frame(maxWidth: .infinity)
.frame(height: 55)
.background(Color.gray)
}
.ignoresSafeArea(.all, edges: .bottom)
}
}
}
}
}
struct TabBarIcon: View {
let iconName: String
let selected: Bool
let displayName: String
var body: some View {
ZStack {
VStack {
Image(systemName: iconName)
.resizable()
.renderingMode(.template)
.aspectRatio(contentMode: .fit)
.foregroundColor(Color.black)
.frame(width: 22, height: 22)
Text(displayName)
.font(Font.system(size: 10))
}
}
.frame(maxWidth: .infinity)
}
}
enum Page {
case main
case search
}
struct MainView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")
}
.padding()
.navigationTitle("Home")
}
}
struct SearchView: View {
@State private var searchText = ""
let items = [
"Apple",
"Banana",
"Pear",
"Strawberry",
"Orange",
"Peach",
"Grape",
"Mango"
]
var filteredItems: [String] {
if searchText.isEmpty {
return items
} else {
return items.filter {
$0.localizedCaseInsensitiveContains(searchText)
}
}
}
var body: some View {
List(filteredItems, id: \.self) { item in
Text(item)
}
.navigationTitle("Fruits")
.searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always), prompt: "Search")
}
}
Selecting any option will automatically load the page