Disable typing when dropdown has answer (#2794)

FikriMilano · web-flow · commit cc692a8c258a · 2025-02-20T17:00:16.000Z
* Improve dropdown behavior
- Use `questionnaireViewItem.answers` state to check if the AutoComplete is editable or not
- Remove keyListener to make the AutoComplete not editable
- Hide keyboard after typing an option then clicking the shown option
- Show clear icon when answer is selected

* spotless
diff --git a/datacapture/src/androidTest/java/com/google/android/fhir/datacapture/test/views/DropDownViewHolderFactoryEspressoTest.kt b/datacapture/src/androidTest/java/com/google/android/fhir/datacapture/test/views/DropDownViewHolderFactoryEspressoTest.kt
@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Google LLC
+ * Copyright 2023-2025 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,6 +22,7 @@ import android.widget.FrameLayout
 import android.widget.TextView
 import androidx.test.espresso.Espresso.onData
 import androidx.test.espresso.Espresso.onView
+import androidx.test.espresso.PerformException
 import androidx.test.espresso.action.ViewActions.click
 import androidx.test.espresso.action.ViewActions.typeText
 import androidx.test.espresso.assertion.ViewAssertions.matches
@@ -51,6 +52,7 @@ import org.hl7.fhir.r4.model.Questionnaire
 import org.hl7.fhir.r4.model.QuestionnaireResponse
 import org.hl7.fhir.r4.model.Reference
 import org.hl7.fhir.r4.model.StringType
+import org.junit.Assert.assertThrows
 import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
@@ -274,6 +276,81 @@ class DropDownViewHolderFactoryEspressoTest {
       .isEqualTo(3)
   }
 
+  @Test
+  fun shouldPreventTypingWhenAnswerIsSelectedInAutoCompleteDropdown() {
+    val preselectedAnswer =
+      QuestionnaireResponse.QuestionnaireResponseItemComponent().apply {
+        addAnswer().value = StringType("Coding 1")
+      }
+
+    val questionnaireItem =
+      QuestionnaireViewItem(
+        createAnswerOptions("Coding 1", "Coding 2", "Coding 3"),
+        preselectedAnswer,
+        validationResult = NotValidated,
+        answersChangedCallback = { _, _, _, _ -> },
+      )
+
+    val autoComplete = viewHolder.itemView.findViewById<AutoCompleteTextView>(R.id.auto_complete)
+
+    runOnUI {
+      viewHolder.bind(questionnaireItem)
+      autoComplete.showDropDown()
+    }
+
+    assertThrows(PerformException::class.java) {
+      onView(withId(R.id.auto_complete)).perform(typeText("new text"))
+    }
+
+    assertThat(autoComplete.text.toString()).isEqualTo("Coding 1")
+  }
+
+  @Test
+  fun shouldSelectAndClearAnswerInAutoCompleteDropdown() {
+    var selectedAnswers: List<QuestionnaireResponse.QuestionnaireResponseItemAnswerComponent>? =
+      null
+    val answerOptions = listOf("Coding 1", "Coding 2", "Coding 3")
+
+    var questionnaireItem =
+      QuestionnaireViewItem(
+        createAnswerOptions(*answerOptions.toTypedArray()),
+        responseValueStringOptions(),
+        validationResult = NotValidated,
+        answersChangedCallback = { _, _, answers, _ -> selectedAnswers = answers },
+      )
+
+    val autoComplete = viewHolder.itemView.findViewById<AutoCompleteTextView>(R.id.auto_complete)
+
+    runOnUI {
+      viewHolder.bind(questionnaireItem)
+      autoComplete.showDropDown()
+    }
+
+    // Test selection flow
+    onView(withText("Coding 1"))
+      .inRoot(isPlatformPopup())
+      .check(matches(isDisplayed()))
+      .perform(click())
+
+    assertThat(selectedAnswers).hasSize(1)
+    assertThat((selectedAnswers!!.first().value as StringType).valueAsString).isEqualTo("Coding 1")
+
+    // Test clearing flow
+    questionnaireItem =
+      QuestionnaireViewItem(
+        createAnswerOptions(*answerOptions.toTypedArray()),
+        responseValueStringOptions().apply { answer = selectedAnswers },
+        validationResult = NotValidated,
+        answersChangedCallback = { _, _, answers, _ -> selectedAnswers = answers },
+      )
+
+    runOnUI { viewHolder.bind(questionnaireItem) }
+
+    onView(withId(R.id.clear_input_icon)).perform(click())
+
+    assertThat(selectedAnswers).isEmpty()
+  }
+
   @Test
   fun shouldReturnFilteredWithNoResultsDropDownMenuItems() {
     val questionnaireViewItem =
diff --git a/datacapture/src/main/java/com/google/android/fhir/datacapture/views/factories/DropDownViewHolderFactory.kt b/datacapture/src/main/java/com/google/android/fhir/datacapture/views/factories/DropDownViewHolderFactory.kt
@@ -1,5 +1,5 @@
 /*
- * Copyright 2022-2024 Google LLC
+ * Copyright 2022-2025 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,13 +19,17 @@ package com.google.android.fhir.datacapture.views.factories
 import android.content.Context
 import android.graphics.drawable.Drawable
 import android.text.Spanned
+import android.text.method.TextKeyListener
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import android.view.inputmethod.InputMethodManager
 import android.widget.AdapterView
 import android.widget.ArrayAdapter
+import android.widget.ImageView
 import android.widget.TextView
 import androidx.appcompat.app.AppCompatActivity
+import androidx.core.view.doOnNextLayout
 import androidx.lifecycle.lifecycleScope
 import com.google.android.fhir.datacapture.R
 import com.google.android.fhir.datacapture.extensions.displayString
@@ -52,14 +56,28 @@ internal object DropDownViewHolderFactory :
       private lateinit var header: HeaderView
       private lateinit var textInputLayout: TextInputLayout
       private lateinit var autoCompleteTextView: MaterialAutoCompleteTextView
+      private lateinit var clearInputIcon: ImageView
       override lateinit var questionnaireViewItem: QuestionnaireViewItem
       private lateinit var context: AppCompatActivity
 
       override fun init(itemView: View) {
         header = itemView.findViewById(R.id.header)
         textInputLayout = itemView.findViewById(R.id.text_input_layout)
         autoCompleteTextView = itemView.findViewById(R.id.auto_complete)
+        clearInputIcon = itemView.findViewById(R.id.clear_input_icon)
         context = itemView.context.tryUnwrapContext()!!
+        autoCompleteTextView.setOnFocusChangeListener { view, hasFocus ->
+          if (!hasFocus) {
+            (view.context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager)
+              .hideSoftInputFromWindow(view.windowToken, 0)
+          }
+        }
+        clearInputIcon.setOnClickListener {
+          context.lifecycleScope.launch {
+            questionnaireViewItem.clearAnswer()
+            autoCompleteTextView.doOnNextLayout { autoCompleteTextView.showDropDown() }
+          }
+        }
       }
 
       override fun bind(questionnaireViewItem: QuestionnaireViewItem) {
@@ -130,6 +148,10 @@ internal object DropDownViewHolderFactory :
               }
             }
           }
+        val isEditable = questionnaireViewItem.answers.isEmpty()
+        if (!isEditable) autoCompleteTextView.clearFocus()
+        autoCompleteTextView.keyListener = if (isEditable) TextKeyListener.getInstance() else null
+        clearInputIcon.visibility = if (isEditable) View.GONE else View.VISIBLE
 
         displayValidationResult(questionnaireViewItem.validationResult)
       }
diff --git a/datacapture/src/main/res/drawable/ic_clear.xml b/datacapture/src/main/res/drawable/ic_clear.xml
@@ -0,0 +1,13 @@
+<vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal"
+>
+  <path
+        android:fillColor="@android:color/white"
+        android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"
+    />
+</vector>
diff --git a/datacapture/src/main/res/layout/drop_down_view.xml b/datacapture/src/main/res/layout/drop_down_view.xml
@@ -13,6 +13,7 @@
 -->
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginHorizontal="@dimen/item_margin_horizontal"
@@ -32,21 +33,40 @@
         android:layout_height="wrap_content"
     />
 
-    <com.google.android.material.textfield.TextInputLayout
-        style="?attr/questionnaireDropdownLayoutStyle"
-        android:id="@+id/text_input_layout"
+    <FrameLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
     >
 
-        <com.google.android.material.textfield.MaterialAutoCompleteTextView
-            style="?attr/questionnaireDropDownSelectedTextStyle"
-            android:id="@+id/auto_complete"
-            android:drawablePadding="@dimen/icon_drawable_padding"
+        <com.google.android.material.textfield.TextInputLayout
+            android:id="@+id/text_input_layout"
+            style="?attr/questionnaireDropdownLayoutStyle"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
+        >
+
+            <com.google.android.material.textfield.MaterialAutoCompleteTextView
+                android:id="@+id/auto_complete"
+                style="?attr/questionnaireDropDownSelectedTextStyle"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:drawablePadding="@dimen/icon_drawable_padding"
+            />
+
+        </com.google.android.material.textfield.TextInputLayout>
+
+        <ImageView
+            android:id="@+id/clear_input_icon"
+            android:layout_width="20dp"
+            android:layout_height="20dp"
+            android:layout_marginTop="@dimen/drop_down_clear_icon_margin_top"
+            android:layout_marginEnd="@dimen/drop_down_clear_icon_margin_end"
+            android:layout_gravity="end|center_vertical"
+            android:src="@drawable/ic_clear"
+            android:scaleType="fitCenter"
+            app:tint="#999999"
         />
 
-    </com.google.android.material.textfield.TextInputLayout>
+    </FrameLayout>
 
 </LinearLayout>
diff --git a/datacapture/src/main/res/values/dimens.xml b/datacapture/src/main/res/values/dimens.xml
@@ -95,6 +95,8 @@
 
     <!--  Dropdown  -->
     <dimen name="drop_down_padding">16dp</dimen>
+    <dimen name="drop_down_clear_icon_margin_end">38dp</dimen>
+    <dimen name="drop_down_clear_icon_margin_top">4dp</dimen>
 
     <!--  Item Answer Media  -->
     <dimen name="item_answer_media_image_size">48dp</dimen>
diff --git a/datacapture/src/test/java/com/google/android/fhir/datacapture/views/factories/DropDownViewHolderFactoryTest.kt b/datacapture/src/test/java/com/google/android/fhir/datacapture/views/factories/DropDownViewHolderFactoryTest.kt
@@ -1,5 +1,5 @@
 /*
- * Copyright 2023-2024 Google LLC
+ * Copyright 2023-2025 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,6 +19,7 @@ package com.google.android.fhir.datacapture.views.factories
 import android.view.View
 import android.widget.AutoCompleteTextView
 import android.widget.FrameLayout
+import android.widget.ImageView
 import android.widget.TextView
 import androidx.appcompat.app.AppCompatActivity
 import com.google.android.fhir.datacapture.R
@@ -319,6 +320,56 @@ class DropDownViewHolderFactoryTest {
       .isEqualTo(View.GONE)
   }
 
+  @Test
+  fun shouldHideClearIconWhenTextIsEmpty() {
+    val answerOption =
+      Questionnaire.QuestionnaireItemAnswerOptionComponent().apply {
+        value =
+          Coding().apply {
+            code = "code"
+            display = "display"
+          }
+      }
+
+    viewHolder.bind(
+      QuestionnaireViewItem(
+        Questionnaire.QuestionnaireItemComponent().apply { addAnswerOption(answerOption) },
+        QuestionnaireResponse.QuestionnaireResponseItemComponent(),
+        validationResult = NotValidated,
+        answersChangedCallback = { _, _, _, _ -> },
+      ),
+    )
+
+    val clearIcon = viewHolder.itemView.findViewById<ImageView>(R.id.clear_input_icon)
+    assertThat(clearIcon.visibility).isEqualTo(View.GONE)
+  }
+
+  @Test
+  fun shouldShowClearIconWhenTextIsNotEmpty() {
+    val answerOption =
+      Questionnaire.QuestionnaireItemAnswerOptionComponent().apply {
+        value =
+          Coding().apply {
+            code = "code"
+            display = "display"
+          }
+      }
+
+    viewHolder.bind(
+      QuestionnaireViewItem(
+        Questionnaire.QuestionnaireItemComponent().apply { addAnswerOption(answerOption) },
+        QuestionnaireResponse.QuestionnaireResponseItemComponent().apply {
+          addAnswer().apply { value = answerOption.valueCoding }
+        },
+        validationResult = NotValidated,
+        answersChangedCallback = { _, _, _, _ -> },
+      ),
+    )
+
+    val clearIcon = viewHolder.itemView.findViewById<ImageView>(R.id.clear_input_icon)
+    assertThat(clearIcon.visibility).isEqualTo(View.VISIBLE)
+  }
+
   @Test
   fun bind_readOnly_shouldDisableView() {
     viewHolder.bind(
