fix(core): escape custom classes for query selectors (fix #674)

Grsmto · Oct 8, 2023 · 10d0d98 · 10d0d98
1 parent 0b4047b
commit 10d0d98
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/examples/stories/SimpleBarReact.stories.tsx b/packages/examples/stories/SimpleBarReact.stories.tsx
@@ -75,6 +75,15 @@ WithScale.args = {
   style: { transform: 'scale(0.5)' },
 };
 
+export const WithCustomClassNames = Template.bind({});
+WithCustomClassNames.args = {
+  ...SimpleBar.defaultOptions,
+  classNames: {
+    contentEl: 'simplebar-content max-h-[1rem]',
+  },
+  style: { height: 300 },
+};
+
 const WithImageTemplate: StoryFn<{
   className: string;
   style: React.CSSProperties;

diff --git a/packages/simplebar-core/src/helpers.ts b/packages/simplebar-core/src/helpers.ts
@@ -84,7 +84,11 @@ export function removeClasses(el: HTMLElement | null, classes: string): void {
 }
 
 export function classNamesToQuery(classNames: string): string {
-  return `.${classNames.split(' ').join('.')}`;
+  return `.${classNames.split(' ').map(escapeForQuerySelector).join('.')}`;
+}
+
+export function escapeForQuerySelector(str: string): string {
+  return str.replace(/([!\"#$%&'()*+,.\/:;<=>?@\[\\\]^`{|}~])/g, '\\$1');
 }
 
 export function mergeClassNames(