fix: HTML type answer JS value changes

If the template has some kind of script that updates the value of the type answer <input>, the changes wouldn't be shown in the answer comparison unless the user typed something after the changes

Author: BrayanDSO

AnkiDroid/src/main/assets/scripts/ankidroid.js

@@ -22,14 +22,6 @@ globalThis.ankidroid.showAllHints = function () {
     document.querySelectorAll("a.hint").forEach(el => el.click());
 };
 
-/**
- * @param {InputEvent} event - the oninput event of the type answer <input>
- */
-globalThis.ankidroid.onTypeAnswerInput = function (event) {
-    const encodedValue = encodeURIComponent(event.target.value);
-    window.location.href = `ankidroid://typeinput/${encodedValue}`;
-};
-
 /**
  * @param {KeyboardEvent} event - the onkeydown event of the type answer <input>
  */

AnkiDroid/src/main/java/com/ichi2/anki/ui/windows/reviewer/ReviewerFragment.kt

@@ -48,7 +48,6 @@ import androidx.core.view.WindowInsetsControllerCompat
 import androidx.core.view.isVisible
 import androidx.core.view.updateLayoutParams
 import androidx.core.view.updatePadding
-import androidx.core.widget.addTextChangedListener
 import androidx.fragment.app.FragmentContainerView
 import androidx.fragment.app.commit
 import androidx.fragment.app.viewModels
@@ -288,7 +287,7 @@ class ReviewerFragment :
         val typeAnswerContainer = view.findViewById<MaterialCardView>(R.id.type_answer_container)
         val typeAnswerEditText =
             view.findViewById<TextInputEditText>(R.id.type_answer_edit_text).apply {
-                setOnEditorActionListener { editTextView, actionId, _ ->
+                setOnEditorActionListener { _, actionId, _ ->
                     if (actionId == EditorInfo.IME_ACTION_DONE) {
                         viewModel.onShowAnswer()
                         return@setOnEditorActionListener true
@@ -303,11 +302,9 @@ class ReviewerFragment :
                         insetsController.hide(WindowInsetsCompat.Type.ime())
                     }
                 }
-                addTextChangedListener { editable ->
-                    viewModel.typedAnswer = editable?.toString() ?: ""
-                }
             }
 
+        val isHtmlTypeAnswerEnabled = Prefs.isHtmlTypeAnswerEnabled
         lifecycleScope.launch {
             val autoFocusTypeAnswer = Prefs.autoFocusTypeAnswer
             lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
@@ -317,7 +314,7 @@ class ReviewerFragment :
                         return@collect
                     }
 
-                    if (Prefs.isHtmlTypeAnswerEnabled) {
+                    if (isHtmlTypeAnswerEnabled) {
                         webView.requestFocus()
                         webView.evaluateJavascript("document.getElementById('typeans').focus();", null)
                         return@collect
@@ -341,6 +338,22 @@ class ReviewerFragment :
         viewModel.onCardUpdatedFlow.flowWithLifecycle(lifecycle).collectIn(lifecycleScope) {
             typeAnswerEditText.text = null
         }
+
+        viewModel.onTypedAnswerResultFlow
+            .flowWithLifecycle(lifecycle)
+            .collectIn(lifecycleScope) { request ->
+                if (isHtmlTypeAnswerEnabled) {
+                    val script = """document.getElementById("typeans").value;"""
+                    webView.evaluateJavascript(script) { callback ->
+                        // the retuned string comes with surrounding `"`, so remove it once
+                        val typedAnswer = callback.removeSurrounding("\"")
+                        request.complete(typedAnswer)
+                    }
+                } else {
+                    val typedAnswer = typeAnswerEditText.text.toString()
+                    request.complete(typedAnswer)
+                }
+            }
     }
 
     /** Chooses the input type based on whether the expected answer is a number or text */
@@ -719,7 +732,6 @@ class ReviewerFragment :
                     when (url.host) {
                         "focusin" -> webviewHasFocus = true
                         "focusout" -> webviewHasFocus = false
-                        "typeinput" -> url.path?.substring(1)?.let { viewModel.typedAnswer = it }
                         "show-answer" -> viewModel.onShowAnswer()
                     }
                     true

AnkiDroid/src/main/java/com/ichi2/anki/ui/windows/reviewer/ReviewerViewModel.kt

@@ -73,6 +73,7 @@ import kotlinx.coroutines.Deferred
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.withTimeoutOrNull
 import org.intellij.lang.annotations.Language
 import timber.log.Timber
 
@@ -100,6 +101,7 @@ class ReviewerViewModel(
     val redoLabelFlow = MutableStateFlow<String?>(null)
     val countsFlow = MutableStateFlow(Counts() to Counts.Queue.NEW)
     val typeAnswerFlow = MutableStateFlow<TypeAnswer?>(null)
+    val onTypedAnswerResultFlow = MutableSharedFlow<CompletableDeferred<String>>()
     val onCardUpdatedFlow = MutableSharedFlow<Unit>()
     val destinationFlow = MutableSharedFlow<Destination>()
     val editNoteTagsFlow = MutableSharedFlow<NoteId>()
@@ -114,7 +116,7 @@ class ReviewerViewModel(
 
     override val server: AnkiServer = AnkiServer(this, StudyScreenRepository.getServerPort()).also { it.start() }
     private val stateMutationKey = TimeManager.time.intTimeMS().toString()
-    var typedAnswer = ""
+    private var typedAnswer = ""
 
     private val autoAdvance = AutoAdvance(this)
     private val isHtmlTypeAnswerEnabled = Prefs.isHtmlTypeAnswerEnabled
@@ -189,6 +191,17 @@ class ReviewerViewModel(
             while (!statesMutated) {
                 delay(50)
             }
+
+            val typedAnswerResult = CompletableDeferred<String>()
+            if (typeAnswerFlow.value != null) {
+                onTypedAnswerResultFlow.emit(typedAnswerResult)
+            } else {
+                typedAnswerResult.complete("")
+            }
+            typedAnswer = withTimeoutOrNull(1000L) {
+                typedAnswerResult.await()
+            } ?: ""
+
             updateNextTimes()
             showAnswer()
             loadAndPlayMedia(CardSide.ANSWER)
@@ -577,7 +590,7 @@ class ReviewerViewModel(
         val repl =
             """
             <center>
-            <input type="text" id="typeans" oninput="ankidroid.onTypeAnswerInput(event);" onkeydown="ankidroid.onTypeAnswerKeyDown(event);" 
+            <input type="text" id="typeans" onkeydown="ankidroid.onTypeAnswerKeyDown(event);" 
                style="font-family: '${typeAnswer.font}'; font-size: ${typeAnswer.fontSize}px;">
             </center>
             """.trimIndent()