Merge pull request #2208 from SpareBank1/develop_fix-searchable-dropdown

fix(ffe-searchable-dropdown-react): aria-selected
SpareBank1 · Aug 16, 2024 · 1b99f6b · 1b99f6b
2 parents c76d6fc + 6177830
commit 1b99f6b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 20 deletions.
diff --git a/packages/ffe-searchable-dropdown-react/package.json b/packages/ffe-searchable-dropdown-react/package.json
@@ -31,6 +31,7 @@
         "@sb1/ffe-form": "^29.1.5",
         "@sb1/ffe-icons-react": "^11.0.2",
         "@sb1/ffe-spinner-react": "^9.0.6",
+        "@types/lodash.isequal": "^4.5.8",
         "classnames": "^2.3.1",
         "compute-scroll-into-view": "^3.1.0",
         "lodash.debounce": "^4.0.8",

diff --git a/packages/ffe-searchable-dropdown-react/src/ListItemContainer.tsx b/packages/ffe-searchable-dropdown-react/src/ListItemContainer.tsx
@@ -4,6 +4,7 @@ import { fixedForwardRef } from './fixedForwardRef';
 interface ListItemContainerProps<Item extends Record<string, any>> {
     item: Item;
     isHighlighted: boolean;
+    isSelected: boolean;
     children: ({
         item,
         isHighlighted,
@@ -19,6 +20,7 @@ function ListItemContainerWithForwardRef<Item extends Record<string, any>>(
     {
         item,
         isHighlighted,
+        isSelected,
         children,
         onMouseEnter,
         onClick,
@@ -32,7 +34,7 @@ function ListItemContainerWithForwardRef<Item extends Record<string, any>>(
             id={id}
             role="option"
             onMouseEnter={onMouseEnter}
-            aria-selected={isHighlighted}
+            aria-selected={isSelected}
             ref={ref}
             onClick={onClick}
             className="ffe-searchable-dropdown__list-item-container"

diff --git a/packages/ffe-searchable-dropdown-react/src/Results.tsx b/packages/ffe-searchable-dropdown-react/src/Results.tsx
@@ -3,6 +3,7 @@ import { Scrollbars } from 'react-custom-scrollbars-2';
 import { ListItemContainer } from './ListItemContainer';
 import { NoMatch } from './NoMatch';
 import { Locale } from './types';
+import isEqual from 'lodash.isequal';
 
 interface ResultProps<Item extends Record<string, any>> {
     noMatch?: {
@@ -17,6 +18,7 @@ interface ResultProps<Item extends Record<string, any>> {
         dropdownAttributes: (keyof Item)[];
         locale: Locale;
     }>;
+    selectedItem?: Item | null;
     highlightedIndex?: number;
     refs: React.Ref<HTMLDivElement>[];
     dropdownAttributes: (keyof Item)[];
@@ -34,6 +36,7 @@ export function Results<Item extends Record<string, any>>({
     dropdownAttributes,
     locale,
     onChange,
+    selectedItem,
 }: ResultProps<Item>) {
     return (
         <Scrollbars autoHeight={true} autoHeightMax={335}>
@@ -45,25 +48,28 @@ export function Results<Item extends Record<string, any>>({
                     locale={locale}
                 />
             )}
-            {listToRender.map((item, index) => (
-                <ListItemContainer
-                    key={Object.values(item).join('-')}
-                    ref={refs[index]}
-                    isHighlighted={highlightedIndex === index}
-                    onClick={() => {
-                        onChange(item);
-                    }}
-                    item={item}
-                >
-                    {props => (
-                        <ListItemBodyElement
-                            {...props}
-                            locale={locale}
-                            dropdownAttributes={dropdownAttributes}
-                        />
-                    )}
-                </ListItemContainer>
-            ))}
+            {listToRender.map((item, index) => {
+                return (
+                    <ListItemContainer
+                        isSelected={isEqual(item, selectedItem)}
+                        key={Object.values(item).join('-')}
+                        ref={refs[index]}
+                        isHighlighted={highlightedIndex === index}
+                        onClick={() => {
+                            onChange(item);
+                        }}
+                        item={item}
+                    >
+                        {props => (
+                            <ListItemBodyElement
+                                {...props}
+                                locale={locale}
+                                dropdownAttributes={dropdownAttributes}
+                            />
+                        )}
+                    </ListItemContainer>
+                );
+            })}
         </Scrollbars>
     );
 }
diff --git a/packages/ffe-searchable-dropdown-react/src/SearchableDropdown.spec.tsx b/packages/ffe-searchable-dropdown-react/src/SearchableDropdown.spec.tsx
@@ -331,6 +331,13 @@ describe('SearchableDropdown', () => {
 
         const input = screen.getByRole('combobox');
 
+        // open list and select second item
+        await user.click(input);
+        await user.type(input, '{arrowdown}');
+        await user.type(input, '{arrowdown}');
+        await user.type(input, '{enter}');
+
+        // reopen the list and navigate to second item
         await user.click(input);
         await user.type(input, '{arrowdown}');
         await user.type(input, '{arrowdown}');

diff --git a/packages/ffe-searchable-dropdown-react/src/SearchableDropdown.tsx b/packages/ffe-searchable-dropdown-react/src/SearchableDropdown.tsx
@@ -420,6 +420,7 @@ function SearchableDropdownWithForwardRef<Item extends Record<string, any>>(
                             }}
                             noMatch={state.noMatch ? noMatch : undefined}
                             noMatchMessageId={noMatchMessageId}
+                            selectedItem={state.selectedItem}
                         />
                     )}
                     {postListElement && (