amitha/feature/combobox-prevent-scroll (#299)

* add scroll prevention * move to defaults
mondaycom · Oct 25, 2021 · 550c7e4 · 550c7e4
1 parent 23e6a3a
commit 550c7e4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/src/components/Combobox/Combobox.jsx b/src/components/Combobox/Combobox.jsx
@@ -36,7 +36,8 @@ const Combobox = forwardRef(
       onFilterChanged,
       loading,
       onOptionHover,
-      onOptionLeave
+      onOptionLeave,
+      shouldScrollToSelectedItem
     },
     ref
   ) => {
@@ -104,6 +105,7 @@ const Combobox = forwardRef(
                     onOptionHover={onOptionEnter}
                     onOptionLeave={onOptionLeave}
                     optionLineHeight={optionLineHeight}
+                    shouldScrollWhenActive={shouldScrollToSelectedItem}
                   />
                 );
                 index++;
@@ -237,7 +239,8 @@ Combobox.propTypes = {
   onFilterChanged: PropTypes.func,
   loading: PropTypes.bool,
   onOptionHover: PropTypes.func,
-  onOptionLeave: PropTypes.func
+  onOptionLeave: PropTypes.func,
+  shouldScrollToSelectedItem: PropTypes.bool
 };
 Combobox.defaultProps = {
   className: "",
@@ -259,7 +262,8 @@ Combobox.defaultProps = {
   /** shows loading animation */
   loading: false,
   onOptionHover: NOOP,
-  onOptionLeave: NOOP
+  onOptionLeave: NOOP,
+  shouldScrollToSelectedItem: true
 };
 
 export default Combobox;
diff --git a/src/components/Combobox/components/ComboboxOption/ComboboxOption.jsx b/src/components/Combobox/components/ComboboxOption/ComboboxOption.jsx
@@ -13,7 +13,8 @@ const ComboboxOption = ({
   onOptionClick,
   onOptionLeave,
   onOptionHover,
-  optionLineHeight
+  optionLineHeight,
+  shouldScrollWhenActive
 }) => {
   const {
     id,
@@ -35,7 +36,7 @@ const ComboboxOption = ({
 
   useEffect(() => {
     const element = ref.current;
-    if (isActive && element) {
+    if (isActive && element && shouldScrollWhenActive) {
       element.scrollIntoView({ behaviour: "smooth" });
     }
   }, [ref, isActive]);
@@ -115,4 +116,8 @@ ComboboxOption.iconTypes = {
   RENDERER: "renderer"
 };
 
+ComboboxOption.defaultProps = {
+  shouldScrollWhenActive: true
+};
+
 export default ComboboxOption;