Search code examples
androidonclickappcelerator

Click handler not triggered for textfield with editable="false"


This code has been working until one of the most recent updates to the SDK. Now it only works for iOS - and not for Android (API versions 19-23 tested).

Alloy snippet:

<ScrollView id="form" onClick="clickHandler" onFocus="clickHandler">
    :
    :
<View class="formRow" id="clubRow1">
    <Label id="label_club" />
    <TextField id="club1" class="club" editable="false" bubbleParent="true"></TextField>
</View>

Controller snippet:

function clickHandler(e){
    console.trace('profile.clickHandler: ' + (e.source.id || 'no id!'));
    if(e && e.source){
        :
        :

I use a top-level click handler (results are the same if I have the click handler on the <TextField>). If I remove editable="false" then the click handler is triggered.

I use this functionality to show the user a list of values they can select from (either from a listview with search capabilities or a simple option list if just a few values).

Is there any way I can obtain this functionality again? Is this an error in the SDK - or just me doing something awkward to obtain the functionality?

Environment:

Operating System
  Name                        = Mac OS X
  Version                     = 10.12.1
  Architecture                = 64bit
  # CPUs                      = 8
  Memory                      = 16.0GB

Node.js
  Node.js Version             = 4.5.0
  npm Version                 = 2.15.9

Appcelerator CLI
  Installer                   = 4.2.7
  Core Package                = 5.5.1

Titanium CLI
  CLI Version                 = 5.0.9
  node-appc Version           = 0.2.31

Titanium SDKs
  5.5.0.GA
    Version                   = 5.5.0
    Install Location          = /Users/jda/Library/Application Support/Titanium/mobilesdk/osx/5.5.0.GA
    Platforms                 = android, mobileweb, iphone
    git Hash                  = 44a2e3f
    git Timestamp             = 09/13/16 12:38
    node-appc Version         = 0.2.36

Solution

  • I was informed by another developer on Ti.Slack (@baharroth) that this apparently is a known bug. Just adding it here for everybody else to find.

    It could be solved by using e.g. onTouchEnd or onSimpleTouch. However, an even better solution (in my opinion) is to set focusable="false" and editable="true" for the <TextField> - but only for Android. For iOS it still has to just be editable="false"

    So the best way to implement this is really like this:

    In app.tss:

    ".pickList[platform=android]": {
        focusable:false,
        editable:true   
    }
    ".pickList[platform=ios]": {
        editable:false  
    }
    

    And in the Alloy markup file:

    <TextField id="country" class="pickList" bubbleParent="true"></TextField>
    

    This seems to work fine (for my situation, any way).