search

verbb / icon-picker

A Craft CMS field to select SVG or font icons from a folder for use in your content.
Other
17 stars 8 forks source link

Font Awesome 6 icons search issues #76

Closed sanderpotjer closed 1 year ago

sanderpotjer commented 1 year ago

Describe the bug

When searching for icons the incorrect icons are visible. E.g.:

Schermafbeelding 2023-02-24 om 15 57 46 Schermafbeelding 2023-02-24 om 15 57 52 Schermafbeelding 2023-02-24 om 15 57 57 Schermafbeelding 2023-02-24 om 15 58 05 Schermafbeelding 2023-02-24 om 15 58 11 Schermafbeelding 2023-02-24 om 15 58 18

As you can see when searching for c, ch, cha the same icons remain visible while the labels below the icons change.

Steps to reproduce

  1. Use Font Awesome 6 via a Kit
  2. Search for chart bar as example

Craft CMS version

4.3.10

Plugin version

2.0.12

Multi-site?

Yes

Additional context

No response

engram-design commented 1 year ago

This would be down to the virtual scroll list we use to aid in performance, but I can't seem to replicate that. There was a similar issue that was fixed in 2.0.12.

Are you able to go on the craft-4 branch just to test? To do this, run composer require verbb/icon-picker:"dev-craft-4 as 2.0.12".

Just to show my output of c, ch, cha, char, chart.

image image image image image
sanderpotjer commented 1 year ago

@engram-design thanks, unfortunately this doesn't solve the issue. Can I provide you any specific info?

engram-design commented 1 year ago

Hmm. I can see this is also inside a Super Table field. Do you see the same behaviour when outside of that? I also assume you've cleared the Icon Picker caches as well.

Wondering, if possible, if you can send through your kit details to support@verbb.io just in case there's something specific about that?

Otherwise, I'm not quite sure how to replicate what you're seeing...

sanderpotjer commented 1 year ago

@engram-design initially the field was used in a Matrix field, yesterday I tried as a single Icon Picker field as well and no other icon instances are on that test-section, same behavior. The weird thing is that if I type until chartt (so it has no results) and remove one character, the correct icons are displayed. See video clip below:

https://user-images.githubusercontent.com/522834/221789904-daff8beb-589f-46ef-be33-0f69460d9258.mov

Will send the kit details by mail.

engram-design commented 1 year ago

Thanks for sending that info through - that's exactly what's got it replicated for me! I believe this may be down to your Kit Settings in Font Awesome.

image

You'll need to ensure this is set to "Web Fonts" and not "SVG". This is because using SVGs, the Font Awesome JS will insert the SVG dynamically into each slot in the icon picker pane. But because we utilize a virtual scroller component that drastically improves the UI performance, that won't work. That's because each square is a reused DOM component, and that won't work when they change via filtering. As we're seeing - the contents of the DOM (the SVG) don't match up with the label.

Let me know if that doesn't work!

sanderpotjer commented 1 year ago

@engram-design requested our client to add another kit with the "Web Fonts" as setting and that indeed solved the issue! So thanks a lot for your support! :)

Maybe add this info to the documentation on https://verbb.io/craft-plugins/icon-picker/docs/feature-tour/icon-sets#kits or help text in settings?

engram-design commented 1 year ago

Agreed, totally forgot myself that it was a "requirement". Updated now.