feat(combobox): add support for computeStyle prop for popover positio…

…ning
innovaccer · Jun 13, 2024 · 0471090 · 0471090
1 parent 872648f
commit 0471090
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 231 deletions.
diff --git a/core/components/organisms/combobox/Combobox.tsx b/core/components/organisms/combobox/Combobox.tsx
@@ -175,6 +175,19 @@ export const Combobox = (props: ComboboxProps) => {
 
   const inputTriggerRef = React.useRef<HTMLInputElement>();
   const popoverId = `DesignSystem-Combobox--Popover-${uidGenerator()}`;
+  const defaultPopoverStyle = {
+    fn: (data: any) => {
+      return {
+        ...data,
+        styles: {
+          ...data.styles,
+          position: 'fixed',
+        },
+      };
+    },
+  };
+
+  const popoverComputeStyle = computeStyles ?? defaultPopoverStyle;
 
   React.useEffect(() => {
     const popperWidth = triggerRef.current?.clientWidth;
@@ -297,7 +310,7 @@ export const Combobox = (props: ComboboxProps) => {
             customStyle={popoverStyle}
             onToggle={onToggleHandler}
             trigger={<ComboboxTrigger {...triggerProps} />}
-            computeStyles={computeStyles}
+            computeStyles={popoverComputeStyle}
           >
             <div style={wrapperStyle} ref={listRef} id={popoverId}>
               {children && typeof children === 'function' ? children(contextProp) : children}

diff --git a/core/components/organisms/combobox/__stories__/computeStyle.story.jsx b/core/components/organisms/combobox/__stories__/computeStyle.story.jsx