EditText has focus change event fired infinitely when changing compound drawable in focus listener

Question

I have a custom edittext control which has a clear (x) icon set on the right when it's in focus and has text. Clicking the clear icon removes the text from the textbox. Unfortunately, when you click into the textbox, the focus change event is fired infinitely, as changing the compound drawable within the focus change listener seems to fire off two more focus change events, the first with the focus off, and the second with the focus back on. Any idea how I can get this working without the infinite loop?

Here is the code:

public class CustomEditText : EditText {
        private Drawable clearButton;

        protected CustomEditText (IntPtr javaReference, JniHandleOwnership transfer) : base (javaReference, transfer) {
        }

        public CustomEditText (Context context) : base (context) {
            Init ();
        }

        public CustomEditText (Context context, IAttributeSet attrs) : base (context, attrs) {
            Init (attrs);
        }

        public CustomEditText (Context context, IAttributeSet attrs, int defStyle) : base (context, attrs, defStyle) {
            Init (attrs);
        }

        protected void Init (IAttributeSet attrs = null) {
            // Set up clear button
            SetupClearButton ();
            SetupEvents ();
        }

        private void SetupClearButton () {
            clearButton = ContextCompat.GetDrawable (Android.App.Application.Context, Resource.Drawable.forms_edit_text_clear_gray);
            clearButton.SetBounds (0, 0, clearButton.IntrinsicWidth, clearButton.IntrinsicHeight);
        }

        private void SetupEvents () {
            // Handle clear button visibility
            this.TextChanged += (sender, e) => {
                if (this.HasFocus)
                    UpdateClearButton ();
            };
            this.FocusChange += (object sender, FocusChangeEventArgs e) => {
                UpdateClearButton (e.HasFocus);// Gets called infinitely
            };

            // Handle clearing the text
            this.Touch += (sender, e) => {
                if (this.GetCompoundDrawables ()[2] != null && 
                    e.Event.Action == MotionEventActions.Up &&
                    e.Event.GetX () > (this.Width - this.PaddingRight - clearButton.IntrinsicWidth)) {
                    this.Text = "";
                    UpdateClearButton ();
                    e.Handled = true;
                } else
                    e.Handled = false;
            };
        }

        private void UpdateClearButton (bool hasFocus = true) {
            var compoundDrawables = this.GetCompoundDrawables ();
            var compoundDrawable = this.Text.Length == 0 || !hasFocus ? null : clearButton;
            if (compoundDrawables[2] != compoundDrawable)
                this.SetCompoundDrawables (compoundDrawables[0], compoundDrawables[1], compoundDrawable, compoundDrawables[3]);
        }
    }

Answer 1

I ported DroidParts' ClearableEditText to Xamarin.Android to use when using the Android's Support Library widgets were not appropriate.

Note: DroidParts is under Apache 2.0 license so I can not post my C# derivative in full to StackOverflow, but the key to avoiding the continuous focus changing is in the OnTouch and OnFocusChange methods and the fact that the listeners are added to the base EditText Widget.

Full Code @ https://gist.github.com/sushihangover/01a7965aae75d8ef0589697aa8f0e750

public bool OnTouch(View v, MotionEvent e)
{
    if (GetDisplayedDrawable() != null)
    {
        int x = (int)e.GetX();
        int y = (int)e.GetY();
        int left = (loc == Location.LEFT) ? 0 : Width - PaddingRight - xD.IntrinsicWidth;
        int right = (loc == Location.LEFT) ? PaddingLeft + xD.IntrinsicWidth : Width;
        bool tappedX = x >= left && x <= right && y >= 0 && y <= (Bottom - Top);
        if (tappedX)
        {
            if (e.Action == MotionEventActions.Up)
            {
                Text = "";
                if (listener != null)
                {
                    listener.DidClearText();
                }
            }
            return true;
        }
    }
    if (l != null)
        return l.OnTouch(v, e);
    return false;
}

public void OnFocusChange(View v, bool hasFocus)
{
    if (hasFocus)
        SetClearIconVisible(!string.IsNullOrEmpty(Text));
    else
        SetClearIconVisible(false);
    if (f != null)
        f.OnFocusChange(v, hasFocus);
}

Original StackOverflow Q/A: How to create EditText with cross(x) button at end of it?