function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
meghna nmeghna n 

scroll to component during onchange event

I have a piece of code inside my lightning component as follows

CompA.cmp

 <lightning:card>
                <lightning:layout>
                    <lightning:layoutItem flexibility="auto" padding="around-small">
                       <div onkeyup="{!c.handleKeyUp}">
                            <lightning:input
                                             aura:id="enter-search"
                                             name="searchProvider"
                                             label=""
                                             placeholder = "Search by Name, Speciality, Procedure, Condition or Provider ID  "
                                             type="search"
                                             />
                        </div>
                        
                    </lightning:layoutItem>
                    <lightning:layoutItem flexibility="auto" padding="around-small">
                   
                         <lightning:card title="" aura:id="showhide">
                    <cCompB/>
                </lightning:card>

<aura:if  some condition

then display <c:CompC/>

<./aura:component>

CompAController.js

handleKeyUp: function (component,event,helper) {
      
        var isEnterKey = event.keyCode === 13;
        if (isEnterKey) {
            var queryTerm = component.find('enter-search').get('v.value');
           }        }

when I enter some text in above component then it should scroll down automatically to compC
The issue I am facing is it is not scrolling to compC I have to manually scroll from the side bar to compC.

Please tell me how to do this> I find it difficult to handle.

thanks
meghna N
Best Answer chosen by meghna n
Ramesh DRamesh D
@Meghha
Try below code, it works for me 
<aura:attribute name="colors" type="String[]" default="cyan,yellow,magenta"/> 
    <aura:attribute name="selectedColor1" type="String" default="cyan" />
    <lightning:select aura:id="select1-id" value="{!v.selectedColor1}" 
                      onchange="{!c.onChangeColor}" name="picklist1" label="Select a Color"  >
        <option value="">-- None --</option>
        <aura:iteration items="{!v.colors}" var="color">
            <option value="{!color}" text="{!color}"></option>
        </aura:iteration>
    </lightning:select>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div class="wrapper" id="yellowdiv" style="display:none">
        <div class="large-area" >
            Yellow area
        </div>
    </div>
Controller: 
onChangeColor : function(component, event, helper) {        
        var colr=event.getSource().get("v.value");
        component.set("v.selectedColor1", colr);
        if(colr=='yellow')
        {
            var yeldiv=document.getElementById('yellowdiv');
            yeldiv.style.display = "block";
            var offset=yeldiv.getBoundingClientRect();
            var scrollOptions = {
                left: offset.top,
                top: offset.left,
                behavior: 'smooth'
            }
            window.scrollTo(scrollOptions);
        }
	}

I hope you find the above solution helpful. If it does mark as best answer to help others too.
Thanks,
Ramesh D

All Answers

Ramesh DRamesh D
@Meghha
Try below code, it works for me 
<aura:attribute name="colors" type="String[]" default="cyan,yellow,magenta"/> 
    <aura:attribute name="selectedColor1" type="String" default="cyan" />
    <lightning:select aura:id="select1-id" value="{!v.selectedColor1}" 
                      onchange="{!c.onChangeColor}" name="picklist1" label="Select a Color"  >
        <option value="">-- None --</option>
        <aura:iteration items="{!v.colors}" var="color">
            <option value="{!color}" text="{!color}"></option>
        </aura:iteration>
    </lightning:select>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div class="wrapper" id="yellowdiv" style="display:none">
        <div class="large-area" >
            Yellow area
        </div>
    </div>
Controller: 
onChangeColor : function(component, event, helper) {        
        var colr=event.getSource().get("v.value");
        component.set("v.selectedColor1", colr);
        if(colr=='yellow')
        {
            var yeldiv=document.getElementById('yellowdiv');
            yeldiv.style.display = "block";
            var offset=yeldiv.getBoundingClientRect();
            var scrollOptions = {
                left: offset.top,
                top: offset.left,
                behavior: 'smooth'
            }
            window.scrollTo(scrollOptions);
        }
	}

I hope you find the above solution helpful. If it does mark as best answer to help others too.
Thanks,
Ramesh D
This was selected as the best answer
meghna nmeghna n
Hi ramesh

I have given an exact piece of code in my component as follows
  
componentA.cmp
 <lightning:card>
                <lightning:layout>
                    <lightning:layoutItem flexibility="auto" padding="around-small">
                       <!--  <div onkeyup="{!c.generateAlert}">-->
                     <div onkeyup="{!c.handleKeyUp}">
                            <lightning:input
                                             aura:id="enter-search"
                                             name="searchProvider"
                                             label=""
                                             placeholder = "Search by Name, Speciality, Procedure, Condition or Provider ID  "
                                             type="search"
                                             />
                        </div>
                        <p class="slds-p-left_small slds-p-top_x-small font">Ex: John Wright, Primary Care Physician, Dermatologist, Periodontist</p>
                    </lightning:layoutItem>


  
         <div class="slds-p-bottom_xx-small"></div>
            <lightning:card title="">
                <div class="" style="cursor: pointer;" onclick="{!c.toggleAccordion}">
                    <section class="slds-clearfix">
                        <div class="slds-float--left slds-p-left_small">
                            <lightning:icon aura:id="articleOne" iconName="{!v.showaccordionIcon}" size="x-small" />
                        </div>
                        <div class="slds-text-heading_small slds-p-left_large">Quick Search</div>
                    </section>
                </div>
                <div class="{!v.showFrequentSearches}" aura:id="articleOne">
                    <!--Component Used for showing Frequent searches  and handled through cmp Event-->
                    <c:COMPB/>
                </div>
            </lightning:card>
    
    <aura:if isTrue="{!v.showSpinner}">
         <div class="slds-p-bottom_xx-small" id="yellowDiv"></div>
        <lightning:spinner aura:id="spinner" variant="brand" size="medium" alternativeText="service Request"/> 
        <aura:set attribute="else">
            <aura:if isTrue="{!v.showProviderListcmp}">
                <div class="slds-p-bottom_xx-small" id="scrollDiv"></div>
                <lightning:card title="" aura:id="displayFindCareList">
                    <c:GPS_COMP_FindCareList showFindCareList = "{!v.showProviderListcmp}"
                                             providerList = "{!v.providerList}">
                    </c:GPS_COMP_FindCareList>
                </lightning:card>
                
            </aura:if>
        </aura:set>
    </aura:if> 


componentAController.js

handleKeyUp : function (component,event,helper) {
      
        var isEnterKey = event.keyCode === 13;
        if (isEnterKey) {
            var queryTerm = component.find('enter-search').get('v.value');
            if (queryTerm.length > 2) {
                    helper.navigateToList(component,event,helper,queryTerm);
            
            }
            else{
                helper.generateErrorPop(component,event,"warning","Please type at least 3 letters","Minimal Entry");
            }
        }
    }



componenAthelper.js

navigateToList :  function(component,event,helper,queryTerm){

        var flow = component.find("autoServiceRequest");
        component.set("v.showSpinner",true);   
        
        //here we care calling a visual flow by passing values to input parameters
        
    },
If u observe the code when we press the enter key in lightning:input , the application will execute a spinner and then call the visual flow.

so in my case after the spinner and before the visual flow is called I need to scroll down to the component GPS_COMP_FindCareList.

Also after the spiiner is called I have kept an div tage if u observe in my code.

I tried ur code in the controller but it is showing error in the statement     yeldiv.style.display = "block";

Can u please advise with a correct(workable) solution?

thanks
meghna