Skip to main content The Trailblazer Community will be unavailable from 2/1/2025 to 2/2/2025. Please plan your activities accordingly.
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
2 answers
  1. Jun 6, 2019, 10:28 AM
    @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
  2. Jun 10, 2019, 3:39 AM
    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

     
0/9000