How to fix wrong indexPath returned by didSelectRowAt?

Question

I have a UITableView; without a tableHeaderView tapping a row and triggering didSelectRowAt returns the correct index path.

When I set the tableHeaderView property, didSelectRowAt either does not fire or returns the tappedRow + 2. Where am I going wrong?

Here is my code

class MenuController: UIViewController {
    // Mark -- Properties
    var tableView: UITableView!
    var delegate: HomeControllerDelegate?
    var headerView: HeaderView? = nil
    var user: User? = nil

    // Mark -- Init

    override func viewDidLoad() {
        super.viewDidLoad()
        configureTableView()
        if let user = self.user {
            populateMenuHeader(email: user.email, firstName: user.firstName, lastName: user.lastName, imageUrl: user.imageUrl)
        }
    }

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        //updateHeaderViewHeight(for: tableView.tableHeaderView)
    }

    func updateHeaderViewHeight(for header: UIView?) {
        guard let headerView = headerView else { return }
        headerView.frame.size.height = 170
    }

    func populateMenuHeader(email: String, firstName: String, lastName: String, imageUrl: String) {
        headerView?.emailLabel?.text = email
        headerView?.nameLabel?.text = "\(firstName) \(lastName)"
        let request = ImageRequest(
            url: URL(string: imageUrl)!,
            processors: [
                ImageProcessor.Resize(size: CGSize(width: 70, height: 70)),
                ImageProcessor.Circle()
            ]
        )
        Nuke.loadImage(with: request, into: headerView!.imageView!)
    }

    // Mark -- Handlers
    func configureTableView() {
        // Create Material Header
        headerView = HeaderView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 170))
        //headerView?.heightAnchor.constraint(equalToConstant: 170).isActive = true
        headerView?.translatesAutoresizingMaskIntoConstraints = false

        tableView = UITableView()
        tableView.delegate = self
        tableView.dataSource = self

        tableView.tableHeaderView = headerView
        tableView.sectionHeaderHeight = 170

        tableView.register(MenuOptionCell.self, forCellReuseIdentifier: reuseIdentifier)
        tableView.backgroundColor = .darkGray
        tableView.separatorStyle = .none
        tableView.rowHeight = 80

        view.addSubview(tableView)
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        tableView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        tableView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    }
}

extension MenuController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: reuseIdentifier, for: indexPath) as! MenuOptionCell
        let menuOption = MenuOption(rawValue: indexPath.row)
        cell.descriptionLabel.text = menuOption?.description
        cell.iconImageView.image = menuOption?.image
        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let row = indexPath.row
        print("tapped row: \(row)")
        let menuOption = MenuOption(rawValue: row)
        delegate?.handleMenuToggle(forMenuOption: menuOption)
    }
}

class CustomView: UIView {
    override func draw(_ rect: CGRect) {
        super.draw(rect)

        if let context = UIGraphicsGetCurrentContext() {
            context.setStrokeColor(UIColor.white.cgColor)
            context.setLineWidth(1)
            context.move(to: CGPoint(x: 0, y: bounds.height))
            context.addLine(to: CGPoint(x: bounds.width, y: bounds.height))
            context.strokePath()
        }
    }
}

class HeaderView : UIView {
    var imageView: UIImageView? = nil
    var nameLabel: UILabel? = nil
    var emailLabel: UILabel? = nil

    override init(frame: CGRect) {
        super.init(frame: frame)
        imageView = UIImageView()
        imageView?.translatesAutoresizingMaskIntoConstraints = false
        nameLabel = UILabel()
        nameLabel?.translatesAutoresizingMaskIntoConstraints = false
        nameLabel?.font = UIFont(name: "Avenir-Light", size: 20)
        nameLabel?.text = "Test name"
        nameLabel?.textColor = .white
        emailLabel = UILabel()
        emailLabel?.translatesAutoresizingMaskIntoConstraints = false
        emailLabel?.textColor = .white
        emailLabel?.font = UIFont(name: "Avenir-Light", size: 15)
        emailLabel?.text = "testemail@gmail.com"
        self.addSubview(imageView!)
        self.addSubview(nameLabel!)
        self.addSubview(emailLabel!)
        let lineView = CustomView(frame: CGRect(x: 0, y: frame.height - 1, width: frame.width, height: 1))
        self.addSubview(lineView)


        imageView?.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20).isActive = true
        imageView?.topAnchor.constraint(equalTo: topAnchor, constant: 20).isActive = true
        imageView?.widthAnchor.constraint(equalTo: widthAnchor, constant: 70).isActive = true
        imageView?.heightAnchor.constraint(equalTo: heightAnchor, constant: 70).isActive = true

        nameLabel?.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20).isActive = true
        nameLabel?.topAnchor.constraint(equalTo: imageView!.bottomAnchor, constant: 10).isActive = true

        emailLabel?.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20).isActive = true
        emailLabel?.topAnchor.constraint(equalTo: nameLabel!.bottomAnchor, constant: 5).isActive = true
    }

    required init?(coder aDecoder: NSCoder) {
          fatalError("init(coder:) has not been implemented")
    }
}

Answer 1

The problem appears to be due to the fact that you are not properly setting the height of the header view. The documentation for tableHeaderView states:

When assigning a view to this property, set the height of that view to a nonzero value. The table view respects only the height of your view's frame rectangle; it adjusts the width of your header view automatically to match the table view's width.

Update your header view code:

Change:

headerView = HeaderView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 170))
//headerView?.heightAnchor.constraint(equalToConstant: 170).isActive = true
headerView?.translatesAutoresizingMaskIntoConstraints = false

...

tableView.sectionHeaderHeight = 170

to just:

headerView = HeaderView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 170))

That's it. No need to mess with constraints. No need to set the unrelated section height. Just give the header view's frame the desired height.