2

I'm trying to reset an attribute value to null. But when I execute reset button call, the value in the textbox is cleared BUT it does not get cleared from display.

Here is a sample code.

TestCmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global">

    <aura:attribute name="num" type="Integer" default="" />

    <div class="slds-card slds-p-around_small">

        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-size_1-of-1">
                <lightning:input aura:id="numDays" type="number" value="{!v.num}" min="0" placeholder="days..." label="Number value" />
            </div>
        </div>
        <div class="slds-grid slds-gutters slds-grid_align-center slds-p-top_medium">
            <div class="slds-col">
                <lightning:button label="Reset (null)" onclick="{!c.reset1}" variant="brand" />
            </div>
            <div class="slds-col">
                <lightning:button label="Reset ('')" onclick="{!c.reset2}" variant="brand" />
            </div>
            <div class="slds-col">
                <lightning:button label="Reset (0)" onclick="{!c.reset3}" variant="brand" />
            </div>
        </div>

    </div>

</aura:component>

TestCmpController.js

({
    reset1 : function(component, event, helper) {
        component.set("v.num", null);
    },
    reset2 : function(component, event, helper) {
        component.set("v.num", "");
    },
    reset3 : function(component, event, helper) {
        component.set("v.num", "0");
    }
})

If you try the code above. You will notice that the <lightning:input> has a placeholder text. This is a requirement for my project.

There I've added 3 Reset buttons, each execute to empty the attribute value. Now, to support placeholder text, I need to clear the value itself, and if I simply reset it to 0, then placeholder text won't show up.

Strangely enough, after clicking Reset (null) or Reset ('') buttons, the display of component still shows the number value. But if we simply click inside the input textbox then it shows placeholder text and clear the displaying value.

Doesn't it look like a bug in lightning:input? Is there any workaround for me to try on?

  • Can you try this: component.set("v.num",component.clearReference("v.num")); – the_phantom Feb 25 '18 at 11:47
0

lightning:input is still in beta. You can use this component but its unstable, so the below code gives an error if there is an lightning:input component in the component markup.

$A.get('e.force:refreshView').fire();

Use ui:inputText component, so declare this component like below:

<ui:inputText aura:id="numDays" value="{!v.num}" placeholder="days..."/>

And using the below code, the value inside the component gets cleared and you will be able to see the placeholder

component.set("v.num", "");
  • Yes that is the only way I could make this work BUT it is still not good enough, I lost the ability of a spinner to up/down numerical value and mouse scroll changing of values. – VarunC Feb 28 '18 at 18:20
0

i guess it is not really considered a bug from their side as they explicitly check the value for a truthy value or 0 before updating any text values (which is not fulfilled by null or an empty string).

Why is it then working if you click on the input field?
The Value which you are seeing is basically a span node which is updated on a value change of the input element while its opacity is set to 0 (if the conditions from above are met) - therefore it just looks like the value you are seeing comes from the input element while it is in fact coming from the text value of the span element. If you click the input field the opacity is set back to 1 and therefore you will see again the real input field with the placeholder (as the value of input element is updated in the background - but not visible due to the styles until focused again)

I guess as long as it will not hurt you that the element is focused the quickest way to keep the base component is to just call component.find('numDays').focus(); after your value update to manually trigger the focus and reapply the opacity change.

  • Focusing was not an option actually. The component I have is part of bigger project and there are multiple input controls in UI. We can't just focus every control or one-by-one since it will mess up user experience. And I think this is a Bug, and I'm trying to raise it to Support from my end. So far it has been received nicely. Theoretically, the implementation of Placeholder makes this a bug. You can't make placeholders work if you can't nullify a control so it is an Issue that needs fixing. – VarunC Mar 8 '18 at 11:03
  • For me it goes more in the direction of a defect than a bug - but i guess we agree on the fact that it is somehow an unexpected behavior and not equal to standard HTML. A Other "hacky" alternative for the time being may be that you add a custom CSS class via $A.util for such reset Cases and overwriting the opacity of the input element again with 1 (while removing it via change handler or controller method if you set the value programmatically to a valid value again) – Renji-xD Mar 9 '18 at 21:00

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.