fix: remove input width when unfocused and in stretch mode

opengovsg · Nov 21, 2023 · 8de7002 · 8de7002
1 parent 079e855
commit 8de7002
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 19 deletions.
diff --git a/react/src/MultiSelect/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/react/src/MultiSelect/components/MultiSelectCombobox/MultiSelectCombobox.tsx
@@ -1,5 +1,12 @@
-import { forwardRef, PropsWithChildren, useCallback } from 'react'
-import { Box, chakra, Flex, Icon, useMergeRefs } from '@chakra-ui/react'
+import { forwardRef, PropsWithChildren, useCallback, useMemo } from 'react'
+import {
+  Box,
+  chakra,
+  Flex,
+  Icon,
+  SystemStyleObject,
+  useMergeRefs,
+} from '@chakra-ui/react'
 
 import { BxsChevronDown, BxsChevronUp } from '~/icons'
 import { useSelectContext } from '~/SingleSelect'
@@ -10,7 +17,21 @@ import { SelectedItems } from './SelectedItems'
 
 const MultiItemsContainer = ({ children }: PropsWithChildren) => {
   const { styles } = useSelectContext()
-  return <Box sx={styles.itemContainer}>{children}</Box>
+  const { isStretchLayout } = useMultiSelectContext()
+
+  const containerStyles = useMemo(() => {
+    if (isStretchLayout)
+      return {
+        columnGap: '0',
+      }
+    return {}
+  }, [isStretchLayout])
+
+  return (
+    <Box __css={styles.itemContainer} {...containerStyles}>
+      {children}
+    </Box>
+  )
 }
 
 export const MultiSelectCombobox = forwardRef<HTMLInputElement>(
@@ -23,6 +44,7 @@ export const MultiSelectCombobox = forwardRef<HTMLInputElement>(
       isRequired,
       placeholder,
       setIsFocused,
+      isFocused,
       isOpen,
       toggleMenu,
       isInvalid,
@@ -31,7 +53,7 @@ export const MultiSelectCombobox = forwardRef<HTMLInputElement>(
       getToggleButtonProps,
     } = useSelectContext()
 
-    const { getDropdownProps } = useMultiSelectContext()
+    const { getDropdownProps, selectedItems } = useMultiSelectContext()
 
     const mergedRefs = useMergeRefs(inputRef, ref)
 
@@ -56,6 +78,14 @@ export const MultiSelectCombobox = forwardRef<HTMLInputElement>(
       [setIsFocused],
     )
 
+    const focusInputStyles: SystemStyleObject = useMemo(() => {
+      if (isFocused || selectedItems.length === 0) return {}
+      return {
+        width: 0,
+        padding: 0,
+        flex: 0,
+      }
+    }, [isFocused, selectedItems.length])
 
     return (
       <Flex
@@ -70,6 +100,7 @@ export const MultiSelectCombobox = forwardRef<HTMLInputElement>(
           <chakra.input
             placeholder={placeholder}
             __css={styles.field}
+            {...focusInputStyles}
             {...getInputProps({
               ...getDropdownProps({
                 ref: mergedRefs,

diff --git a/react/src/theme/components/MultiSelect.ts b/react/src/theme/components/MultiSelect.ts
@@ -72,6 +72,8 @@ const baseStyle = definePartsStyle((props) => {
       flexGrow: 1,
       width: 0,
       bg: 'transparent',
+      minW: '3.75rem',
+      px: '0.25rem',
       _disabled: {
         cursor: 'not-allowed',
       },
@@ -144,11 +146,6 @@ const sizes = {
         minH: SingleSelect.sizes?.xs.field?.h,
         h: 'auto',
       },
-      field: {
-        minW: '3.75rem',
-        px: '2px',
-        my: '2px',
-      },
     }),
   ),
   sm: definePartsStyle(
@@ -175,11 +172,6 @@ const sizes = {
         minH: SingleSelect.sizes?.sm.field?.h,
         h: 'auto',
       },
-      field: {
-        minW: '3.75rem',
-        px: '2px',
-        my: '2px',
-      },
     }),
   ),
   md: definePartsStyle(
@@ -206,11 +198,6 @@ const sizes = {
         minH: SingleSelect.sizes?.md.field?.h,
         h: 'auto',
       },
-      field: {
-        minW: '3.75rem',
-        px: '2px',
-        my: '2px',
-      },
     }),
   ),
 }