fix(Autocomplete): fix stretched form status in autocomplete using su…

…ffix
dnbexperience · Jun 9, 2023 · bd5bedd · bd5bedd
1 parent f435633
commit bd5bedd
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 2 deletions.
diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
@@ -1882,10 +1882,11 @@ class AutocompleteInstance extends React.PureComponent {
       this.context.drawerList.original_data
     )?.suffix_value
 
+    const innerId = suffixValue ? `${id}-inner` : null
+
     // also used for code markup simulation
     validateDOMAttributes(null, mainParams)
     validateDOMAttributes(null, shellParams)
-
     return (
       <span {...mainParams}>
         {label && (
@@ -1901,7 +1902,11 @@ class AutocompleteInstance extends React.PureComponent {
           />
         )}
 
-        <span className="dnb-autocomplete__inner" ref={this._ref}>
+        <span
+          className="dnb-autocomplete__inner"
+          ref={this._ref}
+          id={innerId}
+        >
           <AlignmentHelper />
 
           <FormStatus
@@ -1914,6 +1919,7 @@ class AutocompleteInstance extends React.PureComponent {
             state={status_state}
             no_animation={status_no_animation}
             skeleton={skeleton}
+            width_selector={innerId}
             {...status_props}
           />
 

diff --git a/packages/dnb-eufemia/src/components/form-status/stories/FormStatus.stories.tsx b/packages/dnb-eufemia/src/components/form-status/stories/FormStatus.stories.tsx
@@ -20,8 +20,11 @@ import {
   Dialog,
   HelpButton,
   GlobalStatus,
+  Autocomplete,
+  NumberFormat,
 } from '../..'
 import { Link } from '../../..'
+import { format } from '../../number-format/NumberUtils'
 
 export default {
   title: 'Eufemia/Components/FormStatus',
@@ -49,6 +52,46 @@ const SmallWidth = styled(Input)`
 //     My info <Link href="/">with a link</Link> and more text
 //   </>
 // )
+const ban = format(21001234567, { ban: true })
+
+const numbers = [
+  {
+    selected_value: `Brukskonto (${ban})`,
+    suffix_value: (
+      <NumberFormat lang="nb" currency srLabel="Total:">
+        {12345678}
+      </NumberFormat>
+    ),
+    content: ['Brukskonto', ban],
+  },
+  {
+    selected_value: `BSU (${ban})`,
+    suffix_value: (
+      <NumberFormat currency srLabel="Total:">
+        {2223}
+      </NumberFormat>
+    ),
+    content: ['BSU', ban],
+  },
+  {
+    selected_value: `Sparekonto (${ban})`,
+    suffix_value: (
+      <NumberFormat currency srLabel="Total:">
+        {876555.5}
+      </NumberFormat>
+    ),
+    content: ['Sparekonto', ban],
+  },
+  {
+    selected_value: `Brukskonto (${ban})`,
+    suffix_value: (
+      <NumberFormat currency srLabel="Total:">
+        {34999.2}
+      </NumberFormat>
+    ),
+    content: ['Brukskonto', ban],
+  },
+]
 
 export const FormStatusSandbox = () => {
   return (
@@ -111,6 +154,7 @@ export const FormStatusSandbox = () => {
           Value
         </Input>
       </Box>
+
       <Box>
         <Switch
           label="Switch label"
@@ -219,3 +263,22 @@ export const GlobalStatusExample = () => {
     </>
   )
 }
+
+export const SuffixAndStretchedStatus = () => {
+  return (
+    <Box>
+      <Autocomplete
+        status_state="warn"
+        status_props={{ stretch: true }}
+        status="This is a long text to check whether status_props stretch works or not"
+        label="Autocomplete with suffix and stretched status"
+        data={numbers}
+        size="medium"
+        show_submit_button
+        skip_portal
+        stretch
+        value={1}
+      />
+    </Box>
+  )
+}