Refactor implementation

- Simpler logic
- 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
- Add cool ripple effect on clicking the clear input icon

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

@@ -19,11 +19,14 @@ 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.lifecycle.lifecycleScope
@@ -41,6 +44,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 +56,21 @@ 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)
+          }
+        }
       }
 
       override fun bind(questionnaireViewItem: QuestionnaireViewItem) {
@@ -130,6 +141,16 @@ 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
+        clearInputIcon.setOnClickListener {
+          context.lifecycleScope.launch {
+            delay(200) // to show ripple effect on the icon before clearing the answer
+            questionnaireViewItem.clearAnswer()
+          }
+        }
 
         displayValidationResult(questionnaireViewItem.validationResult)
       }

datacapture/src/main/res/drawable/ic_clear.xml

@@ -1,12 +1,13 @@
 <vector
     xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="20dp"
-    android:height="20dp"
+    android:width="24dp"
+    android:height="24dp"
     android:viewportWidth="24"
     android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal"
 >
   <path
-        android:fillColor="#999999"
+        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,7 +13,7 @@
 -->
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
+    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"
@@ -35,37 +35,42 @@
 
     <FrameLayout
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-    >
+        android:layout_height="wrap_content">
 
         <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"
-        >
+            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"
-            />
+                android:drawablePadding="@dimen/icon_drawable_padding" />
 
         </com.google.android.material.textfield.TextInputLayout>
 
-        <ImageView
-            android:id="@+id/clearIcon"
+        <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:layout_marginTop="@dimen/help_container_margin_top"
-            android:layout_marginEnd="@dimen/drop_down_clear_icon_margin"
-            android:padding="@dimen/icon_drawable_padding"
-            android:src="@drawable/ic_clear"
-            android:visibility="gone"
-        />
+            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>
 
     </FrameLayout>
 

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

@@ -95,7 +95,9 @@
 
     <!--  Dropdown  -->
     <dimen name="drop_down_padding">16dp</dimen>
-    <dimen name="drop_down_clear_icon_margin">28dp</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>