Why is my UISearchBar's width 0 after becoming first responder?

Question

I have a UISearchBar in my UIStackView with a button, making a sort of nav bar. Here is what it normally looks like: but when it becomes first responder the UISearchBar's width goes to 0, and it looks like this:

Now the only constraint I have is the width of the UIButton on the right is 44pt and the whole stack view is pinned to the top and sides of the screen. Here's what the console printed out:

I'm not very fluent in NSLayoutConstraint but clearly something is conflicting with the 44pt width constraint on the button. Why is the UISearchbar's width becoming 0?

Here is my code:

override func didTransition(to presentationStyle: MSMessagesAppPresentationStyle) {
    if presentationStyle == .expanded {
        searchController.searchBar.becomeFirstResponder()
        searchController.searchBar.tintColor = UIColor.white
    }
}

func didDismissSearchController(_ searchController: UISearchController) {
    requestPresentationStyle(.compact)
}

override func viewDidLoad() {
    super.viewDidLoad()
    configureSearchController()
}

func configureSearchController() {
    searchController = UISearchController(searchResultsController: nil)
    searchController.dimsBackgroundDuringPresentation = false
    searchController.searchBar.placeholder = "Search here..."
    searchController.searchBar.sizeToFit()
    searchController.searchBar.isTranslucent = false
    searchController.searchBar.delegate = self
    searchController.delegate = self
    searchController.searchBar.barTintColor = addButton.backgroundColor
    stackView.insertArrangedSubview(searchController.searchBar, at: 0)
    //This removes the hairline
    let color = addButton.backgroundColor
    searchController.searchBar.layer.borderWidth = 1
    searchController.searchBar.layer.borderColor = color?.cgColor

}

func searchBarShouldBeginEditing(_ searchBar: UISearchBar) -> Bool {
    if presentationStyle == .expanded {
        return true
    } else {
        requestPresentationStyle(.expanded)
        return false
    }
}

My storyboard as requested:

You should post the log in its entirety (the part that states which constraints were broken by the system is missing). Also, **post the log as text** (i.e. code). — paulvs, Aug 14 '16 at 02:16
*the whole stack view is pinned to the top and sides of the screen*--Okay, but that doesn't fully constrain the StackView. What about the bottom? — 7stud, Aug 14 '16 at 02:17
Also, why are you posting an image of the output? Are you unable to use your Mac's copy/paste feature? On the other hand, it would have been nice to see an image of your storyboard's table of contents. — 7stud, Aug 14 '16 at 04:32
Stack overflow won't let me paste because it interprets the tags as HTML code (I think). — A Tyshka, Aug 14 '16 at 15:55
This issue is present even if the UISearchBar and button are not in a stack view — A Tyshka, Aug 14 '16 at 21:20
*Stack overflow won't let me paste because it interprets the tags as HTML code (I think).*--Then use code tags. I suggest that you put your current project aside. Create a new project. Add the minimal amount of code to add your search bar and button and see if the problem persists. If so, post all your code. The bottom line is: you have to post code. You cannot ask questions about invisible code. Okay?! — 7stud, Aug 14 '16 at 23:50
I added my code. I'm sorry I really should have had it to start. This is the fifth iteration of this project. I've tried UINavigationBars, UIStackViews, container views, container views in UIStackViews, etc, and I get the same result every time. — A Tyshka, Aug 15 '16 at 20:48

7stud · Answer 1 · 2016-08-14T05:25:10.250

I'm not very fluent in NSLayoutConstraint but clearly something is conflicting with the 44pt width constraint on the button. Why is the UISearchbar's width becoming 0?

There's clearly a constraint in your ouput for the leading edge of the button--yet you say you only constrained the button's width. The output says that you constrained the leading edge of the button to the leading edge of the stack view.

You can certainly constrain the leading edge of the button to the leading edge of the stack view and make the button 44 wide--if the button is on the left of the search bar. But, because the button is on the right of the search bar, the button can either be 44 wide or it can be constrained to the leading edge of the stack view--but not both.

So, iOS breaks the 44 width constraint, and extends the button all the way to the left so that it lines up with the leading edge of the stack view.

That did not have to be the result. I imagine Apple could have programmed Xcode to ignore the spot where you dragged the button and just obey the constraints, i.e. move the button so that its leading edge and the stack view's leading edge line up and and give the button a width of 44, thus moving the search bar to the right of the button. But, obviously Apple gave a stronger priority to the ordering of the items in a horizontal stack view, i.e. because you placed the button to the right of the search bar, that is where it remained.

There is no leading constraint on the button. Also, why does it only go wrong when first responder is triggered? — A Tyshka, Aug 14 '16 at 15:43
Here's how I set it up: I can't represent the search bar of a UISearchController in the storyboard so I have to add it programmatically. So my button has a width constraint of 44 but the stack view is set to fill. So yes, in the storyboard there are conflicting constraints. But this conflict is resolved when I add the UISearchBar to the stack view in code. The result is picture 1. But for some reason when the search bar becomes first responder (in pic 2) its width goes to 0 and it is then that we have conflicting constraints. There wouldn't be a problem if the search bar was the right size. — A Tyshka, Aug 14 '16 at 15:56

Why is my UISearchBar's width 0 after becoming first responder?

1 Answers1