Duplicated optionDialog showing in iOS 7.1 using Titanium SDK 3.2.0.GA

Question

I'm working with Titanium SDK 3.2.0.GA, Titanium Studio 3.2.0, the iOS SDK I have is 7.0.3 and I'm deploying to a n iPad with 7.1.1.

Every time I show an optionDialog in the app, a duplicated list of options is shown too, as if two scrollviews were being shown on the dialog, one can tell a duplicated is created because if I try to scroll the optionDialog, one of the scrollviews is being scrolled while the other stays static in the background.

I made sure I'm creating one optionDialog only, this is my code:

function setMultiOptions()
{
    // se crea un option dialog nuevo cada vez que se cambien los options
    var optionDialog = Ti.UI.createOptionDialog({
        title : 'Selecciona una opción:',
        options : extraMultiOptions,
        cancel : parseInt(extraMultiOptions.length - 1)
    });
    optionDialog.addEventListener('click', function(e){
        // si el indice seleccionado no es el de cancelar, procede con la seleccion de la opcion
        if(e.index !== parseInt(extraMultiOptions.length - 1))
        {
            $.ExtraMultiOptionValue.text = extraMultiOptions[e.index];
            extraValue = extraMultiOptions[e.index]; 
            if(extraName === 'Entidades')
            {
                Alloy.Globals.GlobalFunctions.ClearCP();
                Alloy.Globals.GlobalFunctions.GetMunicipios(e.index + 1);
            }
            else if(extraName === 'Municipios')
            {
                Alloy.Globals.GlobalFunctions.ClearCP();
            }
        }// de lo contrario, limpia el campo y la variable de value
        else
        {
            $.ExtraMultiOptionValue.setText('');
            extraValue = '';
        }
    });
    // si hay options,  gestiona el comportamiento
    if(extraMultiOptions.length > 0)
    {
        // si son entidades, asigna un evento unico para el campo 
        if(extraName === 'Entidades')
        {
            singletapCallback = function(e){
                $.ShowMultiOptionView.animate({
                    backgroundColor : categoryColor
                }, function(){
                    $.ShowMultiOptionView.animate({
                        backgroundColor : 'transparent'
                    });
                });
                optionDialog.show();
            };
            $.ExtraMultiOptionData.addEventListener('singletap', singletapCallback);
        } // si son municipios, reemplaza la funcion global para el contexto nuevo (municipios cambian en base a entidad, por lo tanto el contexto en municipios siempre cambia y no es unico)
        else if(extraName === 'Municipios')
        {
            Alloy.Globals.GlobalFunctions.SingletapHandler = function(e){
                Ti.API.info('single tap handler');
                $.ShowMultiOptionView.animate({
                    backgroundColor : categoryColor
                }, function(){
                    $.ShowMultiOptionView.animate({
                        backgroundColor : 'transparent'
                    });
                });
                optionDialog.show();
            };
            if(!singletapAdded)
            {
                Ti.API.info('event is not added yet, adding now...');
                singletapAdded = true;
                $.ExtraMultiOptionData.addEventListener('singletap', function(e){
                    if(canShowDialog)
                    {
                        Alloy.Globals.GlobalFunctions.SingletapHandler();
                    }
                });
            }
            else
            {
                Ti.API.info('event has been added');
            }
        } // si no es ni entidad ni municipio, agrega un evento sin nombre
        else
        {
            $.ExtraMultiOptionData.addEventListener('singletap', function(e){

                $.ShowMultiOptionView.animate({
                    backgroundColor : categoryColor
                }, function(){
                    $.ShowMultiOptionView.animate({
                        backgroundColor : 'transparent'
                    });
                });
                optionDialog.show();
            });
        }
    }
}

In my function I create an instance of the optionDialog filled with an array of options, I set its click event and after that I check if the number of options is greater than 0, I check the value of a variable called extraName which indicates what kind of options are present inside the optionDialog. If extraName's value is 'Entidades' I add a unique singletap event to the view that will show the optionDialog, if the value is 'Municipios' I overwrite a global function and assign only one time the singletap event to the view that shows the optionDialog, the event calls the global function which will be changing according to the options sent for the optionDialog. If the extraName's values is neither 'Entidades' nor 'Municipios' then I add an anonymous function to the singletap event.

In every case I added infos to check if the singletap event was being added more than one time, but the event were being added only one time.

For some reason, the optionDialog is being displayed with two scrollviews with options inside and I haven't found an explanation for why this is happening or how is that even possible.

I leave this screenshot

Answer 1

The solution for this was a new property added since 3.2.0 called opaquebackground, this must be set to true on iPad to avoid this problem.

Sadly the documentation doesn't warn you about it on the platform specific considerations at the start of the documentation, so it's really easy to miss since all of the properties in the documentation are collapsed.

Worse is that a google search for titanium optiondialog ghost nor titanium optiondialog duplicate doesn't direct you to this property at all, you have to use the exact word ghosting which is really alien to many of us who are not native english speakers.

I opened a JIRA ticket requesting a documentation update but let's see if they even bother since the response I got was kinda aggressive. Check the JIRA ticket here.