Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
shruti devurkar
30
Is it possible to set focus on click of next so that user don't have to scroll to find next search term?
posted

https://stackblitz.com/github/IgniteUI/igniteui-live-editing-samples/tree/master/angular-demos/data-display/text-highlight-1?file=src%2Fapp%2Ftext-highlight-sample-1%2Ftext-highlight-sample-1.component.html

this works fine but if text is large then the next button does not set focus to below text found user has to scroll down manually which is not the best idea.

Parents
No Data
Reply
  • 1560
    Verified Answer
    Offline posted
    Hello,
    Thank you for the provided sample application.
    I have been looking into your question and modified the attached sample in order to demonstrate how such behavior could be achieved.
    An approach I could suggest is to get the highlighted element using its class name and scroll to this element:
     
    // ...
const el = document.getElementsByClassName(this.activeHighlightClass);
// Scroll to active element after DOM is updated:
requestAnimationFrame(() => {
this.scrollIntoViewIfNeeded(el[0]);
});
// ...
public scrollIntoViewIfNeeded(target) {
if (target?.getBoundingClientRect().bottom > window.innerHeight) {
target.scrollIntoView(false);
}
if (target?.getBoundingClientRect().top < 0) {
target.scrollIntoView();
}
}
    Here could be found my sample for your reference. Please test it on your side and let me know if I may be of any further assistance.
     
    Additionally, please note that the IgxTextHighlight directive in Ignite UI for Angular is used to highlight parts of a text i.e. to apply a certain styling. Having this in mind, the requirement to scroll to the highlighted element to a certain position should be handled on the application level, which is beyond the scope of Infragistics support.
     
    Please let me know if you have any additional questions.

    Sincerely,
    Teodosia Hristodorova
    Associate Software Developer
Children