fix: improve query selector syntax (#367)

* docs: fix select example * fix: tab styles * fix: fix ListFilter querySelector syntax * chore: changeset
sajari · Jan 26, 2021 · 8a919df · 8a919df
1 parent b6c4ada
commit 8a919df
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/.changeset/fuzzy-horses-hang.md b/.changeset/fuzzy-horses-hang.md
@@ -0,0 +1,7 @@
+---
+'sajari-sdk-docs': patch
+'@sajari/react-components': patch
+'@sajari/react-search-ui': patch
+---
+
+Fix DOMException related to querySelector syntax
diff --git a/docs/pages/components/select.mdx b/docs/pages/components/select.mdx
@@ -121,7 +121,7 @@ Use the `size` prop to set the size of the select. The default is `md`.
 By default the text for the button is `'Select an option'` when no options are selected or `'X selected'` where X is the number of options selected. This can be change via the `text` prop.
 
 ```jsx
-<Select multiple text={(count) => (count > 0 ? `${count} filters` : 'Select a filter')}>
+<Select multiple text={({ length }) => (length > 0 ? `${length.toLocaleString()} filters` : 'Select a filter')}>
   <Option value="option1">Option 1</Option>
   <Option value="option2">Option 2</Option>
   <Option value="option3">Option 3</Option>

diff --git a/packages/components/src/Tabs/Tab/styles.ts b/packages/components/src/Tabs/Tab/styles.ts
@@ -14,7 +14,7 @@ export default function useTabStyles(props: TabProps) {
   const styles: (TwStyle | string)[] = [];
 
   styles.push(
-    tw`relative flex items-center px-4 py-3 m-0 -mb-px text-base text-gray-500 bg-transparent border-0 border-b-2 border-transparent border-solid font-inherit focus:outline-none`,
+    tw`relative flex items-center justify-center px-4 py-3 m-0 -mb-px text-base text-gray-500 bg-transparent border-0 border-b-2 border-transparent border-solid font-inherit focus:outline-none`,
   );
 
   if (!selected) {

diff --git a/packages/search-ui/src/Filter/ListFilter.tsx b/packages/search-ui/src/Filter/ListFilter.tsx
@@ -69,7 +69,7 @@ const ListFilter = (props: Omit<ListFilterProps, 'type'>) => {
     if (!isSSR() && pinSelected) {
       const input = document
         .querySelector(`#${filterContainerId}`)
-        ?.querySelector(`input[value='${lastFocusedControl}']`) as HTMLInputElement | null;
+        ?.querySelector(`input[value="${lastFocusedControl}"]`) as HTMLInputElement | null;
 
       input?.focus();
     }