feat(ffe-account-selector-react): add displayAttribute prop

makes it possible to override what is displayed in the AccountSelector input.
So you can have a new custom attribute in the input, example a new attribute that contains: account_name - account_number

previous default was the first attribute in the searchAttribute prop. The same should be the case with this change.

Needed to add the displayAttribute to the searchAttributes passed to the SearchableDropdown, so the user don't see a message about 0 hits when changing the input.

Author: alexander-svendsen

packages/ffe-account-selector-react/src/account-selector/AccountSelector.mdx

@@ -35,3 +35,7 @@ Dersom du ønsker å skjule kontodetaljer, kan du bruke `hideAccountDetails`.
 Dersom du ønsker å ha ekstra tekst på bunnen av lista, kan du bruke `postListElement`.
 
 <Canvas of={AccountSelectorStories.PostListElement} />
+
+Dersom du ønsker å vise en annen informasjon enn kontonavn i inputen, så kan du velge hvilken attribute som brukes med `displayAttribute`.
+
+<Canvas of={AccountSelectorStories.CustomDisplayAttribute} />

packages/ffe-account-selector-react/src/account-selector/AccountSelector.spec.tsx

@@ -618,4 +618,70 @@ describe('<AccountSelector/>', () => {
         expect(a11yStatusMessage).toHaveTextContent('');
         jest.useRealTimers();
     });
+
+    it('allows passing a custom display attribute', async () => {
+        const handleAccountSelectedMock = jest.fn();
+
+        render(
+            <AccountSelector
+                id="id"
+                labelledById="labelId"
+                accounts={accounts}
+                displayAttribute={'accountNumber'}
+                locale="nb"
+                onAccountSelected={handleAccountSelectedMock}
+                onReset={onReset}
+                selectedAccount={selectedAccount}
+                ariaInvalid={false}
+            />,
+        );
+
+        const input = screen.getByRole('combobox');
+
+        expect(input.getAttribute('value')).toBe('');
+        fireEvent.change(input, { target: { value: 'Gr' } });
+
+        fireEvent.click(screen.getByText('Gris'));
+
+        expect(handleAccountSelectedMock).toHaveBeenCalledTimes(1);
+        expect(handleAccountSelectedMock).toHaveBeenCalledWith(accounts[3]);
+        expect(input.getAttribute('value')).toEqual('1253 47 789102');
+    });
+
+    it('passing displayAttribute should make it searchable', async () => {
+        type FunkyAccounts = Account & { funkySmell: string };
+        const funkyAccounts: FunkyAccounts[] = accounts.map((account, idx) => ({
+            ...account,
+            funkySmell: `Smells like money${idx}`,
+        }));
+
+        render(
+            <AccountSelector<FunkyAccounts>
+                id="id"
+                labelledById="labelId"
+                accounts={funkyAccounts}
+                displayAttribute={'funkySmell'}
+                locale="nb"
+                onAccountSelected={handleAccountSelected}
+                onReset={onReset}
+                selectedAccount={funkyAccounts[0]}
+                ariaInvalid={false}
+            />,
+        );
+
+        const input = screen.getByRole('combobox');
+        fireEvent.click(input);
+
+        expect(screen.queryByText('Ingen samsvarende konto')).toBeNull();
+        fireEvent.change(input, {
+            target: { value: 'Dette skal få ingen match' },
+        });
+        expect(
+            screen.queryByText('Ingen samsvarende konto'),
+        ).toBeInTheDocument();
+
+        fireEvent.change(input, { target: { value: 'money3' } });
+        fireEvent.click(screen.getByText('Gris'));
+        expect(input.getAttribute('value')).toEqual('Smells like money3');
+    });
 });

packages/ffe-account-selector-react/src/account-selector/AccountSelector.stories.tsx

@@ -3,6 +3,7 @@ import { AccountSelector } from './AccountSelector';
 import { InputGroup } from '@sb1/ffe-form-react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { SmallText } from '@sb1/ffe-core-react';
