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>
 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

6 Responses to Disabling keyboard navigation on the ComboBox control in Flex

  1. av says:

    When I iterate the combobox list using down arrow, every alternate/2nd item in the combobox is highlighted, instead of every item. Why is an item in the middle being skipped? Any clues?

    Thank you

  2. Paul says:

    how to disable only PGDN and PGUP?

    • Peter deHaan says:

      @Paul,

      You can extend the ComboBox class, override the protected keyDownHandler() method and just filter those keys before calling super.keyDownHandler(), as seen in the following example:

       
      package comps {
          import flash.events.KeyboardEvent;
          import flash.ui.Keyboard;
       
          import mx.controls.ComboBox;
       
          public class CustomComboBox extends ComboBox {
              public function CustomComboBox() {
                  super();
              }
       
              override protected function keyDownHandler(evt:KeyboardEvent):void {
                  switch (evt.keyCode) {
                      case Keyboard.PAGE_DOWN:
                      case Keyboard.PAGE_UP:
                          // abort
                          return;
                      default:
                          super.keyDownHandler(evt);
                  }
              }
          }
      }

      Peter

  3. Paul says:

    @Peter deHaan

    Thanks youuuu Peter, Really nice Work.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree