Android webview dropdown menu does not work on Android 4.x devices-ThrowExceptions

Exception or error:

I have a problem with one of my WebView on Android 4.x devices.

Android app has a Tabhost which contains Fragments. One of the fragments contains a webview. The displayed page has a dropdown menu like this:

<select id="mySelect" name="mySelect">
    <option value="1">Testname 1</option>
    <option value="2">Testname 2</option>
    <option value="3">Testname 3</option>
</select>

Now when I open my app with a Galaxy S3 with Android 4.1.1 (or any other Android device I could get my hands on) I can select “Testname 1”, then “Testname 2” and so on.

On the Galaxy Nexus (confirmed on different devices running Android 4.1.1, 4.1.2 and 4.2) when I try to select something the UI just blocks. After I switch to another tab and back to the webview tab suddenly the UI finally changes to the previously selected item.

Any idea what is causing this or how I can fix this for the Galaxy Nexus?

Important update:
I could track this down to the Tabhost. When the webview is in the tabhost it does not work, when it is not it works. This might be related to this issue.

How to solve:

You can actually do more with ActionBar than you can with just a TabHost. Including Tabs. link will allow you to implement the ActionBar in older versions minSdk = 4. A majority of the User Experience developers I have worked with think that Tabs are kind of passe although the do provide a familiar UI to users, but who am I to blow against the wind? The ActionBar provides a very Android specific look and clean feel to the UI. link is the documentation on Google’s recommended UI patterns from that conference. link is the YouTube video discussing the UI patterns from the conference. Following these recommendations can provide a better review of your application and more sophisticated UI look for it. I am not sure what your needs are but if you are going to do something, might as well do it right? If you need some more help please let me know. I can get you examples on using the ActionBar. ActionBar link can give you some better reasons that I can why it is a good choice for the UI.

Are you implementing your Fragments correctly? link is the documentation on using them. If you are using dynamic fragments instead of fixed fragments implemented in the layout one trick that I found when writing across applications is to call the .clearBackStack(); when I am having funny issues and it seems to fix a lot of problems.

###

TabHost in ICS? Are you using the compatibility package? Proper design would be to use the ActionBar to implement Tabs if you are working in basically 3.1+.

###

Try using this custom class in your XML layout instead of the normal TabHost:

package com.example.test;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.TabHost;

public class TabHostFix extends TabHost
{
    public TabHostFix(Context context)
    {
        super(context);
    }

    public TabHostFix(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    @Override
    public void onTouchModeChanged(boolean isInTouchMode)
    {
        //do not call through to base class, do nothing
        //this is a fix for tabhost stealing focus from textboxes
    }
}

Reference the custom class in your XML layout like this:

<?xml version="1.0" encoding="utf-8"?>
<com.example.test.TabHostFix xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_weight="0"/>
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
        <FrameLayout
            android:id="@+android:id/realtabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>
</com.example.test.TabHostFix>

EDIT:
As an alternative solution, you may be able replace TabHost completely by using the ViewPager from the support library and a custom View Pager indicator that mimics tabs. I’ve never tried this before, but I have read that there are good free 3rd party view pager indicators here.

###

After Selecting the select, the List item data might change but we can’t see the change. for this we need to explicitly refresh the select component. Hope this might solve the problem.

$("select#HeightUnit option[value='cm']").attr("selected", "selected");
$('select').selectmenu('refresh');

###

> i think u must add the API version on your activity cause some UI cannot compatible on >android API 8. so check the API SDK like this.

>@TargetApi(Build.VERSION_CODES.GINGERBREAD)
>if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.GINGERBREAD)
>{
>// condisition
>}

Leave a Reply

Your email address will not be published. Required fields are marked *