wasm: Make sure typing with window focus does not produce characters

contenteditable on the window caused characters to be inserted.
Instead create a div as a child element, and set  contenteditable
on that.

Fixes: QTBUG-136050
Change-Id: I4ccf3589ea19876f68bb9c7077c3a13ae5f989e6
Reviewed-by: Morten Johan Sørvig <[email protected]>

4 files changed, 33 insertions, 9 deletions

diff --git a/src/plugins/platforms/wasm/qwasmclipboard.cpp b/src/plugins/platforms/wasm/qwasmclipboard.cpp
index e5392f33cd7..ff681398315 100644
--- a/src/plugins/platforms/wasm/qwasmclipboard.cpp
+++ b/src/plugins/platforms/wasm/qwasmclipboard.cpp
@@ -86,6 +86,20 @@ void QWasmClipboard::paste(val event)
     QWasmIntegration::get()->getWasmClipboard()->sendClipboardData(event);
 }
 
+void QWasmClipboard::beforeInput(emscripten::val event)
+{
+    event.call<void>("preventDefault");
+    event.call<void>("stopPropagation");
+}
+
+void QWasmClipboard::input(emscripten::val event)
+{
+    event.call<void>("preventDefault");
+    event.call<void>("stopPropagation");
+    event["target"].set("innerHTML", std::string());
+    event["target"].set("value", std::string());
+}
+
 QWasmClipboard::QWasmClipboard()
 {
     val clipboard = val::global("navigator")["clipboard"];
diff --git a/src/plugins/platforms/wasm/qwasmclipboard.h b/src/plugins/platforms/wasm/qwasmclipboard.h
index 3f24e64ceb5..9b221ded10c 100644
--- a/src/plugins/platforms/wasm/qwasmclipboard.h
+++ b/src/plugins/platforms/wasm/qwasmclipboard.h
@@ -43,6 +43,8 @@ public:
     static void cut(emscripten::val event);
     static void copy(emscripten::val event);
     static void paste(emscripten::val event);
+    static void beforeInput(emscripten::val event);
+    static void input(emscripten::val event);
 
 private:
     void initClipboardPermissions();
diff --git a/src/plugins/platforms/wasm/qwasmwindow.cpp b/src/plugins/platforms/wasm/qwasmwindow.cpp
index eaf9a67e152..5e1bdc35624 100644
--- a/src/plugins/platforms/wasm/qwasmwindow.cpp
+++ b/src/plugins/platforms/wasm/qwasmwindow.cpp
@@ -59,6 +59,7 @@ QWasmWindow::QWasmWindow(QWindow *w, QWasmDeadKeySupport *deadKeySupport,
       m_document(dom::document()),
       m_decoratedWindow(m_document.call<emscripten::val>("createElement", emscripten::val("div"))),
       m_window(m_document.call<emscripten::val>("createElement", emscripten::val("div"))),
+      m_windowInput(m_document.call<emscripten::val>("createElement", emscripten::val("div"))),
       m_a11yContainer(m_document.call<emscripten::val>("createElement", emscripten::val("div"))),
       m_canvas(m_document.call<emscripten::val>("createElement", emscripten::val("canvas")))
 {
@@ -87,18 +88,22 @@ QWasmWindow::QWasmWindow(QWindow *w, QWasmDeadKeySupport *deadKeySupport,
     m_window.set("className", "qt-window");
     m_decoratedWindow.call<void>("appendChild", m_window);
 
+    m_window.call<void>("appendChild", m_windowInput);
     m_canvas["classList"].call<void>("add", emscripten::val("qt-window-canvas"));
 
 #if QT_CONFIG(clipboard)
-    // Set contentEditable so that the window gets clipboard events,
-    // then hide the resulting focus frame.
-    m_window.set("contentEditable", std::string("true"));
-    m_window["style"].set("outline", std::string("none"));
-
     if (QWasmClipboard::shouldInstallWindowEventHandlers()) {
-        m_cutCallback = QWasmEventHandler(m_window, "cut", QWasmClipboard::cut);
-        m_copyCallback = QWasmEventHandler(m_window, "copy", QWasmClipboard::copy);
-        m_pasteCallback = QWasmEventHandler(m_window, "paste", QWasmClipboard::paste);
+        // Set contentEditable so that the window gets clipboard events,
+        // then hide the resulting focus frame.
+        m_windowInput.set("contentEditable", std::string("true"));
+        m_windowInput["style"].set("outline", std::string("none"));
+
+        m_cutCallback = QWasmEventHandler(m_windowInput, "cut", QWasmClipboard::cut);
+        m_copyCallback = QWasmEventHandler(m_windowInput, "copy", QWasmClipboard::copy);
+        m_pasteCallback = QWasmEventHandler(m_windowInput, "paste", QWasmClipboard::paste);
+        m_beforeInputCallback =
+                QWasmEventHandler(m_windowInput, "beforeinput", QWasmClipboard::beforeInput);
+        m_inputCallback = QWasmEventHandler(m_windowInput, "input", QWasmClipboard::input);
     }
 #endif
 
@@ -940,7 +945,7 @@ void QWasmWindow::requestActivateWindow()
 
 void QWasmWindow::focus()
 {
-    m_canvas.call<void>("focus");
+    m_windowInput.call<void>("focus");
 }
 
 bool QWasmWindow::setMouseGrabEnabled(bool grab)
diff --git a/src/plugins/platforms/wasm/qwasmwindow.h b/src/plugins/platforms/wasm/qwasmwindow.h
index 67a3e8ea293..cd7d81aeb38 100644
--- a/src/plugins/platforms/wasm/qwasmwindow.h
+++ b/src/plugins/platforms/wasm/qwasmwindow.h
@@ -143,6 +143,7 @@ private:
     emscripten::val m_document = emscripten::val::undefined();
     emscripten::val m_decoratedWindow = emscripten::val::undefined();
     emscripten::val m_window = emscripten::val::undefined();
+    emscripten::val m_windowInput = emscripten::val::undefined();
     emscripten::val m_a11yContainer = emscripten::val::undefined();
     emscripten::val m_canvas = emscripten::val::undefined();
     emscripten::val m_context2d = emscripten::val::undefined();
@@ -176,6 +177,8 @@ private:
     QWasmEventHandler m_cutCallback;
     QWasmEventHandler m_copyCallback;
     QWasmEventHandler m_pasteCallback;
+    QWasmEventHandler m_beforeInputCallback;
+    QWasmEventHandler m_inputCallback;
 
     Qt::WindowStates m_state = Qt::WindowNoState;
     Qt::WindowStates m_previousWindowState = Qt::WindowNoState;