Material-components-android: [TextInputLayout] "clear_text" end icon is visible for all fields when screen starts

Created on 4 Jun 2020  路  2Comments  路  Source: material-components/material-components-android

Description: When screen starts and EditTexts have predefined text then "clear_text" icons visible for every field.

testapp

Expected behavior: When screen starts and EditTexts have predefined text then "clear_text" icons should not be visible at all. They should be visible only for the currently focused field.

Source code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.main.MainFragment">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/inputLayoutName_PersonalInfoActivity"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:hint="TEST 1"
        app:endIconMode="clear_text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editTextFirstName_PersonalInfoActivity"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:ems="10"
            android:inputType="textCapWords"
            android:maxLength="30"
            android:maxLines="1"
            android:text="firstNameData"
            android:textColor="@android:color/black" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/inputLayoutLastName_PersonalInfoActivity"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:hint="TEST 2"
        app:endIconMode="clear_text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/inputLayoutName_PersonalInfoActivity">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editTextLastName_PersonalInfoActivity"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:ems="10"
            android:inputType="textCapWords"
            android:maxLength="30"
            android:maxLines="1"
            android:text="lastNameData"
            android:textColor="@android:color/black" />
    </com.google.android.material.textfield.TextInputLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Android API version: 29

Material Library version: 1.2.0-beta01

Device: Nexus 5

To help us triage faster, please check to make sure you are using the latest version of the library.

We also happily accept pull requests.

bug

Most helpful comment

yes, It should be solved. I also experience same thing.

All 2 comments

This is still an issue in version 1.3.0-alpha03.
I'm using databinding and the text content gets automatically added to the TextInputEditText. All my fields with text content on startup show the CLEAR_TEXT endIcon (the same as in the gif above), while the rest that are null or empty work as expected.

I found a workaround through BindingAdapters where every time I set a new text value to my EditText I immediately disappear the icon but this is suboptimal.

    @JvmStatic
    @BindingAdapter("app:bindTextToHideIcon")
    fun TextInputEditText.setTextAndHideEndIconAgain(text:String){
        this.setText(text)
        (this.parent.parent as TextInputLayout).isEndIconVisible = false
    }

yes, It should be solved. I also experience same thing.

Was this page helpful?
0 / 5 - 0 ratings