Material-components-android: [ExposedDropDownMenu] Changes keyboard input type even if non-editable

Created on 25 Mar 2020  路  4Comments  路  Source: material-components/material-components-android

Description: I have a non-editable ExposedDropDownMenu (country) and a regular TextInputLayout below it (phone), with inputType="phone". When phone input layout is focused, the keyboard is open and shows big digit keys. I tap on the country dropdown, and the keyboard remains open, but suddenly changes to regular text input type.

Expected behavior: The keyboard should hide or maybe stay in the same input type as before the click on dropdown menu.

Source code: https://gist.github.com/alaershov/e85222cdddef99b14059088247655615

Android API version: 29

Material Library version: 1.1.0, 1.2.0-alpha05

Device: Nokia 6.1

bug

Most helpful comment

Problem 1: Hide keyboard when clicked on ExposedDropDownMenu if inputType is none and is supposed to work like a non-editable dropdown menu.
Solution: Just having inputType = none in xml doesn't work. In addition to that, you need to update inputType in code too.

(input_layout_country.editText as AutoCompleteTextView).inputType = EditorInfo.TYPE_NULL

Problem 2: Hide keyboard when focus from other TextInputLayout changes to the ExposedDropDownMenu
Solution: Add a view focus change listener on the dropdown menu and hide the keyboard

edit_text_country.onFocusChangeListener = View.OnFocusChangeListener { v: View?, hasFocus ->
    if (hasFocus) {
        hideKeyboard()
    }
}

All 4 comments

Problem 1: Hide keyboard when clicked on ExposedDropDownMenu if inputType is none and is supposed to work like a non-editable dropdown menu.
Solution: Just having inputType = none in xml doesn't work. In addition to that, you need to update inputType in code too.

(input_layout_country.editText as AutoCompleteTextView).inputType = EditorInfo.TYPE_NULL

Problem 2: Hide keyboard when focus from other TextInputLayout changes to the ExposedDropDownMenu
Solution: Add a view focus change listener on the dropdown menu and hide the keyboard

edit_text_country.onFocusChangeListener = View.OnFocusChangeListener { v: View?, hasFocus ->
    if (hasFocus) {
        hideKeyboard()
    }
}

Problem 1 from above comment is fixed in 1.2.0-alpha06 with MaterialAutoCompleteTextView. But the problem 2 is still there.

Be careful with the onFocusChangeListener. I've spent hours today finding out why this approach does not work in our app.

Turned out that setting the endIconMode = TextInputLayout.END_ICON_DROPDOWN_MENU internally calls DropdownMenuEndIconDelegate#setUpDropdownShowHideBehavior which sets custom OnFocusChangeListener, effectively invalidating our custom listener :(

@Antimonit I have set a custom OnFocusChangeListener and the code is working fine. The keyboard hid.

However, there is a small UI glitch. First, the dropdown appears when the keyboard is still shown. Then, the keyboard hides and the dropdown will resize to take the newly available free space.

If it contains 4 or more items, the dropdown will either move from up to down or will show all items instead of a scrollbar.

Was this page helpful?
0 / 5 - 0 ratings