Disabling keyboard navigation on the ComboBox control in Flex

The following example shows how you can disable keyboard navigation in a Flex ComboBox control by extending the ComboBox class and overriding the protected keyDownHandler() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/16/disabling-keyboard-navigation-on-the-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white" >

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:Form>
        <mx:FormItem label="MXML:">
            <comps:MyComboBoxMXML id="comboBoxMXML"
                    dataProvider="{arr}" />
        </mx:FormItem>
        <mx:FormItem label="ActionScript:">
            <comps:MyComboBoxAS id="comboBoxAS"
                    dataProvider="{arr}" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

comps/MyComboBoxMXML.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/16/disabling-keyboard-navigation-on-the-combobox-control-in-flex/ -->
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            override protected function keyDownHandler(event:KeyboardEvent):void {
                // ignore
            }
        ]]>
    </mx:Script>

</mx:ComboBox>

comps/MyComboBoxAS.as

/**
 * http://blog.flexexamples.com/2008/07/16/disabling-keyboard-navigation-on-the-combobox-control-in-flex/
 */
package comps {
    import flash.events.KeyboardEvent;
    import mx.controls.ComboBox;

    public class MyComboBoxAS extends ComboBox {
        public function MyComboBoxAS() {
            super();
        }

        override protected function keyDownHandler(event:KeyboardEvent):void {
            // ignore
        }
    }
}

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/16/disabling-keyboard-navigation-on-the-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.Form;
            import mx.containers.FormItem;
            import comps.*;

            private var arr:Array;
            private var myComboBoxMXML:MyComboBoxMXML;
            private var myComboBoxAS:MyComboBoxAS;

            private function init():void {
                arr = [];
                arr.push({label:"One"});
                arr.push({label:"Two"});
                arr.push({label:"Three"});
                arr.push({label:"Four"});
                arr.push({label:"Five"});
                arr.push({label:"Six"});
                arr.push({label:"Seven"});
                arr.push({label:"Eight"});
                arr.push({label:"Nine"});
                arr.push({label:"Ten"});

                myComboBoxMXML = new MyComboBoxMXML();
                myComboBoxMXML.dataProvider = arr;

                var formItem1:FormItem = new FormItem();
                formItem1.label = "MXML:";
                formItem1.addChild(myComboBoxMXML);

                myComboBoxAS = new MyComboBoxAS();
                myComboBoxAS.dataProvider = arr;

                var formItem2:FormItem = new FormItem();
                formItem2.label = "ActionScript:";
                formItem2.addChild(myComboBoxAS);

                var form:Form = new Form();
                form.addChild(formItem1);
                form.addChild(formItem2);
                addChild(form);
            }
        ]]>
    </mx:Script>

</mx:Application>