iOS 11: display issues with UISearchBar's scopeButtonTitles

Originator:robotspacer
Number:rdar://34504787 Date Originated:September 18 2017, 7:44 PM
Status:Duplicate/Closed Resolved:
Product:iOS + SDK Product Version:11.0 - 11.1 beta 5
Classification:Bug Reproducible:Always
 
Summary:
My iOS 10 app had some significant issues displaying its search bar—the scope buttons would appear behind the search bar. I was able to solve most of these issues by building with the iOS 11 SDK and using the new navigationItem.searchController property. There's still one significant issue though: if the device is rotated while the scope buttons are showing, the end up behind the search bar. The result is a visual mess and the scope buttons can't be used in this state.

Steps to Reproduce:
1. Open the attached project in Xcode 9.
2. Run the project.
3. Pull down to reveal the search bar, and tap on the search field. The scope buttons should appear.
4. Rotate the device.

Expected Results:
The scope buttons should continue to display below the search field.

Actual Results:
The scope buttons are now behind the search bar—they occupy the same space, making the scope buttons inaccessible. A screenshot is attached showing what this looks like.

Version/Build:
Xcode 9.0 (9A235) and iOS 11 GM (15A372)

Configuration:
The attached project is just the Master/Detail template with four lines of code to add the search controller and scope buttons. It's an incomplete setup but I'm able to reproduce the same issue in my finished app.

As far as I can tell the bug exists on any iPhone or iPad, both device and simulator. I tested on iPhone 8 and 8 Plus in the simulator, as well as iPhone 7 and iPad Pro 10.5 on device.

Comments

HI @robotspacer,

Encounter the same problems in iOS 11. Submitted a bug report, closed as duplicate of 33709776 too. Due to the lack of a fix I even mailed Craig Federighi, who replied "Thanks for the report. We are aware of the issue and are working to correct it.". So judging by this response, it definitely is a bug.

Really hope it's fixed soon, my customers keep complaining.

More on this topic

Here's a post on Apple's developer forums: https://forums.developer.apple.com/thread/84996 There are various suggested workarounds here. I could not get any of them to work. For example calling sizeToFit on the search bar will correct the search bar's layout, but not the navigation bar that it's a part of. It looks just as bad, and tapping on the scope buttons in that state just sends the tap to whatever is below it.

Here's a Stack Overflow post with no answers currently: https://stackoverflow.com/questions/46735159/scopebuttontitles-in-uisearchcontroller-with-uinavigation-ios-11

Here's a UISearchController tutorial that includes discussion of this problem in the comments, but no suggested fixes: https://www.raywenderlich.com/157864/uisearchcontroller-tutorial-getting-started

By robotspacer at Oct. 23, 2017, 7:31 p.m. (reply...)

Duplicate of 33709776, which is closed

I'm not sure what's going on with this bug. It's very simple to reproduce—all you have to do is set scopeButtonTitles and use the new navigationItem.searchController property, and your app will have this bug. My bug was marked as a duplicate of 33709776, which is marked as closed. It's been marked as closed for the past few 11.1 betas, but the bug remains.

I have not been able to find a workaround—even trying to dismiss the search controller on rotation just introduces new visual bugs. As far as I can tell the only current solution is to not use scopeButtonTitles when you're using the navigationItem.searchController property. For example, you could add your scope buttons to the table view header instead.

By robotspacer at Oct. 23, 2017, 7:21 p.m. (reply...)

Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!