Fix field wrapper ref for Autosuggest

seek-oss · Mar 3, 2025 · b27c37b · b27c37b
1 parent b3c220f
commit b27c37b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 20 deletions.
diff --git a/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx b/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx
@@ -744,7 +744,6 @@ export const Autosuggest = forwardRef(function <Value>(
             id={id}
             value={value.text}
             prefix={undefined}
-            inputBoxRef={fieldRef}
             secondaryIcon={
               onClear ? (
                 <ClearField
@@ -758,7 +757,7 @@ export const Autosuggest = forwardRef(function <Value>(
             }
           >
             {(overlays, fieldProps, icon, secondaryIcon) => (
-              <Box width="full">
+              <Box width="full" ref={fieldRef}>
                 <Box
                   component="input"
                   {...fieldProps}

diff --git a/packages/braid-design-system/src/lib/components/private/BasePopover/BasePopover.tsx b/packages/braid-design-system/src/lib/components/private/BasePopover/BasePopover.tsx
@@ -347,9 +347,6 @@ export const BasePopover = ({
           {children}
           {!tabToExit && <ExitFocusCapture />}
         </Box>
-      </BraidPortal>
-      {/* Todo - should this be portaled? */}
-      {type === 'popover' && (
         <Box
           onClick={(event) => {
             event.stopPropagation();
@@ -358,13 +355,14 @@ export const BasePopover = ({
               handleOnClose();
             }
           }}
+          pointerEvents="none"
           position="fixed"
           zIndex="modal"
           top={0}
           left={0}
           className={styles.backdrop}
         />
-      )}
+      </BraidPortal>
     </BasePopoverContext.Provider>
   );
 };
diff --git a/packages/braid-design-system/src/lib/components/private/Field/Field.tsx b/packages/braid-design-system/src/lib/components/private/Field/Field.tsx
@@ -2,12 +2,7 @@ import assert from 'assert';
 
 import clsx from 'clsx';
 import dedent from 'dedent';
-import React, {
-  type ReactNode,
-  type AllHTMLAttributes,
-  Fragment,
-  type RefObject,
-} from 'react';
+import React, { type ReactNode, type AllHTMLAttributes, Fragment } from 'react';
 
 import { textStyles } from '../../../css/typography';
 import { useBackgroundLightness } from '../../Box/BackgroundContext';
@@ -101,7 +96,6 @@ type InternalFieldProps = FieldBaseProps &
       prefix: ReactNode,
     ): ReactNode;
     componentName: string;
-    inputBoxRef?: RefObject<HTMLElement>;
   };
 
 export const Field = ({
@@ -125,7 +119,6 @@ export const Field = ({
   prefix,
   required,
   tabIndex,
-  inputBoxRef,
   componentName,
   ...restProps
 }: InternalFieldProps) => {
@@ -210,12 +203,10 @@ export const Field = ({
 
       <Stack space="xsmall">
         <Box
-          ref={inputBoxRef}
           position="relative"
           background={fieldBackground}
           borderRadius="standard"
           display="flex"
-          className={showSecondaryIcon ? styles.secondaryIconSpace : undefined}
         >
           {children(
             overlays,
@@ -255,6 +246,7 @@ export const Field = ({
                 }),
                 touchableText.standard,
                 icon && !prefix ? styles.iconSpace : null,
+                showSecondaryIcon ? styles.secondaryIconSpace : undefined,
               ),
             },
             icon ? (
@@ -276,13 +268,13 @@ export const Field = ({
             ) : null,
             secondaryIcon ? (
               <Box
-                component="span"
-                position="absolute"
-                width="touchable"
-                height="touchable"
                 display="flex"
                 alignItems="center"
                 justifyContent="center"
+                position="absolute"
+                height="touchable"
+                width="touchable"
+                component="span"
                 top={0}
                 right={0}
               >