fix(select): #145

hope-ui · May 8, 2022 · 766ed77 · 766ed77
1 parent 8aa9743
commit 766ed77
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 4 deletions.
diff --git a/apps/docs/src/components/Header.tsx b/apps/docs/src/components/Header.tsx
@@ -79,7 +79,7 @@ export default function Header() {
               </hope.span>
             </Text>
             <Tag size="sm" rounded="$sm" fontWeight="$semibold">
-              v0.5.0
+              v0.5.1
             </Tag>
           </HStack>
           <HStack spacing="$2">

diff --git a/packages/solid/CHANGELOG.md b/packages/solid/CHANGELOG.md
@@ -1,3 +1,9 @@
+## [0.5.1](https://github.com/fabien-ml/hope-ui/compare/v0.5.0...v0.5.1) (2022-05-08)
+
+### 🐛 Bug fixes
+
+- Clicking Scrollbar in `Select` closes dropdown instead of scrolling (#145).
+
 ## [0.5.0](https://github.com/fabien-ml/hope-ui/compare/v0.4.5...v0.5.0) (2022-05-04)
 
 ### 💥 BREAKING CHANGES

diff --git a/packages/solid/dev/index.html b/packages/solid/dev/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <title>Solid App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script src="./index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/packages/solid/dev/index.tsx b/packages/solid/dev/index.tsx
@@ -0,0 +1,23 @@
+import { For } from "solid-js";
+import { render } from "solid-js/web";
+
+import { HopeProvider, SimpleOption, SimpleSelect } from "../src";
+
+function App() {
+  return (
+    <SimpleSelect placeholder="Pick a number">
+      <For each={Array(100).fill(0)}>
+        {(_, i) => <SimpleOption value={i()}>{i()}</SimpleOption>}
+      </For>
+    </SimpleSelect>
+  );
+}
+
+render(
+  () => (
+    <HopeProvider>
+      <App />
+    </HopeProvider>
+  ),
+  document.getElementById("root") as HTMLDivElement
+);
diff --git a/packages/solid/dev/vite.config.ts b/packages/solid/dev/vite.config.ts
@@ -0,0 +1,3 @@
+import viteConfig from "../vite.config";
+
+export default viteConfig;
diff --git a/packages/solid/package.json b/packages/solid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hope-ui/solid",
-  "version": "0.5.1-alpha.0",
+  "version": "0.5.1",
   "private": false,
   "description": "The SolidJS component library you've hoped for.",
   "keywords": [

diff --git a/packages/solid/src/components/select/select-listbox.tsx b/packages/solid/src/components/select/select-listbox.tsx
@@ -35,6 +35,11 @@ export function SelectListbox<C extends ElementType = "div">(props: SelectListbo
     }
   };
 
+  const onMouseDown = (event: MouseEvent) => {
+    // Prevent select trigger from loosing focus and close the listbox.
+    event.preventDefault();
+  };
+
   return (
     <Box
       ref={assignListboxRef}
@@ -44,6 +49,7 @@ export function SelectListbox<C extends ElementType = "div">(props: SelectListbo
       class={classes()}
       __baseStyle={theme?.baseStyle?.listbox}
       onMouseLeave={selectContext.onListboxMouseLeave}
+      onMouseDown={onMouseDown}
       {...others}
     />
   );

diff --git a/packages/solid/src/components/select/select.tsx b/packages/solid/src/components/select/select.tsx
@@ -634,7 +634,7 @@ export function Select(props: SelectProps) {
     listboxRef = el;
   };
 
-  const scrollToOption = (optionRef: HTMLDivElement) => {
+  const scrollToOption = (optionRef: HTMLElement) => {
     if (!listboxRef) {
       return;
     }
@@ -686,6 +686,28 @@ export function Select(props: SelectProps) {
     )
   );
 
+  createEffect(
+    on(
+      () => state.opened,
+      newValue => {
+        if (!newValue) {
+          return;
+        }
+
+        // Use a micro task so the listbox is visible when trying to scroll to selected option.
+        setTimeout(() => {
+          const firstSelectedOption = listboxRef?.querySelector(
+            "[role='option'][aria-selected='true']"
+          ) as HTMLDivElement;
+
+          if (firstSelectedOption) {
+            scrollToOption(firstSelectedOption);
+          }
+        }, 0);
+      }
+    )
+  );
+
   const context: SelectContextValue = {
     state: state as SelectState,
     isOptionSelected,
@@ -750,7 +772,7 @@ interface SelectContextValue {
   /**
    * Scroll to the active option.
    */
-  scrollToOption: (optionRef: HTMLDivElement) => void;
+  scrollToOption: (optionRef: HTMLElement) => void;
 
   /**
    * Register a `SelectOption` to the context.