ericferreira1992/alphabet-filter

Alphabet List Click doesn't move list

Closed this issue · 8 comments

erswelljustin commented

I am having an issue where the section on the right containing the alphabet picker isn't moving when a letter is clicked. I have no errors in the console and have implemented it exactly has your instructions state.

<alphabet-filter propAlphaOrder="term" propsSearch="term" placeholder="Search the glossary terms" listClass="search-list" height="500px" [data]="module.glossary" (onClick)="selected($event)" [withTemplate]="true"> <ng-template let-item> <dl class="search-list-item"> <dt [innerHTML]="item.term"></dt> <dd [innerHTML]="item.description"></dd> </dl> </ng-template> </alphabet-filter>

I am using Angular 9 and used Yarn to install the package, everything else is working very well!

ericferreira1992 commented

@erswelljustin
Try update to the latest version of alphabet-filter, but it is using Angular v10.

erswelljustin commented

@ericferreira1992
I have updated my local version of Angular 10 (10.1.4) and I am still experiencing the problem, I am using the latest version of the component.

ericferreira1992 commented

@erswelljustin
Can you do a simulation using some code playground? I didn't manage to simulate around here.

kumarAmaragonda commented

@ericferreira1992
Hi,
We are also facing the same issue when upgraded our project to Angular 10.1.3 and alphabet-filter @1.2.0. can you please help me with this? Please refer below URL:
https://stackblitz.com/edit/angular-ivy-44a6dl?file=src%2Findex.html
Thanks and Regards,
Kumar.

ericferreira1992 commented

@kumarAmaragonda and @erswelljustin
I understood. I will fix it as soon as possible!
Thanks.

ericferreira1992 commented

@kumarAmaragonda and @erswelljustin
I fixed bug! Is available in 1.2.1 version of alphabet-filter.

  • 👍1
ericferreira1992 commented

Closed the topic, because no one else spoke and I considered the problem as solved.

kumarAmaragonda commented

Hi, @ericferreira1992
Thanks for the quick reply, but it is still not working, I have gone through the source code of Alphabetfilter, In Public goLetter(letter: string) method, you have used the below lines.

const letterElement = [...lettersElList].find((el: HTMLElement) => {
				const splitted = el.classList.value.split(' ');
				if (splitted.length > 0 && splitted[splitted.length - 2].includes('-')) {
        const letterClass = splitted[splitted.length - 2].split('-')[1].toUpperCase();
        debugger;
					return letterClass === letter;
				}

but in our Angular 5+ applications, we getting splitted.length as 3, as ng-star-inserted class appended to li element due to *ngFor, which causing the issue. Can you please look into it?

Thanks and Regards,
Kumar.