cocos2d::Menu click detection is a bit off to bottom left whenever using a custom window size - cocos2d-x-3.0

Question

After weeks of debugging, I struggle to figure out what was going on with cocos2d::Menu. I was surprise that my MenuItemImage was not receiving callbacks when I click on the button. So I click anywhere else out of frustration and boom, as I clicked on the bottom left corner, the callback registers in!
Its a bit off towards the bottom-left and wondering what might caused this? I already reproduce the problem using the crappy sample project provided as is and was not able to reproduce this using the default window size. But the problem was now reproducible when I change to a custom size. I also notice that the detection bounds seems to be not the actual shape of the given MenuItemImage. Its a bit square.
I am quite on predicament here. This is really frustrating. Documentation and the community is as unhelpful as hell.
I am using cocos2d-x v3.6;
Here is my code:
mRetryButton = cocos2d::MenuItemImage::create("asset_button_up.png", "asset_button_down.png", CC_CALLBACK_1(MainGameScene::onRetryButtonClicked, this));
mRetryButton->setPosition(cocos2d::Vec2(screenSize.width / 2.0f, screenSize.height / 2.0f));
auto menu = cocos2d::Menu::create(mRetryButton, NULL);
menu->setPosition(cocos2d::Vec2::ZERO);
this->addChild(menu, 1);
Do you know any solution to this? Or did I just horribly missed something? I just needed a simple on-screen button. Nothing fancy. Just plain-old dull button.
Thanks!

Answer 1

I fixed it!
I tried numerous ways on how to create a button. All of them exhibited similar behavior.
There must be something wrong with the changing of the screenSize. I committed a terrible mistake.
On AppDelegate::applicationDidFinishLaunching when it first initialize the glview, I was once told that in order to change the screen size I need to call this: cocos2d::Director::getInstance()->getOpenGLView()->setFrameSize(width , height). I set this after this particular line such that it will look like this:
auto director = Director::getInstance();
auto glview = director->getOpenGLView();
if(!glview) {
glview = GLViewImpl::create("My Game");
director->setOpenGLView(glview);
}
director->getOpenGLView()->setFrameSize(width , height);
This is so wrong. Doing this after the director set the OpenGL view registers the original 960 , 640 screen size that reverberates all through out the scenes, layers, nodes you have. Every time you check on the debugger the content size of the node in question (The button I have has a size of (140 , 40)), it defaults to the original screen size. This is not right. There is something wrong there. AND this will not be fixed if you set the content size manually yourself. I think by incorrectly setting the screensize some nodes' content size become misaligned or not properly computed by the time the director set the GL view. The proper way of changing screen is this:
auto director = Director::getInstance();
auto glview = director->getOpenGLView();
if(!glview) {
glview = GLViewImpl::create("My Game");
glview->setFrameSize(370, 480);
director->setOpenGLView(glview);
}
Now, the click detection bounds, position and size, exactly fits onto the sprite image and can now receive callbacks! For *(#$*ing two weeks. I got it.
I hope this helps someone in the future!