The UI search bar disappears when clicked( possibly NSLayoutConstraint issue) - swift

Question

A quick question, for what should've been an easy implementation.
Im trying to implement a UISearchcontroller and the UIsearchbar property when trying to customize it and set constraints behaves properly appears perfect but the minute i click on the search bar it resets its constraints to nil(guessing based on visual debugger).
Before clicking
and here is the second image which shows what happens when clicked
After clicking
Ive been trying to do this for a day now.
Context: My Main VC is a collection view and another button.
below is the search view specific code, I tried isolating the issue in a playground file and noticed issue starts when i add constraints to it.
var searchController:UISearchController!
private func setupSearchView(){
let viewController = UISearchController(searchResultsController: nil)
viewController.delegate = self
let bar = viewController.searchBar
bar.delegate = self
bar.searchBarStyle = .minimal
bar.translatesAutoresizingMaskIntoConstraints=false
bar.searchTextField.layer.cornerRadius = 20
bar.searchTextField.textColor = .darkGray
bar.searchTextField.backgroundColor = .white
bar.showsCancelButton = false
bar.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25).cgColor
bar.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
bar.layer.shadowOpacity = 1.0
bar.layer.shadowRadius = 0.0
bar.layer.masksToBounds = false
guard let customFont = UIFont(name: "Poppins-SemiBold", size: 14.0) else {
fatalError("""
Failed to load the "CustomFont-Light" font.
Make sure the font file is included in the project and the font name is spelled correctly.
"""
)}
bar.searchTextField.font=customFont
self.searchController = viewController
self.view.addSubview(bar)
bar.isHidden = true
}
func setupContstraints() {
//NSLayoutConstrainst
let searchBar:UISearchBar=searchController!.searchBar
NSLayoutConstraint.activate([
searchButton!.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30),
searchButton!.topAnchor.constraint(equalTo: view.topAnchor, constant: 30),
searchButton!.widthAnchor.constraint(equalToConstant: 50),
searchButton!.heightAnchor.constraint(equalToConstant: 50),
//search bar
searchBar.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
searchBar.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 30),
searchBar.widthAnchor.constraint(equalToConstant: 170.0),
searchBar.heightAnchor.constraint(equalToConstant: 50.0)]
)
Update:
When i gave the search bar fixed width and height(not ideal for different device size) it now appears with the width and height but doesn't obey the top anchor constraint.
See current image
also updated the snippet with current constraints

Answer 1

Give a fixed width and height value for your "SearchBar" object. It will probably be fixed.
It may take up as much width as the cursor when clicked.
Comment out or delete the 2 lines below while giving a fixed height and width for the searchBar.
searchBar.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 50),
searchBar.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -100)

Answer 2

Rid of the UISearchController and use a UISearchBar instead.
let searchBar = UISearchBar()
let clearButton = UIButton()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .gray
setupSearchView()
}
private func setupSearchView(){
searchBar.searchBarStyle = .minimal
searchBar.translatesAutoresizingMaskIntoConstraints=false
searchBar.searchTextField.layer.cornerRadius = 20
searchBar.searchTextField.textColor = .darkGray
searchBar.searchTextField.backgroundColor = .white
searchBar.showsCancelButton = false
searchBar.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25).cgColor
searchBar.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
searchBar.layer.shadowOpacity = 1.0
searchBar.layer.shadowRadius = 0.0
searchBar.layer.masksToBounds = false
// guard let customFont = UIFont(name: "Poppins-SemiBold", size: 14.0) else {
// fatalError("""
// Failed to load the "CustomFont-Light" font.
// Make sure the font file is included in the project and the font name is spelled correctly.
// """
// )}
// bar.searchTextField.font=customFont
// set your search clear button
clearButton.setImage(UIImage(systemName: "multiply.circle.fill"), for: .normal)
clearButton.tintColor = .red
let searchStack = UIStackView(arrangedSubviews: [searchBar, clearButton])
searchStack.axis = .horizontal
searchStack.distribution = .fill
searchStack.alignment = .fill
searchStack.spacing = 16
searchStack.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(searchStack)
// bar.isHidden = true
NSLayoutConstraint.activate([
clearButton.heightAnchor.constraint(equalTo: clearButton.widthAnchor),
searchStack.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 30),
searchStack.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 30),
searchStack.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -30),
searchStack.heightAnchor.constraint(equalToConstant: 50)
])
}