Improve combobox for embedded apps

nsbno · Aug 14, 2023 · 583031d · 583031d
1 parent d5679e2
commit 583031d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/packages/spor-react/src/input/Combobox.tsx b/packages/spor-react/src/input/Combobox.tsx
@@ -113,6 +113,7 @@ export function Combobox<T extends object>({
     <>
       <Input
         {...inputProps}
+        aria-haspopup="listbox"
         ref={inputRef}
         label={label}
         borderBottomLeftRadius={

diff --git a/packages/spor-react/src/input/Popover.tsx b/packages/spor-react/src/input/Popover.tsx
@@ -81,18 +81,28 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       state
     );
 
-    return (
-      <Overlay>
-        {hasBackdrop && <Box {...underlayProps} position="fixed" inset="0" />}
+    const PopOverBox = () => {
+      return (
         <Box
           {...popoverProps}
           ref={popoverRef}
           minWidth={triggerRef.current?.clientWidth ?? "auto"}
+          marginLeft={-2}
         >
-          <DismissButton onDismiss={state.close} />
+          {!isNonModal && <DismissButton onDismiss={state.close} />}
           {children}
           <DismissButton onDismiss={state.close} />
         </Box>
+      );
+    };
+
+    if (isNonModal) {
+      return <PopOverBox />;
+    }
+    return (
+      <Overlay>
+        {hasBackdrop && <Box {...underlayProps} position="fixed" inset="0" />}
+        <PopOverBox />
       </Overlay>
     );
   }