From 8a919df2d07b4b5adc0c8dab61fe755a89458f60 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Tue, 26 Jan 2021 21:50:37 +1100
Subject: [PATCH] fix: improve query selector syntax (#367)

* docs: fix select example

* fix: tab styles

* fix: fix ListFilter querySelector syntax

* chore: changeset
---
 .changeset/fuzzy-horses-hang.md              | 7 +++++++
 docs/pages/components/select.mdx             | 2 +-
 packages/components/src/Tabs/Tab/styles.ts   | 2 +-
 packages/search-ui/src/Filter/ListFilter.tsx | 2 +-
 4 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/fuzzy-horses-hang.md

diff --git a/.changeset/fuzzy-horses-hang.md b/.changeset/fuzzy-horses-hang.md
new file mode 100644
index 000000000..3115e1740
--- /dev/null
+++ 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
index 2ab8ec4c4..9eaac01d8 100644
--- 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
index 94e3db305..3aa754374 100644
--- 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
index 313ac070d..76663454b 100644
--- 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();
     }