Add arrow up/down+enter navigation to select relation (#275)

* Add arrow up/down+enter navigation to select relation

front/src/pages/people/__stories__/People.inputs.stories.tsx

@@ -151,3 +151,58 @@ export const EditRelation: Story = {
     ],
   },
 };
+
+export const SelectRelationWithKeys: Story = {
+  render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const thirdRowCompanyCell = await canvas.findByText(
+      mockedPeopleData[2].company.name,
+    );
+
+    await userEvent.click(thirdRowCompanyCell);
+
+    const relationInput = await canvas.findByPlaceholderText('Company');
+
+    await userEvent.type(relationInput, 'Air', {
+      delay: 200,
+    });
+
+    await userEvent.type(relationInput, '{arrowdown}');
+    await userEvent.type(relationInput, '{arrowdown}');
+    await userEvent.type(relationInput, '{arrowup}');
+    await userEvent.type(relationInput, '{arrowdown}');
+    await userEvent.type(relationInput, '{enter}');
+
+    const newThirdRowCompanyCell = await canvas.findByText('Aircall');
+    await userEvent.click(newThirdRowCompanyCell);
+  },
+  parameters: {
+    actions: {},
+    msw: [
+      ...graphqlMocks.filter((graphqlMock) => {
+        return graphqlMock.info.operationName !== 'UpdatePeople';
+      }),
+      ...[
+        graphql.mutation('UpdatePeople', (req, res, ctx) => {
+          return res(
+            ctx.data({
+              updateOnePerson: {
+                ...fetchOneFromData(mockedPeopleData, req.variables.id),
+                ...{
+                  company: {
+                    id: req.variables.companyId,
+                    name: 'Aircall',
+                    domainName: 'aircall.io',
+                    __typename: 'Company',
+                  } satisfies GraphqlQueryCompany,
+                },
+              },
+            }),
+          );
+        }),
+      ],
+    ],
+  },
+};