Select: fix strategy="fixed" not scrolling to selected (#2112)

* Fixed strategy=fixed not scrolling to selected * Minor fix in story --------- Co-authored-by: josephmathew900 <[email protected]>
bigbinary · Mar 6, 2024 · 48c2dcb · 48c2dcb
1 parent 4b91c30
commit 48c2dcb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/src/components/Select.jsx b/src/components/Select.jsx
@@ -73,15 +73,24 @@ const CustomInput = props => {
   );
 };
 
-const CustomOption = props => (
-  <components.Option
-    {...props}
-    innerProps={{
-      ...props.innerProps,
-      "data-cy": `${hyphenize(props.label)}-select-option`,
-    }}
-  />
-);
+const CustomOption = props => {
+  const ref = useRef();
+
+  useEffect(() => {
+    props.isSelected && ref.current.scrollIntoView();
+  }, [props.isSelected]);
+
+  return (
+    <components.Option
+      {...props}
+      innerRef={ref}
+      innerProps={{
+        ...props.innerProps,
+        "data-cy": `${hyphenize(props.label)}-select-option`,
+      }}
+    />
+  );
+};
 
 const Placeholder = props => {
   const { selectProps } = props;

diff --git a/stories/Components/Select.stories.jsx b/stories/Components/Select.stories.jsx
@@ -31,23 +31,23 @@ const Template = args => (
   </div>
 );
 
+const OPTIONS = Array.from({ length: 20 }, (_, index) => ({
+  value: `value${index}`,
+  label: `Value ${index}`,
+}));
+
 const Default = Template.bind({});
 Default.args = {
   label: "Select",
-  defaultValue: { value: "value3", label: "Value three" },
+  defaultValue: { value: "value15", label: "Value 15" },
   placeholder: "Select an option",
   isDisabled: false,
   isClearable: true,
   isSearchable: true,
   name: "ValueList",
   optionRemapping: {},
-  options: [
-    { value: "value1", label: "Value one" },
-    { value: "value2", label: "Value two" },
-    { value: "value3", label: "Value three" },
-    { value: "value4", label: "Value four" },
-    { value: "value5", label: "Value five" },
-  ],
+  options: OPTIONS,
+  strategy: "fixed",
 };
 
 const Sizes = args => (