Custom Keyboard InputAccessoryView not visible in iOS 11

Question

I have implemented Custom input accessory view it was working fine till iOS 10.3.1. But it's not visible in iOS 11 beta.

Have anyone experience this issue?

Pardon

add more details. – Ecphonesis

I am seeing the same thing. My input accessory view is not showing up. – Bryantbryanty

Here's a full fledged answer for future viewers: It's not a pod. github.com/29satnam/InputAccessoryView – Lecythus

inputView.autoresizingMask = .flexibleHeight will fix the issue in most cases. – Recognizor

Answer 1

The question you ask does not have much detail. But I had the same problem when using an inputAccessoryView and a custom inputView for the textfield.

And resolved this on iOS11 by setting the custom inputView's autoresizingMask to .flexibleHeight.

yourCustomInputView.autoresizingMask = .flexibleHeight

Hope this resolves the issue. If not maybe provide some more information?

Here is how I add the input accessory, incase this is of more help (as extension of textfield):

public extension UITextField {

public func addToolbarInputAccessoryView(barButtonItems: [UIBarButtonItem],
                                         textColour: UIColor,
                                         toolbarHeight: CGFloat = 44,
                                         backgroundColour: UIColor = .white) {

    let toolbar = UIToolbar()

    toolbar.frame = CGRect(x: 0, y: 0, width: bounds.width, height: toolbarHeight)
    toolbar.items = barButtonItems
    toolbar.isTranslucent = false
    toolbar.barTintColor = backgroundColour
    toolbar.tintColor = textColour

    inputAccessoryView = toolbar
}

}

And then on the inputView (not the inputAccessoryView), I was using a date picker for example - just make sure that the date picker's autoresizing mask is set to flexible height.

Cucurbit

I had the same problem and this solution didn't work for me. Also, I'm only seeing the issue on iPads, other devices are ok so it seems strange having to do this on ipads – Ursola

This solution didn't work for me also. I am seeing the issue on iPhone. – Pardon

I had a problem with misplaced accessory view on rotation in iOS 11.0.1 and adding .flexibleHeight fixed it. – Milline

This should be the accepted answer. inputView?.autoresizingMask = .flexibleHeight does the trick. – Recognizor

This became an issue in my app in iOS 13, setting this fixed it thanks! – Yabber

Answer 2

PSA: If you use a UIToolbar as your custom view, it's currently broken in iOS 11 GM. Instead of loosing your hair on how to fix it, just change it to UIView. You'll loose the blur effect but it will work.

Misprint

Answer 3

Beta 3 has just come out and some people said it solved the problem, but for me it didn't.

However I tried setting the accessory view to something stupid (100pxls high) and spotted that the Undo/Redo/Paste bar on the iPads was incorrectly sitting over the top of my accessory bar. So I added the following code to get rid of Apples bar (it was pointless for my custom picker anyway) and the problem went away

Hope this helps somebody

- (void)textFieldDidBeginEditing:(UITextField*)textField  
{  
    UITextInputAssistantItem* item = [textField inputAssistantItem];  
    item.leadingBarButtonGroups = @[];  
    item.trailingBarButtonGroups = @[];  
}  

Ursola

Answer 4

To avoid the inputAccessoryView issue in iOS 11 for UITextField and UITextView, just use the following code:

UIView *inputView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 150)];

self.monthPickerView = [[UIPickerView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 150)];

    self.monthPickerView.backgroundColor = [UIColor whiteColor];

    self.monthPickerView.delegate = self;

    self.monthPickerView.dataSource = self;
[inputView addSubview:self.monthPickerView];

    cell.monthTextField.inputView = inputView ;

self.monthTextField.inputAccessoryView = [self doneButtonAccessoryView];


// doneButtonAccessoryView Method


