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

Asked 19/11, 2012 at 13:52 Answered 3/7, 2013 at 4:46

android android-fragments android-webview android-tabhost

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.

Maneater answered 19/11, 2012 at 13:52 Comment(8)

forum.jquery.com/topic/… – Anglin 23/11, 2012 at 12:41

Seems unrelated, as my minimal example only contains the code above (+<html><body> and so on) and no jquery anymore at all – Maneater 23/11, 2012 at 12:47

Not sure if this will make a difference but maybe its worth a shot use @+id/mySelect for the id – Obeisance 27/11, 2012 at 21:30

@Raanan No solution yet, except replacing the TabHost :( – Maneater 12/4, 2013 at 8:12

Are you using Tabhost from the support library? – Rightward 19/1, 2014 at 17:12

@Tim Have you got any new leads for this issue ? I have exactly the same on and I've been struggling with it for 2-3days now ! – Incisor 13/2, 2014 at 15:15

Actually I still do not have a fix for this. However Raanan build a workaround for this. Not entirely sure how the solution was, but basically inject javascript that catches the touch event, and instead of showing the list in the browser show a native Element with your options. After a selection inject javascript that changes the elements accordingly. For a more detailed description you will have to ask Raanan. – Maneater 14/2, 2014 at 12:47

Thank you very much @Tim, but I think I will rather replace my old TabHost by a ActionBar ! – Incisor 18/2, 2014 at 11:0

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.

Hydrous answered 21/12, 2012 at 12:52 Comment(1)

Hi Sean, the link will not enable me to use the ActionBar in previous versions of Android, see ActionBarSherlock for that for instance. However, another answer of you stating that I should use the ActionBar instead will still not solve the problem at hand. And I already stated that I cannot use it because I cannot implement what I have to implement with it (and yes, I have read the docs and no, I cannot go into the details right now). Now I could implement everything manually without the TabHost (that does work), the question is still, why is it not working with the TabHost? – Maneater 21/12, 2012 at 21:46

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+.

Hydrous answered 19/12, 2012 at 21:2 Comment(2)

There are still reasons to use the TabHost instead of the ActionBar, one being compatibility with Android 2.3, others being e.g. that I cannot do everything with the ActionBar that I can do with the TabHost. – Maneater 19/12, 2012 at 22:45

use this for any extra issues with the ActionBar it has helped me in the past, you can import the libraries and see the code. If you are more specific I can probably post an example for you. In the link you posted inside your question there is a workaround at the bottom of the article. Let me know what I can do to help. link is the link to the fragments examples with Sherlock library. Seriously let me know if you are stuck. – Hydrous 26/12, 2012 at 12:48

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.

Malfunction answered 29/1, 2013 at 5:15 Comment(3)

Also, I would agree that using ActionBar Tabs would be ideal -- but there are some rare cases where TabHost is more flexible, such as if you want to force stacked tabs no matter the device/orientation, etc. If the only reason you are not using ActionBar Tabs is because of backwards compatibility then I would highly recommend the ActionBarSherlock library. It is easy to use and doesn't take much time to setup. – Malfunction 29/1, 2013 at 5:32

I tried this, but it does not work (still the same behaviour as before) :( – Maneater 29/1, 2013 at 13:47

very interesting... i just tested with the emulator running 4.1 and can confirm the same results as you. The code I posted above fixes the tabhost from stealing focus on textboxes, but does NOT correct the strange behavior with drop downs in a webview. – Malfunction 30/1, 2013 at 5:59

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');

Danaus answered 10/6, 2013 at 14:7 Comment(5)

Can you give me some more context how this is supposed to solve the problem and not make my UI block anymore? – Maneater 10/6, 2013 at 17:17

Html refresh is the most important one. When give the Select as like previously.The value will be set. When we clicked on it, the Webview make it open as the Drop down. but when we change the value will be changed but in the webview it might not refresh. So we need to explicitly refresh/ going to another tab and comes to webview tab will any way refresh the screen. In your case $('#select#mySelect').attr('selected','selected'); $('select').selectmenu('refresh');. will refresh that select component alone in the webview – Danaus 11/6, 2013 at 7:18

So, this might refresh the select menu, right? BUT: The whole UI would still be blocked. I would still not be able to select anything else, other UI elements and so on. – Maneater 11/6, 2013 at 11:44

Can you run the application using weinre and check whether any other javascript errors are there. – Danaus 12/6, 2013 at 5:29

What Javascript errors? I mean, the code above is pretty much ALL that there is. There is no Javascript that runs. – Maneater 12/6, 2013 at 8:34

-2

> 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
>}

Arlaarlan answered 3/7, 2013 at 4:46 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags