function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
AchyuthAchyuth 

how to clear the input text field when i clicked on the X

Hi All,
I used ui:inputText tag in my lightning component,
How to place the 'x' and how to clear the input text when i clicked on the 'x' symbol,
can anyone help with the example one !!

Thanks,
Chinna..
 
Best Answer chosen by Achyuth
Khan AnasKhan Anas (Salesforce Developers) 
Hi Chinna,

I trust you are doing very well.

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Component:
<aura:attribute name="myText" type="string" default="Hello there!"/>
    
    <div class = "slds-size--3-of-8">
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
            <lightning:button iconName="utility:close" class="front slds-input__icon slds-input__icon_right" onclick="{!c.hide}"/>
            <ui:inputText label="Enter some text" class="slds-input" value="{!v.myText}"/>      
            
        </div>
    </div>
</aura:component>

Controller:
({
    hide : function(component,event,helper){
        component.set('v.myText','');
    },
})

OR you can use below code for better output.

Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="myText" type="string" default="Hello there!"/>
    
    <div class = "slds-size--3-of-8">
        <div class="slds-form-element">
            <div class="slds-grid slds-form-element__control slds-input-has-icon slds-input-has-icon--right ">
                <label class="slds-form-element__label" for="text-input-01">Enter text</label>
                <input id="text-input-01" value="{!v.myText}" class="slds-lookup__search-input slds-input" aria-owns="option-list-01" role="combobox" aria-activedescendant="" aria-expanded="true"  />
                <lightning:buttonIcon iconName="utility:close" class="slds-button slds-input__icon slds-text-color--default" variant="bare" onclick="{!c.hide}" alternativeText="Open or close dropdown."/>
            </div>
        </div>
    </div>   
</aura:component>

Controller:
({
    hide : function(component,event,helper){
        component.set('v.myText','');
    },
})


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas​

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Chinna,

I trust you are doing very well.

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Component:
<aura:attribute name="myText" type="string" default="Hello there!"/>
    
    <div class = "slds-size--3-of-8">
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
            <lightning:button iconName="utility:close" class="front slds-input__icon slds-input__icon_right" onclick="{!c.hide}"/>
            <ui:inputText label="Enter some text" class="slds-input" value="{!v.myText}"/>      
            
        </div>
    </div>
</aura:component>

Controller:
({
    hide : function(component,event,helper){
        component.set('v.myText','');
    },
})

OR you can use below code for better output.

Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="myText" type="string" default="Hello there!"/>
    
    <div class = "slds-size--3-of-8">
        <div class="slds-form-element">
            <div class="slds-grid slds-form-element__control slds-input-has-icon slds-input-has-icon--right ">
                <label class="slds-form-element__label" for="text-input-01">Enter text</label>
                <input id="text-input-01" value="{!v.myText}" class="slds-lookup__search-input slds-input" aria-owns="option-list-01" role="combobox" aria-activedescendant="" aria-expanded="true"  />
                <lightning:buttonIcon iconName="utility:close" class="slds-button slds-input__icon slds-text-color--default" variant="bare" onclick="{!c.hide}" alternativeText="Open or close dropdown."/>
            </div>
        </div>
    </div>   
</aura:component>

Controller:
({
    hide : function(component,event,helper){
        component.set('v.myText','');
    },
})


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas​
This was selected as the best answer
AchyuthAchyuth
Hi Khan Anas,

Thank You!!
Its working now...