Flip id is not sanitized before being put in the data attribute

aholachek / react-flip-toolkit

A lightweight magic-move library for configurable layout transitions

MIT License

4.08k stars 137 forks source link

Flip id is not sanitized before being put in the data attribute #193

Open michal-rybinski-91 opened 2 years ago

michal-rybinski-91 commented 2 years ago

This leads to errors with query selector:

SyntaxError: Failed to execute 'querySelectorAll' on 'Element': '[data-flipper-id="0.62822"] [data-flip-id="Kontrolle "Nummer falsch" in Hubspot"]' is not a valid selector.

aholachek commented 2 years ago

Thanks for making this issue! An easy workaround is to make sure your flip ids are valid data attributes. The next time I update the library I'll add some processing to check for spaces.

michal-rybinski-91 commented 2 years ago

Thank you for replying. Yeah, that's how I have resolved it. There is no build-in browser API for sanitizing string meant to be used in selectors, at least I didn't find it, so I ended up using some snippet from SO Would be nice for lib to do it, or at least mention in the doc that this id will be used as data attribute and passed to selector "as is".