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

…ffix
dnbexperience · Jun 12, 2023 · ea5b675 · ea5b675
1 parent f435633
commit ea5b675
Show file tree

Hide file tree

Showing 4 changed files with 94 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 && showStatus ? `${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/autocomplete/__tests__/Autocomplete.test.tsx b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx
@@ -288,6 +288,27 @@ describe('Autocomplete component', () => {
 
       expect(document.activeElement.tagName).toBe('INPUT')
     })
+
+    it('has inner id, used to compute form status width, when status and suffix value', () => {
+      render(
+        <Component
+          data={mockData}
+          {...mockProps}
+          status="status text"
+          status_state="info"
+          status_props={{ stretch: true }}
+          show_submit_button
+          stretch
+          value={1}
+        />
+      )
+
+      expect(
+        document
+          .querySelector('.dnb-autocomplete__inner')
+          .getAttribute('id')
+      ).toBeTruthy()
+    })
   })
 
   it('has correct options when search_in_word_index is set to 1', () => {

diff --git a/...nb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/...nb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -330,6 +330,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
         </FormLabel>
         <span
           className="dnb-autocomplete__inner"
+          id={null}
         >
           <AlignmentHelper
             className={null}

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',
@@ -111,6 +114,7 @@ export const FormStatusSandbox = () => {
           Value
         </Input>
       </Box>
+
       <Box>
         <Switch
           label="Switch label"
@@ -219,3 +223,63 @@ export const GlobalStatusExample = () => {
     </>
   )
 }
+
+export const SuffixAndStretchedStatus = () => {
+  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],
+    },
+  ]
+
+  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>
+  )
+}