Spark ComboBox/TextArea focus interaction

I have a ComboBox set up to change the font size of the text in a TextArea.  If I set the ComboBox to return focus to the TextArea in its change event, it causes the ComboBox to require 2 clicks to make a selection.  Here's a simple application showing the behaviour that I'm seeeing:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx">
     <fx:Script>     <![CDATA[
               import flashx.textLayout.edit.IEditManager;
               import flashx.textLayout.formats.TextLayoutFormat;
               protected function sizeChange():void {
                    var format:TextLayoutFormat = new TextLayoutFormat();
                    format.fontSize = comboBox.selectedItem;
                    IEditManager(textArea.textFlow.interactionManager).applyLeafFormat(format);
                    textArea.setFocus();  //Without this line, the combobox works as expected.  With it, you must click on your selection twice to close the combobox
     ]]>     </fx:Script>
     <s:VGroup>
          <s:TextArea id="textArea" />
          <s:ComboBox id="comboBox" change="sizeChange()">
               <s:dataProvider>
                    <s:ArrayList>
                         <fx:int>10</fx:int>
                         <fx:int>12</fx:int>
                         <fx:int>14</fx:int>
                         <fx:int>16</fx:int>
                         <fx:int>24</fx:int>
                         <fx:int>32</fx:int>
                    </s:ArrayList>
               </s:dataProvider>
          </s:ComboBox>
     </s:VGroup>
</s:Application>

Looks like an editor interaction.  I wouldn't want the ComboBox to ever get
focus so I'd skip the setFocus call and just set tabFocusEnabled=false and
mouseFocusEnabled = false;

Similar Messages

  • Spark ComboBox in mx control - Disappearing DropDown Menu

    Hey Everyone!
    I have a problem displaying a spark combobox as an item editor in an mx data grid. Since I've been trying to figure it out for some time without any luck I thought one of you guys might have a hint for me.
    The situation:
    One of my columns is supposed to provide a Spark ComboBox to edit the entries:
    <mx:DataGridColumn headerText="Names"
          dataField="Name"
          itemEditor="myComboBoxRenderer"
         />
    It uses the custom component "myComboBoxRenderer" which basically contains a spark combobox.
    <?xml version="1.0"?>
    <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                              xmlns:s="library://ns.adobe.com/flex/spark"
                              xmlns:mx="library://ns.adobe.com/flex/mx"
                              creationComplete="init()">
        <fx:Script>
            <![CDATA[
                import mx.collections.ArrayCollection;
                [Bindable]public var selectableValues:ArrayCollection = new ArrayCollection(
                         "a",
                         "b", 
                         "c", 
                         "d", 
                         "e"
                public function init():void{
                    legalValueSparkComboBox.dataProvider = selectableValues;
                private var _updatedValue:String;
                private var _columnName:String;
                public function get updatedValue():String
                    return mySparkComboBox.textInput.text;
                public function set updatedValue(value:String):void
                    _updatedValue = value;
                override public function set data(value:Object):void
                    if (value != null) {
                        mySparkComboBox.textInput.text = value.Name;
            ]]>
        </fx:Script>
        <s:ComboBox id="mySparkComboBox" width="100%" />
    </s:MXDataGridItemRenderer>

    Sorry, I clicked "send" too soon.
    The problem is that the combobox opens its drop down menu but if you click on the scrollbar to get to the entries at the bottom of the list it simply disappears. Did anyone run into a similar problem? Does it have something to do with putting a spark component into an mx data grid?
    I am running out of ideas
    Thanks a lot!!!

  • Disabling auto-complete on Spark ComboBox

    I want to disable the auto-completing of text entered into a ComboBox, but still have it match the text against items in the DropDownList. Is there any easy way to do this?

    Simply create you new combobox class and override the findStringLoop function, it should always return -1 to prohibit the fincding of matching items (for autocomplete reasons).
    Code is the following:
                         * Disabel the autocomplete option on Spark Combobox
                        mx_internal override function findStringLoop(str:String, startIndex:int, stopIndex:int):Number
                             return -1;

  • Spark ComboBox click issue

    I'm using a spark combobox in my AdvancedDataGrid, as an itemEditor. At some point I noticed that clicking on the scroll bar arrows would close the CB - very annoying. After much research I found this which completely solved my problems - awesome!
    One more and last lingering issue left though: when selecting an item from an open dropdownlist the mouse click seems to propagate to the cell below once the dropdown has closed. I assumed that the fix above would take care of this last issue, but it doesn't seem to. I tried to override the item_mouseDownHandler for the CB and stopImmediatePropagation() of the mouse event post its usual behavior, but that also seems to have no effect. I also tried setting the mouseChildren property for the skin['dropDown'] to false, but that impairs the whole functionality.
    Would love any help / suggestions.
    thank you all, as always
    f

    I'm not sure. Happy to try this out and post code if it helps debugging the issue, but I'm stuck with an ADG, so switching to DG would not be an option for me.

  • Spark Component TextArea Performance Issues

    The spark component TextArea cannot handle large text volumes gracefully. I am using a simple ascii file that is about 1.2 mg in size and I experience the following problems:
    1. Pasting the 1.2 mg of text in the TextArea takes a very long time (about 20-30 second). I get a message that the request timed out then the text is finally shown in the text area.
    2. Once the text is in the TextArea, paging up and down fast (that is not waiting for the previous page up and page down to complete) can cause the application to freeze. It takes a long time for it to come back.
    3. Selecting a large chunck of data and doing cut/paste/delete can also cause a freeze that may take a 20 or more seconds.
    The new spark.components.TextArea is definitely an improvement over mx.controls.TextArea but still has serious performance issues. A simple HTML text area seems to process the same volume without any issues (except some delay at the initial loading). Is there a chance these issues will be addressed before the release of FlashBuilder 4.0? is there a work around?

    Not much is needed. You can create an application that has nothing but the textarea:
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application 
    <s:Application 
          xmlns:fx="http://ns.adobe.com/mxml/2009"      xmlns:s="
    library://ns.adobe.com/flex/spark"      xmlns:mx="
    library://ns.adobe.com/flex/halo" 
          minWidth="800" minHeight="600">
         <s:TextArea width='100%' height='100%' horizontalScrollPolicy="auto" verticalScrollPolicy="auto"/></s:Application>
    run it, copy the text in the attached Sample.txt file and paste into the text area. It takes more than 1 minute (did not time it) and then just before the text is displayed, I get this error message:
    Error: Error #1502: A script has executed for longer than the default timeout period of 15 seconds.
    The text is transferred to the textarea but the textarea is very sluggish (try arrow up, arrow down, page up, page down, try typing in the text area and then finally try select all and then cut or delete).
    I hope this helps and thanks.

  • Set border color of editable ComboBox on focus

    What I want to do, is set BorderBrush of editable ComboBox. I'm using slightly modified default WPF templates. They are structured like below:
    <ControlTemplate x:Key="ComboBoxEditableTemplate" TargetType="{x:Type ComboBox}">
    <Grid x:Name="templateRoot" ...>
    <ToggleButton x:Name="toggleButton" ... />
    <Border x:Name="border" ...>
    <TextBox x:Name="PART_EditableTextBox" ... />
    <!-- textbox with IsFocused property which should be focus trigger -->
    </Border>
    </Grid>
    </ControlTemplate>
    ToggleButton template:
    <ControlTemplate TargetType="{x:Type ToggleButton}">
    <Border x:Name="templateRoot" ...> <!-- first border brush I want to set on focus -->
    <Border x:Name="innerBorder" ...> <!-- second border brush I want to set on focus -->
    <Border x:Name="splitBorder" ...>
    <Path x:Name="arrow" ... />
    </Border>
    </Border>
    </Border>
    </ControlTemplate>
    And now, what should happen.
    When PART_EditableTextBox.IsFocused is equal to true then set
    templateRoot.BorderBrush and innerBorder.BorderBrush to another color (for example red and blue).
    It would be very simple if there was only one BorderBrush to set, because I could use
    TemplateBinding to bind this property to ToggleButton element.
    For me, the problem are nested templates. I don't know how to refer to inside of another template.
    I hope you can help me.
    It would be very good if I didn't need to use C# code, just XAML.

    >>I don't know how to refer to inside of another template.
    You cannot. But since the PART_EditableTextBox is part of the ControlTemplate of the ComboBox you could add the trigger to this control template and then for example set the BorderBrush property and the Background propery of the ToggleButton and bind these
    to the BorderBrush properties of the Borders in its ControlTemplate:
    <ControlTemplate x:Key="ComboBoxEditableTemplate" TargetType="{x:Type ComboBox}">
    <TextBox x:Name="PART_EditableTextBox" ... />
    <ToggleButton x:Name="toggleButton" ... />
    <ControlTemplate.Triggers>
    <Trigger Property="IsFocused" Value="True" SourceName="PART_EditableTextBox">
    <Setter Property="BorderBrush" TargetName="toggleButton" Value="Red"/>
    <Setter Property="Background" TargetName="toggleButton" Value="Blue" />
    </Trigger>
    </ControlTemplate.Triggers>
    <Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="ClickMode" Value="Press"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type ToggleButton}">
    <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="2">
    <Border x:Name="innerBorder" BorderBrush="{TemplateBinding Background}" BorderThickness="2">
    <Border x:Name="splitBorder">
    <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}"
    Fill="Black" HorizontalAlignment="Center" Margin="0,1,0,0" VerticalAlignment="Center"/>
    </Border>
    </Border>
    </Border>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    If you don't want to use the Background property for this, the other option is to create your own custom class that derives from the ToggleButton class and add a dependency property called "InnerBackground" or something to this class and replace
    the ToggleButton with your custom ToggleButton and replace the binding to the Background property with a binding to the new dependency property and set this one in the control template for the ComboBox.
    Hope that helps.
    Please remember to close your threads by marking helpful posts as answer and/or helpful and please start a new thread if you have a new question.

  • How to set the prompt of a Spark Combobox programmatically

    Hi,
    here a Combobox wich use my cutom Skin to manaully set the prompt:
    <s:ComboBox id='artistNameCB' labelField="artistName"                         
              skinClass="view.music.skins.ArtistComboBoxSkin"
                                    />
    here is the reklevat part of the Skin:
    <!--- @copy spark.components.ComboBox#textInput -->
        <s:TextInput id="textInput"
               text='select'
                     left="0" right="18" top="0" bottom="0"
                     skinClass="spark.skins.spark.ComboBoxTextInputSkin"/>
    How do I set the displayed text of a combobox  programmatically ?

    ArtistComboBoxSkin(artistNameCB.skin).textInput.text = "prompt"

  • Combobox removing focus!? help!

    Why when I use the combobox component does it remove focus
    from other movieclips?? For instance...I have a button with
    onRollOver and onRollOut functions. These work fine, but once I
    click on a combobox, they break...and won't work.
    I've looked in other places but I haven't found a fix for
    this yet. Doing setfocus(this) only puts a ugly yellow highlight
    box around my button, and then kills the swf with an infinite loop.
    Any ideas?

    hi, hold your data in a Hashtable with the value as key
    and the visible text as value,use a renderer for the combobox like here
    class MyCellRenderer extends JLabel implements ListCellRenderer {
    public MyCellRenderer() {
    setOpaque(true);
    public Component getListCellRendererComponent(
    JList list,
    Object value,
    int index,
    boolean isSelected,
    boolean cellHasFocus)
    setText(value.toString());
    setBackground(isSelected ? Color.red : Color.white);
    setForeground(isSelected ? Color.white : Color.black);
    return this;
    in the method getListCellRendererComponent you get your hashtable as object parameter,get the visible text from the hashtable and call setText (..)
    you can also make a combined String with value and text
    and take only the visible text in the renderer(this solution is not so bombastic as before)

  • Combobox removing focus?

    Why when I use the combobox component does it remove focus
    from other movieclips?? For instance...I have a button with
    onRollOver and onRollOut functions. These work fine, but once I
    click on a combobox, they break...and won't work.
    I've looked in other places but I haven't found a fix for
    this yet. Doing setfocus(this) only puts a ugly yellow highlight
    box around my button, and then kills the swf with an infinite loop.
    Any ideas?

    While it depends partly on what is outside the textfield, one way would be to add an event listener to the stage and then check what was clicked.  If it happened to be the stage, set the focus onto the stage.
    stage.addEventListener(MouseEvent.MOUSE_UP, focusStage);
    function focusStage(evt:MouseEvent):void {
        if(evt.target == stage){
           stage.focus = stage;

  • Help with Spark ComboBox with Variable width dropdown list

    I have a Flex 4.0 app which uses a lot of Comboboxes.  These combo boxes can contain relatively large items in relation to the actual combobox size.
    I want the dropdown list width to expand to a size which will fit all the items it has to display - but only when the dropdown list is opened.
    I know there was a way of doing this with the mx components however cannot find any information on this for Spark components.
    Does anybody have a solution for this?
    thanks in advance

    Create a skin for your combobox copying the original one and set popUpWidthMatchesAnchorWidth in the PopUpAnchor to false

  • Flex 4 - insert combobox or other interactive component within RichEditableText

    As part of my massive quest to convert a large application from AS2 to Flex AS3, I am going to need to insert a UI component within a RichEditableText component.
    Is that actually possible?
    In AS2, I had created each word of a paragraph as a separate textField and then positioned them all together, inserting input fields and combobox components as required.... however... project requirements means I have to try and insert components within full paragraphs, if possible... Dynamically and in actionscript.  I'm not sure where to start attempting this... if anyone has any ideas which might help, I'd be truly grateful !!!
    This is a question paragraph.  The first answer to this paragraph question is [combobox] and the second might be [combobox] so select your answers and press the check button.
    Thanks.

    Have you discovered TinyTLF yet? I believe it will enable you to create the sort of controls you're looking for. http://guyinthechair.com/

  • Spark ComboBox new item does not display in textInput?

    I've been playing with s:ComboBox and generally like them a lot. One detail is driving me nuts though - most likely due to my lack of knowledge in the subject - is that if I try to add a new item to my dataprovider in a changeHandler (registered to the change event) the text for the ComboBox textInput disappears - although the item addition works perfectly. Interestingly enough the same operation works fine if it gets called by clicking on a button, i.e. post the change event has been processed, and the text does not disappear. To better understand what I'm talking about check out the code from http://help.adobe.com/en_US/flex/using/WS70f0d54f063b9b081aac8d1d1247252e4a0-8000.html#WS7 0f0d54f063b9b08626480d2124725f692c-7fff
    and try to add a new item and hit enter. Taking the same code from myCB_changeHandler and using it as a button click event instead of a change event handler yields to the behavior I'm looking for, i.e. the new item appears in the CB textInput field and when clicking the button gets added to the data provider while not disappearing from the textInput. Is there a way to accomplish this same behavior in the change event handler?
    thank you!
    f

    thank you!
    that does the trick!
    f

  • TLF not working on Combobox/TextArea/List

    There is NO SUPPORT for TLF and right-to-left writting settings in Flash CS5 for this components: Combobox / List / TextInput
    Steps to reproduce:
    1.Add combobox component to stage
    2.Open properties panel and add in the data provider some Arabic text eg.: العربية
    3.Publish and upload Flash page on some server
      Actual Results:
      The Arabic text is backwards
      Expected Results:
      To show correctly
    TLF and right-to-left writtin support is missing completly for this components: Combobox / TextInput / List.
    Please test on a computer where Flash CS5 is not installed, because it   shows correctly on that machine and incorrectly on a normal user   computer that doesn't have Flash CS5 IDE.
    * Persists in any browser.
    If anyone knows of a workaround please let me know ASAP !
    Many thanks,

    The reason the combobox isn't doing R-to-L correctly, is because the component is based on TextField (not TLF). TextField does not have support for R-to-L.
    The only component converted to work with TLF in CS 5 was the Scrollbar.
    To do what you're wanting, you'll need to modify the component to use TLF text instead. Not having looked at that component, I don't know how large of a task that is, but it's certainly doable.
    Rusty

  • How to embed html (weblinks) in Spark TextArea?!

    Hi everybody,
    We want to put html-code (especially links) into our TextArea. We were looking for some examples, but in no example the links were working. So user couldn t click at the link to enter a new page. Anybody any suggestions or a good tutorial?
    Even the example at the adobe page isn't working: (we tried firefox and safari on windows and os x)
    http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TextAr ea.html?allClasses=1
    (at the bottom)
    Thanks,
    K

    We fixed the problem in our case. Our mistake was, that we did set the attribute selectable to false instead of editable. Afterwards it worked perfect for us.
    Spark Text Area:
    <s:TextArea id="content" editable="false"/>
    Import Text:
    content.textFlow = TextFlowUtil.importFromString( yourHtmlText:String );
    In mx.controls it works like that:
    <mx1:TextArea id="myTextArea" />
    Import Text:
    myTextArea.htmlText = yourHtmlText:String;

  • Spark TextArea remove border (borderVisible) in Flex 4.5 Hero

    When dealing with the TextArea for Mobile development in Flex Hero 4.5 I cannot find a way to remove the border.
    <s:TextArea id="lblPOC" left="10" right="10" top="10" bottom="10"
    borderColor="#FFFFFF" borderVisible="false" color="#000000"
    contentBackgroundColor="#FFFFFF" editable="false" skinClass="{null}"/>
    setStyle is not working on spark components I have come to find out.
    Even to get htmlTexh I had to:
         MobileTextField(lblPOC.textDisplay).htmlText =
    Can anyone help me remove the boarder from a spark TextArea in Flex 4.5?
         Thank you,
              Eric

    Looks like you were using the preview release of Flex 4.5.  Setting borderVisible to false works for me in the 4.5 release build:
    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark">
        <s:TextArea left="10" right="10" top="10" bottom="10" borderVisible="false" />
    </s:View>

Maybe you are looking for

  • How to send smartform output in body of email?

    Hi all , I have to send smartform output in body of email (not as an attachement in mail) .PLease help me in this regard. Thanks, Ananth S.

  • Link Join Concept In Physical and Business Model Layer

    Hi, As we know that we could make join relationship in physical layer and also business model layer in obiee 10g. This is what makes me confuse. First of all, I tried to follow the tutorial in the oracle learning library center with schema SH as an e

  • SmartForm Header Maintainance.

    Hi All, I had copied a std smartform into my zsmartform and tried to run it for a preview. now it so happens that in the standard smartform there is no hardcoded text in the header of the SmartForm (SF) but i happenend to find out thru debugging that

  • Dashes in xml node names

    I need to parse an xml document returned by a web-service. It does not, nor do we want it to, follow any SOAP or wdsl standard.. However I still need to parse it (hence the flex becomes unflexible). Some of the nodes names in the xml document have da

  • Registering for a Topic with own stream & queue in Pub/Sub

    Hi *. I'm working with MQSeries 5.3 on WinXP. I don't know, how to register a subscriber to a topic with the JMS-classes. I found a sample from IBM, but it uses the native (MQ)classes and it does not work, when I try to register an own queue or strea