Picklist field in Salesforce 1

Question

I´m building a simple visual force page that is showed only if user get access to Salesforce with Salesforce1 mobile Application.

I´m having problems with the picklist:

<apex:inputField styleclass="sf1input" value="{!Deal_Row__c.Forecast_Period__c}" />

It looks good but selection is not working,not able to select value and close selection pop up.

From Salesforce 1 documentation " Using apex:inputField is fine for fields that display as a basic input field, like text, email, and phone numbers, but avoid using it for field types that use an input widget, such as date and lookup fields." and apex:selectList isn´t supported.

How can i render a working picklist selection in SF Mobile1?

Is there some HTML5 tag to do this?

Thanks in advantage for any advice.

Answer 1

Salesforce1 have a natural behaviour of closing picklist popup when selected. But it seems that your custom visualforce page is preventing this behaviour.

Here is the working example using opportunity "Stage" field. You can use <apex:inputfield>

<apex:form >
        <apex:outputLabel styleclass="sf1label required" value="This is a label*" />  
        <apex:inputField styleclass="sf1input" value="{!opp.AccountId}" />
        <apex:inputField styleclass="sf1input" value="{!opp.Name}" />

        <apex:inputField styleclass="sf1select" value="{!opp.StageName}" />
        <br/>
        <apex:outputLabel styleclass="sf1label required" value="Is Salesforce1?" />
        <input class="sf1input" type="checkbox"></input>
        <br/>
        <br/>
        <apex:commandbutton styleclass="sf1button" action="{!dummyAction}" value="Command Button"/>
        <br/>
        <apex:commandbutton styleclass="sf1buttonSFBlue" action="{!dummyAction}" value="Command Button Blue"/>
        <br/>
        <button class="sf1buttonSFBlue">Normal Button</button> 
    <div>
     <ol>
        <apex:repeat value="{!oppList}" var="op">
             <li class="sf1List">
               <a>
                    {!op.name}
               </a>
            </li>
         </apex:repeat>
     </ol>
    </div>
</apex:form>