Improve Dropdown Behavior in Questionnaire Items

datacapture/src/androidTest/java/com/google/android/fhir/datacapture/test/views/DropDownViewHolderFactoryEspressoTest.kt

@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Google LLC
+ * Copyright 2023-2024 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -274,6 +274,33 @@ class DropDownViewHolderFactoryEspressoTest {
       .isEqualTo(3)
   }
 
+  @Test
+  fun shouldShowDropDownWhenClearIconIsClicked() {
+    val questionnaireViewItem =
+      QuestionnaireViewItem(
+        createAnswerOptions("Coding 1", "Coding 2", "Coding 3", "Add", "Subtract"),
+        responseValueStringOptions(),
+        validationResult = NotValidated,
+        answersChangedCallback = { _, _, _, _ -> },
+      )
+    val autoCompleteTextView =
+      viewHolder.itemView.findViewById<AutoCompleteTextView>(R.id.auto_complete)
+
+    runOnUI {
+      viewHolder.bind(questionnaireViewItem)
+      autoCompleteTextView.setText("Some Text")
+    }
+
+    // Delay the execution to allow the view hierarchy to be fully initialized
+    Thread.sleep(1000)
+
+    // Click the clear icon
+    onView(withId(R.id.clearIcon)).perform(click())
+
+    // Verify that the drop-down is shown
+    onView(withText("Coding 1")).inRoot(isPlatformPopup()).check(matches(isDisplayed()))
+  }
+
   @Test
   fun shouldReturnFilteredWithNoResultsDropDownMenuItems() {
     val questionnaireViewItem =

datacapture/src/main/java/com/google/android/fhir/datacapture/views/factories/DropDownViewHolderFactory.kt

@@ -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.FrameLayout
 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
@@ -41,6 +45,7 @@ import com.google.android.fhir.datacapture.views.HeaderView
 import com.google.android.fhir.datacapture.views.QuestionnaireViewItem
 import com.google.android.material.textfield.MaterialAutoCompleteTextView
 import com.google.android.material.textfield.TextInputLayout
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 import org.hl7.fhir.r4.model.QuestionnaireResponse
 import timber.log.Timber
@@ -52,14 +57,28 @@ internal object DropDownViewHolderFactory :
       private lateinit var header: HeaderView
       private lateinit var textInputLayout: TextInputLayout
       private lateinit var autoCompleteTextView: MaterialAutoCompleteTextView
+      private lateinit var clearInputIcon: FrameLayout
       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 {
+            delay(200) // to show ripple effect on the icon before clearing the answer
+            questionnaireViewItem.clearAnswer()
+            autoCompleteTextView.doOnNextLayout { autoCompleteTextView.showDropDown() }
+          }
+        }
       }
 
       override fun bind(questionnaireViewItem: QuestionnaireViewItem) {
@@ -130,6 +149,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)
       }

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>

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,45 @@
         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"
-    >
+        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>
+
+        <FrameLayout
+            android:id="@+id/clear_input_icon"
+            android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-        />
+            android:background="?attr/selectableItemBackgroundBorderless"
+            android:layout_gravity="end|center_vertical"
+            android:padding="@dimen/drop_down_clear_input_icon_ripple_padding"
+            android:layout_marginTop="@dimen/drop_down_clear_icon_margin_top"
+            android:layout_marginEnd="@dimen/drop_down_clear_icon_margin_end">
+
+            <ImageView
+                android:layout_width="20dp"
+                android:layout_height="20dp"
+                android:layout_gravity="center"
+                android:src="@drawable/ic_clear"
+                android:scaleType="fitCenter"
+                app:tint="#999999"/>
+
+        </FrameLayout>
 
-    </com.google.android.material.textfield.TextInputLayout>
+    </FrameLayout>
 
 </LinearLayout>

datacapture/src/main/res/values/dimens.xml

@@ -95,6 +95,9 @@
 
     <!--  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>
+    <dimen name="drop_down_clear_input_icon_ripple_padding">4dp</dimen>
 
     <!--  Item Answer Media  -->
     <dimen name="item_answer_media_image_size">48dp</dimen>

datacapture/src/test/java/com/google/android/fhir/datacapture/views/factories/DropDownViewHolderFactoryTest.kt

@@ -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,58 @@ class DropDownViewHolderFactoryTest {
       .isEqualTo(View.GONE)
   }
 
+  @Test
+  fun shouldHideClearIconWhenTextIsEmpty() {
+    val answerOption =
+      Questionnaire.QuestionnaireItemAnswerOptionComponent().apply {
+        value =
+          Coding().apply {
+            code = "test-code"
+            display = "Test Code"
+          }
+      }
+
+    viewHolder.bind(
+      QuestionnaireViewItem(
+        Questionnaire.QuestionnaireItemComponent().apply { addAnswerOption(answerOption) },
+        QuestionnaireResponse.QuestionnaireResponseItemComponent(),
+        validationResult = NotValidated,
+        answersChangedCallback = { _, _, _, _ -> },
+      ),
+    )
+
+    val clearIcon = viewHolder.itemView.findViewById<ImageView>(R.id.clearIcon)
+    assertThat(clearIcon.visibility).isEqualTo(View.GONE)
+  }
+
+  @Test
+  fun shouldShowClearIconWhenTextIsNotEmpty() {
+    val answerOption =
+      Questionnaire.QuestionnaireItemAnswerOptionComponent().apply {
+        value =
+          Coding().apply {
+            code = "test-code"
+            display = "Test Code"
+          }
+      }
+
+    viewHolder.bind(
+      QuestionnaireViewItem(
+        Questionnaire.QuestionnaireItemComponent().apply { addAnswerOption(answerOption) },
+        QuestionnaireResponse.QuestionnaireResponseItemComponent(),
+        validationResult = NotValidated,
+        answersChangedCallback = { _, _, _, _ -> },
+      ),
+    )
+
+    val autoCompleteTextView =
+      viewHolder.itemView.findViewById<AutoCompleteTextView>(R.id.auto_complete)
+    val clearIcon = viewHolder.itemView.findViewById<ImageView>(R.id.clearIcon)
+    autoCompleteTextView.setText("Some Text")
+
+    assertThat(clearIcon.visibility).isEqualTo(View.VISIBLE)
+  }
+
   @Test
   fun bind_readOnly_shouldDisableView() {
     viewHolder.bind(