VF Page with new components rendering at mouse-over, instead of click on drop down

Question

First, forgive me for language, I'm a web coder by practice, self-teaching a lot of VisualForce/Apex, and a complete newbie.

I have a custom VF page I'm creating for my team with "industry news" twitter feeds [each feed is an individual component to make it easier to update].

The code is working how I want it to [a drop down offers choices, once choice is selected, new component renders below], except for the fact that the below components are rendering more or less on "mouse-over" instead of "on-click"... so, unless you are holding your mouse button down when you look at the drop down menu, it grabs the first drop-down choice and refreshes - not allowing you to choose the other drop down choices.

Any help on how to make it render AFTER the click of a selection would be much appreciated!

My page code:

    <apex:page controller="tweetfeedDropdown">

    <apex:pageBlock title="Twitter Feeds">
        Please choose what you would like to see in your feed.<br/><br/>
            <apex:form>
            <apex:actionregion>
            <apex:selectList value="{!selectedValue}" size="1" >
            <Apex:selectOptions value="{!someList}"/>
                <apex:actionSupport event="onclick" action="{!updateData}"  />    
            </apex:selectList> <br/><br/>
            </apex:actionregion>
            </apex:form>

        <apex:pageblocksection  id="TweetFeed_Initial" rendered="{!TweetFeed_Initial}" >
            <c:tweetfeed_1></c:tweetfeed_1>
        </apex:pageblocksection>

        <apex:pageblocksection  id="TweetFeed_2" rendered="{!TweetFeed_2}" >
            <c:tweetfeed_2></c:tweetfeed_2>
        </apex:pageblocksection>

        <apex:pageblocksection  id="TweetFeed_3" rendered="{!TweetFeed_3}" >
            <c:tweetfeed_3></c:tweetfeed_3>
        </apex:pageblocksection>


  </apex:pageBlock></apex:page>

And my controller:

public class tweetfeedDropdown {
  public Boolean TweetFeed_Initial {get; set;}
  public Boolean TweetFeed_2 {get; set;}
  public Boolean TweetFeed_3 {get; set;}
  public List<Selectoption> someList {get; set;}
  public String selectedValue {get; set;}

  public tweetfeedDropdown() {
    TweetFeed_Initial = true;
    TweetFeed_2 = false;
    TweetFeed_3 = false;
    someList = new List<SelectOption>{new selectoption('TFInitial','Choose a Feed Category'),
                                      new selectoption('TF2','Feed Title 2'),
                                      new Selectoption('TF3','Feed Title 3')};
  }

  public pageReference updateData() {
     if(selectedValue == 'TFInitial') {
          TweetFeed_Initial = true;
          TweetFeed_2 = false;
          TweetFeed_3 = false;
     } else if(selectedValue == 'TF2') {
          TweetFeed_Initial = false;
          TweetFeed_2 = true;
          TweetFeed_3 = false;
     } else if(selectedValue == 'TF3') {
          TweetFeed_Initial = false;
          TweetFeed_2 = false;
          TweetFeed_3 = true;             
     }
     return null;
  } 

}

Thoughts?

Answer 1

No sure on the mouseover as I do not see anything that would cause that (It may be there but not in your question)

However, you need to change the event on your actionSupport to "onchange" instead of "onclick"

<apex:actionSupport event="onchange" action="{!updateData}"  />