2

Background:

I have recently built a Visualforce page, styled with the lightning design system, for inserting an editing line items on a record and found an following issue upon trying to edit an item.

I was looking to store some data input by the user in a Decimal variable on the controller, this is then used in a calculation and written onto the lines being edited. When a user re-enters the page to edit this data, the data is put back into the Decimal within the constructor and output as shown in the <apex:input type="number"/> for editing.

The issue arrises when the user submits the html form and has put a value with a different number of decimal, as shown below (even on a {!cancel} action of the standardcontroller).

Sample VF page displaying the issue encountered.

Issue:

The <apex:inputField/> does not enforce the pattern after loading with a value, however the <apex:input type="number"/> does.

I was unable to find anything in the SLDS documentation to indicate this behaviour. Has anyone else come across this before and if so, knows of a workaround to remove this decimal validation?

The code used to generate the above sample scenario is the following:

VF Page:

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

    <head>
        <title>Test Example</title>
        <apex:slds />
    </head>    

    <body>    

        <!-- REQUIRED SLDS WRAPPER -->
        <div class="slds-scope"> 
            <apex:pageMessages />

            <apex:form id="samplePageForm" styleClass="slds-form">

                <!-- PRIMARY CONTENT WRAPPER -->
                <div class="slds-grid slds-wrap">    

                    <div class="slds-p-horizontal--medium slds-m-vertical--medium slds-size--1-of-1 slds-align--absolute-center">
                        <apex:commandButton styleClass="slds-button slds-button--neutral" value="Cancel" action="{!cancel}"/>
                    </div>
                    <h3 class="slds-section-title--divider slds-m-vertical--medium slds-size--1-of-1">Sample Section</h3>

                    <!-- two inputs shown below, both using a different method of inputting data to the controller -->
                    <div class="slds-p-horizontal--medium slds-size--1-of-2">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="accountInput">Account Decimal</label>
                            <div class="slds-form-element__control">
                                <apex:inputField id="accountInput" value="{!accRecord.CustomDecimal__c}"/>
                            </div>
                        </div>
                    </div>
                    <div class="slds-p-horizontal--medium slds-size--1-of-2">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="variableInput">Test Number</label>
                            <div class="slds-form-element__control">
                                <apex:input id="variableInput" type="number" value="{!accNumberVariable}"/>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- / PRIMARY CONTENT WRAPPER -->    

            </apex:form>

        </div>
        <!-- / REQUIRED SLDS WRAPPER -->    

    </body>
</html>

</apex:page>

Controller:

public with sharing class ExampleSLDSIssueController 
{
    public Account accRecord {get;set;}
    public Decimal accNumberVariable {get;set;}

    public ExampleSLDSIssueController(ApexPages.StandardController controller) 
    {
        controller.addFields(new List<String>{'CustomDecimal__c'});

        accRecord = (Account)controller.getRecord();
        accNumberVariable = accRecord.CustomDecimal__c;
    }
}
  • 1
    This is not a function of SLDS but a core function of HTML. You browser is actually catching the form submit and validating inputs. developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number. You might check the rendered HTML to see what the step value is. You might need to set this value. – dsharrison Jun 28 '17 at 17:36
  • @dsharrison thanks, i've set the step to 0.01 which is sufficient for what i'm needing, reading up i see that it defaults to 1. Thanks for the quick response on this! if you want to post an answer with that i'll happily accept as the answer on this question. – Art of Cloud Jun 28 '17 at 18:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.