-(UIToolbar*)doneButtonAccessoryView
{

    UIToolbar *kbToolbar = [[UIToolbar alloc] init];
    [kbToolbar sizeToFit];
    [kbToolbar setBarTintColor:[UIColor whiteColor]];
    UIBarButtonItem *doneButton = [[UIBarButtonItem alloc] initWithTitle:@"Done"
                                                                   style:UIBarButtonItemStyleDone target:self
                                                                  action:@selector(doneClicked)];

    UIBarButtonItem *cancelButton = [[UIBarButtonItem alloc] initWithTitle:@"Cancel"
                                                                     style:UIBarButtonItemStyleDone target:self
                                                                    action:@selector(cancelClicked)];
    NSDictionary *attrDict;

    attrDict = [NSDictionary dictionaryWithObjectsAndKeys:
                [UIFont fontWithName:@"Helvetica-Bold" size:16.0], NSFontAttributeName, nil];
 [doneButton setTitleTextAttributes:attrDict forState:UIControlStateNormal];
    UIBarButtonItem *flexWidth = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                                                               target:self action:nil];

    [kbToolbar setItems:[NSArray arrayWithObjects:cancelButton,flexWidth, doneButton, nil]];
    return kbToolbar;
}

Packard

Answer 5

UIToolBar is broken in iOS 11. But you can get the same thing done using UIView as inputAccessoryView. Sample code snippet here:

CGFloat width = [[UIScreen mainScreen] bounds].size.width;
UIView* toolBar = [[UIView alloc] initWithFrame:CGRectMake(0.0f,0.0f, width, 44.0f)];
toolBar.backgroundColor = [UIColor colorWithRed:0.97f  green:0.97f blue:0.97f alpha:1.0f];

UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(20.0 , 0.0f, width, 44.0f)];
[titleLabel setFont:[UIFont fontWithName:@"Helvetica" size:13]];
[titleLabel setBackgroundColor:[UIColor clearColor]];
[titleLabel setTextColor:[UIColor redColor]];
[titleLabel setText:@"Title"];
[titleLabel setTextAlignment:NSTextAlignmentLeft];
[toolBar addSubview:titleLabel];

UIButton *doneBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[doneBtn setTitle:@"Done" forState:UIControlStateNormal];
doneBtn.tintColor = [UIColor colorWithRed:(float)179/255 green:(float)27/255 blue:(float)163/255 alpha:1];
[doneBtn.titleLabel setFont:[UIFont fontWithName:@"Helvetica" size:16]];
[doneBtn addTarget:self action:@selector(btnTxtDoneAction) forControlEvents:UIControlEventTouchUpInside];
[doneBtn setFrame:CGRectMake(width-70, 6, 50, 32)];
[toolBar addSubview:doneBtn];

[toolBar sizeToFit];

txtMessageView.inputAccessoryView = toolBar;

Hope this help..:)

Menagerie

Answer 6

I've had the same issue and I've found out that removing all of the bottom, top, leading, training, left, right constraints for the view that is assigned accessoryView solved it.

Edana

Answer 7

Swift 4 solution

let toolBarRect = CGRect(x: 0, y: 0, width: self.view.frame.width, height: 44)
let toolBar = UIView(frame: toolBarRect)
toolBar.backgroundColor = .lightGray

let nextButton = UIButton()
nextButton.setTitleColor(.black, for: .normal)
nextButton.setTitle("Next", for: .normal)
nextButton.addTarget(self, action: #selector(self.onNextButtonTouch), for: .touchUpInside)
nextButton.translatesAutoresizingMaskIntoConstraints = false
toolBar.addSubview(nextButton)

NSLayoutConstraint.activate(
    [
        nextButton.heightAnchor.constraint(equalToConstant: Constants.keyboardToolBarHeight),
        nextButton.trailingAnchor.constraint(equalTo: toolBar.trailingAnchor, constant: -16),
        nextButton.centerYAnchor.constraint(equalTo: toolBar.centerYAnchor, constant: 0)
    ]
)

self.yourTextField.inputAccessoryView = toolBar

Wait

Answer 8

Just in case someone might still need the solution, here's what I did (IOS 12.1);

private func initSearchBox() {
    
    // Add Done button on keyboard      
    txtSearch.delegate = self
    let tbrDone = UIToolbar()
    let btnDone = UIBarButtonItem(title: "Done", style: .plain, target: self, action:     #selector(btnDone_tapped))
    tbrDone.items = [btnDone]
    tbrDone.sizeToFit()
    self.txtSearch.inputAccessoryView = tbrDone
        
}
    
@objc func btnDone_tapped() {

    view.endEditing(true)
        
}

Carabiniere