From 47668a36dbca994cafeb848aa7bd46210975ee53 Mon Sep 17 00:00:00 2001
From: Ivan Starkov <istarkov@gmail.com>
Date: Tue, 5 Nov 2024 00:06:48 +0400
Subject: [PATCH] fix: Select jumps if  list is scrollable (#4365)

## Description

Up Down arrows in case of huge list caused list jumps, and hover lost in
some cases


![image](https://github.com/user-attachments/assets/4f30660d-182a-46b3-954d-931ec73c1303)

Replaced with scroll


![image](https://github.com/user-attachments/assets/b067fec5-e78b-4077-8403-345214c33233)

No jumps.

Both solution shows that select list has overflow. Scroll has no visual
issues.

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 .../design-system/src/components/select.tsx   | 76 ++++++++++---------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/packages/design-system/src/components/select.tsx b/packages/design-system/src/components/select.tsx
index b069833161..d3c88bf62b 100644
--- a/packages/design-system/src/components/select.tsx
+++ b/packages/design-system/src/components/select.tsx
@@ -7,8 +7,7 @@ import {
   forwardRef,
   useState,
 } from "react";
-import { ChevronDownIcon, ChevronUpIcon } from "@webstudio-is/icons";
-import { rawTheme, styled, theme } from "../stitches.config";
+import { styled, theme } from "../stitches.config";
 import {
   menuCss,
   menuItemCss,
@@ -19,6 +18,7 @@ import {
 } from "./menu";
 import { SelectButton } from "./select-button";
 import { Box } from "./box";
+import { ScrollArea } from "./scroll-area";
 
 export const SelectContent = styled(Primitive.Content, menuCss, {
   "&[data-side=top]": {
@@ -243,41 +243,43 @@ const SelectBase = <Option,>(
       </Primitive.Trigger>
       <Primitive.Portal>
         <SelectContent position="popper">
-          <SelectScrollUpButton css={{ order: 1 }}>
-            <ChevronUpIcon />
-          </SelectScrollUpButton>
-
-          <SelectViewport style={{ order: 1, maxHeight: rawTheme.spacing[34] }}>
-            {children ||
-              options.map((option, index) => {
-                const value = getValue(option) ?? "";
-                const { textValue, ...rest } = getItemProps?.(option) ?? {};
-                return (
-                  <SelectItem
-                    key={value ?? index}
-                    value={value}
-                    textValue={textValue ?? value}
-                    onFocus={() => {
-                      onItemHighlight?.(option);
-                      setHighlightedItem(option);
-                    }}
-                    onBlur={() => {
-                      onItemHighlight?.(undefined);
-                      setHighlightedItem(undefined);
-                    }}
-                    text="sentence"
-                    {...rest}
-                  >
-                    {getLabel(option)}
-                  </SelectItem>
-                );
-              })}
-          </SelectViewport>
-
-          <SelectScrollDownButton css={{ order: 2 }}>
-            <ChevronDownIcon />
-          </SelectScrollDownButton>
-
+          <Box
+            css={{
+              display: "flex",
+              flexDirection: "column",
+              maxHeight: theme.spacing[34],
+              order: 1,
+            }}
+          >
+            <ScrollArea>
+              <SelectViewport>
+                {children ||
+                  options.map((option, index) => {
+                    const value = getValue(option) ?? "";
+                    const { textValue, ...rest } = getItemProps?.(option) ?? {};
+                    return (
+                      <SelectItem
+                        key={value ?? index}
+                        value={value}
+                        textValue={textValue ?? value}
+                        onFocus={() => {
+                          onItemHighlight?.(option);
+                          setHighlightedItem(option);
+                        }}
+                        onBlur={() => {
+                          onItemHighlight?.(undefined);
+                          setHighlightedItem(undefined);
+                        }}
+                        text="sentence"
+                        {...rest}
+                      >
+                        {getLabel(option)}
+                      </SelectItem>
+                    );
+                  })}
+              </SelectViewport>
+            </ScrollArea>
+          </Box>
           {description && (
             <SelectItemDescription descriptions={descriptions}>
               {description}