+import { accountFormatter } from '../format';
 
 const meta: Meta<typeof AccountSelector> = {
     title: 'Komponenter/Account-selector/AccountSelector',
@@ -254,3 +255,41 @@ export const InitialValue: Story = {
         );
     },
 };
+
+type PrettyAccount = Account & { prettyName: string };
+
+const prettyAccounts: PrettyAccount[] = accounts.map(account => ({
+    ...account,
+    prettyName: `${account.name} - ${accountFormatter(account.accountNumber)}`,
+}));
+export const CustomDisplayAttribute: StoryObj<
+    typeof AccountSelector<PrettyAccount>
+> = {
+    args: {
+        id: 'input-id',
+        labelledById: 'label-id',
+        locale: 'nb',
+        formatAccountNumber: true,
+        allowCustomAccount: false,
+        displayAttribute: 'prettyName',
+        accounts: prettyAccounts,
+    },
+    render: function Render(args) {
+        const [selectedAccount, setSelectedAccount] = useState<PrettyAccount>(
+            prettyAccounts[2],
+        );
+        return (
+            <InputGroup
+                label="Velg konto"
+                inputId={args.id}
+                labelId={args.labelledById}
+            >
+                <AccountSelector<PrettyAccount>
+                    {...args}
+                    selectedAccount={selectedAccount}
+                    onAccountSelected={setSelectedAccount}
+                />
+            </InputGroup>
+        );
+    },
+};

packages/ffe-account-selector-react/src/account-selector/AccountSelector.tsx

@@ -40,6 +40,8 @@ export interface AccountSelectorProps<T extends Account = Account> {
     formatAccountNumber?: boolean;
     /** id of element that labels input field */
     labelledById?: string;
+    /** Attribute used in the input when an item is selected. **/
+    displayAttribute?: keyof T;
     /**
      * Allows selecting the text the user writes even if it does not match anything in the accounts array.
      * Useful e.g. if you want to pay to account that is not in yur recipients list.
@@ -91,6 +93,7 @@ export const AccountSelector = <T extends Account = Account>({
     ariaInvalid,
     onOpen,
     onClose,
+    displayAttribute,
     ...rest
 }: AccountSelectorProps<T>) => {
     const [inputValue, setInputValue] = useState(selectedAccount?.name || '');
@@ -119,6 +122,7 @@ export const AccountSelector = <T extends Account = Account>({
             onAccountSelected({
                 name: value.name,
                 accountNumber: value.name,
+                ...(displayAttribute ? { [displayAttribute]: value.name } : {}),
             } as T);
             setInputValue(value.name);
         } else {
@@ -137,6 +141,7 @@ export const AccountSelector = <T extends Account = Account>({
             <SearchableDropdown<T>
                 id={id}
                 labelledById={labelledById}
+                displayAttribute={displayAttribute}
                 inputProps={{
                     ...inputProps,
                     onChange: onInputChange,
@@ -165,14 +170,25 @@ export const AccountSelector = <T extends Account = Account>({
                                           ? formatter(inputValue)
                                           : inputValue,
                                       accountNumber: '',
+                                      ...(displayAttribute
+                                          ? {
+                                                [displayAttribute]: formatter
+                                                    ? formatter(inputValue)
+                                                    : inputValue,
+                                            }
+                                          : {}),
                                   } as T,
                               ],
                           }
                         : (noMatches ?? { text: texts[locale].noMatch })
                 }
                 formatter={formatter}
                 onChange={handleAccountSelected}
-                searchAttributes={['name', 'accountNumber']}
+                searchAttributes={[
+                    'name',
+                    'accountNumber',
+                    ...(displayAttribute ? [displayAttribute] : []),
+                ]}
                 locale={locale}
                 optionBody={({ item, isHighlighted, ...restOptionBody }) => {
                     if (OptionBody) {