QT 5.1.1: Checkbox in QWebview shows strange behavior under Win 7 (x64) / Win 8

Question

My project is in QT Creator 2.8.1 based on Qt 5.1.1 (MSVC 2010, 32 bit) and compiled with kit: QT 5.1.1 MSVC2010 32bit.

Problem is that the webview shows some strange behavior under Win 7 (x64) or Win 8. The first checkbox has always the focus. If I hover over the first checkbox, the second gets "highlighted". Also I can't check the first checkbox, if I click it, the second one gets checked, and first one remains unchecked.

The error doesn't occur with the same exe under Win XP, or with recompiled project for Linux or Mac.

HTML:

<p><input id="loginA" tabindex="3" type="checkbox" name="a" /> Test 1<br/></p> <p><input id="loginB" tabindex="4" type="checkbox" name="b" /> Test 2<br/></p>

QWebview part in C++/QT5:

QVariant result = this->webv->page()->mainFrame()->evaluateJavaScript(jscontent);

If I set the checked attribute via the web inspector's console, it shows the same behaviour as described and only the second one gets checked.

$(":checkbox").attr("checked", true) [<input id=​"loginA" tabindex=​"3" type=​"checkbox" name=​"a" checked=​"checked">​, <input id=​"loginB" tabindex=​"4" type=​"checkbox" name=​"b" checked=​"checked">​]

Any suggestions?? Help would really be appreciated.

Answer 1

Here is the full workaround:

Create a CustomStyle class that extends QProxyStyle:

#ifndef CUSTOMSTYLE_H
#define CUSTOMSTYLE_H

#include <QProxyStyle>
#include <QStyleOption>

class CustomStyle : public QProxyStyle
{
    void drawControl(ControlElement element, const QStyleOption* option, QPainter* painter, const QWidget* widget = 0) const
    {
        if (element == QStyle::CE_CheckBox || 
            element == QStyle::CE_RadioButton) {
            option->styleObject->setProperty("_q_no_animation", true);                          
        }
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};

#endif //CUSTOMSTYLE_H

Set the CustomStyle to your application or webview component:

// like this
QApplication::setStyle(new CustomStyle());

// or like this
ui->webview->setStyle(new CustomStyle());

Note that your QWebView component must not have its "styleSheet" property set. It must be empty. Otherwise it will somehow override our custom style and the workaround won't work.