iOS 7 doesn't show cancel button of search bar in navigation bar

Question

In an app that's supposed to run on iOS 6 and iOS 7, the cancel button of the search bar embedded in the navigation bar is not shown anymore if the app is run on iOS 7. On iOS 6, it works.

The search bar is in the title view of the navigation bar and the cancel button should be shown if the search bar becomes the first responder:

iOS 7

iOS 6

In an isolated test case, the code is very simple:

@interface MyViewController : UITableViewController<UISearchBarDelegate>

@property (nonatomic) IBOutlet UISearchBar* searchBar;

@end


@implementation MyViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.navigationItem.titleView = self.searchBar;
}

- (void) searchBarTextDidBeginEditing: (UISearchBar*) searchBar {
    [searchBar setShowsCancelButton: YES animated: YES];
}

@end

Is this a deliberate change in iOS 7 that I missed in the documentation? If yes, what is supposed to be the alternative?

If not, have I made a mistake in my code?

Answer 1

It looks like you're doing everything correctly, but apparently Apple has changed around some things in iOS 7. According to this SO question in iOS 7 the cancel button doesn't appear on a UISearchBar embedded in a UINavigationBar.

According to the developer documentation, the showsCancelButton property may have a slightly different effect than the setShowsCancelButton:Animated method. Try doing this:

searchBar.showsCancelButton = YES;
[searchBar setShowsCancelButton:YES animated:YES];

I'm not sure if that will have any impact. You could also try placing the code in a different delegate method:

- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar; // return NO to not become first responder
- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar; // called when text starts editing

You may also want to checkout the iOS 7 changelog. It looks like Apple changed the behavior or a UISearchDisplayController / UISearchBar when added to a UINavigationBar. Take a look at the last bullet point under the UIKit section (although it isn't clear exactly what was changed).

---

You may also want to try using a UISerachDisplayController. What might be even easier is to embed the UISearchBar in the header of a UITableView.

Answer 2

I've solved this problem simple, just by adding rightBarButtonItem :)

self.navigationItem.titleView = self.searchBar;
self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithTitle:NSLocalizedString(@"Cancel", nil) style:UIBarButtonItemStylePlain target:self action:@selector(didClickCancelButton:)] autorelease];

But sure you have to check if current iOS version is >= 7.0, otherwise you will get two "cancel" buttons..

BTW This method allows you to have "cancel" button which always enabled

Answer 3

iOS 7 is different with iOS 6 in navigation bar, so if you want to show UISearch bar in navigation bar,you can try this:

put your UISearchbar on a UIView like this[self.searchView addSubview self.searchBar], and set the navigationbar's titleView to your searchView like thisself.navagitioncontroller.navigationItem.titleView = self.searchView

Hope it works for you

Answer 4

If you are using your UISearchBar with an UISearchDisplayController, you can simply set the cancel button to show, in the "searchDisplayControllerWillBeginSearch" delegate method, like so: (iOS 7 tested)

-(void)searchDisplayControllerWillBeginSearch:(UISearchDisplayController *)controller{
    controller.searchBar.showsCancelButton = YES;
}

Answer 5

There does seem to be a change between iOS6 and iOS7 in that changes to the UI from xxxDidYYY methods sometimes don't work, and you have to do it in the xxxWillYYY method or in some code executed from the main event loop (e.g. in a block or after a short delay).

In your case, try this:

- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar
{
    searchBar.showsCancelButton = YES;
    return YES;
}

Answer 6

In my opinion this is a bug. Heres my workaround. It's not perfect but it works both on iOS 6&7. On iOS7 the searchbar textfield slides over the cancel button while it's fading out and on iOS6 the textfield width expansion isn't animated.

@interface FTViewController ()
@property(nonatomic, strong) UISearchBar *searchBar;
@end

@implementation FTViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.searchBar = [[UISearchBar alloc] init];
    self.searchBar.delegate = self;

    if (NSFoundationVersionNumber <= NSFoundationVersionNumber_iOS_6_1) {
        // iOS 6.1 and older (only tested on 6.1)
        [self.searchBar sizeToFit];
        self.searchBar.backgroundImage = nil;
    }

    self.navigationItem.titleView = self.searchBar;
}

-(void)cancelBarButtonItemClicked:(id)sender
{
    [self searchBarCancelButtonClicked:self.searchBar];
}

-(void)searchBarCancelButtonClicked:(UISearchBar *)searchBar
{
    [searchBar resignFirstResponder];
    [self.navigationItem setRightBarButtonItem:nil animated:YES];
}

-(BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar
{
    UIBarButtonItem *cancelBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(cancelBarButtonItemClicked:)];
    [self.navigationItem setRightBarButtonItem:cancelBtn animated:YES];

    return YES;
}
@end

Answer 7

There are two options:

1. Add a search bar like a subview to uiviewcontroller.view and hide a navigation bar if needs
2. Add a cancel button to uiviewcontroller.navigationItem.rightBarButtonItem

my preference is the second one, but it looks more native with the first one.

Answer 8

This is indeed a bug that is fixed as of 7.1.