Select: Fixes virtualized select showing empty space above selected value (#84544)

* Select: Virtualized select bug replication

* Update with fix

* remove story

* Pin version

* Update

* Update

packages/grafana-runtime/package.json

@@ -52,6 +52,7 @@
   "devDependencies": {
     "@grafana/tsconfig": "^1.3.0-rc1",
     "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-terser": "0.1.0",
     "@testing-library/dom": "9.3.4",
     "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",

packages/grafana-ui/src/components/Select/Select.story.tsx

@@ -105,6 +105,7 @@ export const Basic: Story<StoryProps> = (args) => {
     </>
   );
 };
+
 export const BasicVirtualizedList: Story<StoryProps> = (args) => {
   const [value, setValue] = useState<SelectableValue<string>>();
 
@@ -123,6 +124,7 @@ export const BasicVirtualizedList: Story<StoryProps> = (args) => {
     </>
   );
 };
+
 /**
  * Uses plain values instead of SelectableValue<T>
  */
@@ -143,6 +145,7 @@ export const BasicSelectPlainValue: Story<StoryProps> = (args) => {
     </>
   );
 };
+
 /**
  * Uses plain values instead of SelectableValue<T>
  */

packages/grafana-ui/src/components/Select/SelectMenu.tsx

@@ -50,7 +50,7 @@ export const VirtualizedSelectMenu = ({ children, maxHeight, options, getValue }
   const [value] = getValue();
 
   const valueIndex = value ? options.findIndex((option: SelectableValue<unknown>) => option.value === value.value) : 0;
-  const initialOffset = valueIndex * VIRTUAL_LIST_ITEM_HEIGHT;
+  const valueYOffset = valueIndex * VIRTUAL_LIST_ITEM_HEIGHT;
 
   if (!Array.isArray(children)) {
     return null;
@@ -60,6 +60,9 @@ export const VirtualizedSelectMenu = ({ children, maxHeight, options, getValue }
   const widthEstimate = longestOption * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER;
   const heightEstimate = Math.min(options.length * VIRTUAL_LIST_ITEM_HEIGHT, maxHeight);
 
+  // Try to scroll to keep current value in the middle
+  const scrollOffset = Math.max(0, valueYOffset - heightEstimate / 2);
+
   return (
     <List
       className={styles.menu}
@@ -68,7 +71,7 @@ export const VirtualizedSelectMenu = ({ children, maxHeight, options, getValue }
       aria-label="Select options menu"
       itemCount={children.length}
       itemSize={VIRTUAL_LIST_ITEM_HEIGHT}
-      initialScrollOffset={initialOffset}
+      initialScrollOffset={scrollOffset}
     >
       {({ index, style }) => <div style={{ ...style, overflow: 'hidden' }}>{children[index]}</div>}
     </List>