(autocomplete) upgrade Downshift dependency (#945)

Upgrading `Downshift` dependency

packages/desktop-client/e2e/page-models/rules-page.js

@@ -85,7 +85,7 @@ export class RulesPage {
       }
 
       if (value) {
-        await row.getByRole('combobox').fill(value);
+        await row.getByRole('textbox').fill(value);
         await this.page.keyboard.press('Enter');
       }
     }

packages/desktop-client/e2e/page-models/schedules-page.js

@@ -71,12 +71,14 @@ export class SchedulesPage {
 
   async _fillScheduleFields(data) {
     if (data.payee) {
-      await this.page.getByLabel('Payee').fill(data.payee);
+      await this.page.getByRole('textbox', { name: 'Payee' }).fill(data.payee);
       await this.page.keyboard.press('Enter');
     }
 
     if (data.account) {
-      await this.page.getByLabel('Account').fill(data.account);
+      await this.page
+        .getByRole('textbox', { name: 'Account' })
+        .fill(data.account);
       await this.page.keyboard.press('Enter');
     }
 

packages/desktop-client/package.json

@@ -24,7 +24,7 @@
     "customize-cra": "^1.0.0",
     "date-fns": "^2.29.3",
     "debounce": "^1.2.0",
-    "downshift": "1.31.16",
+    "downshift": "7.6.0",
     "focus-visible": "^4.1.1",
     "formik": "^0.11.10",
     "glamor": "^2.20.40",
@@ -64,7 +64,7 @@
     "build": "cross-env INLINE_RUNTIME_CHUNK=false react-app-rewired build",
     "build:browser": "cross-env ./bin/build-browser",
     "test": "react-app-rewired test",
-    "e2e": "npx playwright test e2e --browser=chromium",
+    "e2e": "npx playwright test --browser=chromium",
     "lint": "eslint ."
   },
   "jest": {

packages/desktop-client/playwright.config.js

 module.exports = {
   timeout: 20000, // 20 seconds
   retries: 1,
+  testDir: 'e2e/',
   use: {
     screenshot: 'on',
     browserName: 'chromium',

packages/desktop-client/src/components/autocomplete/Autocomplete.js

@@ -108,6 +108,7 @@ function SingleAutocomplete({
   focused,
   embedded = false,
   containerProps,
+  labelProps = {},
   inputProps = {},
   suggestions,
   tooltipStyle,
@@ -260,7 +261,10 @@ function SingleAutocomplete({
           return;
         }
 
-        if ('highlightedIndex' in changes) {
+        if (
+          'highlightedIndex' in changes &&
+          changes.type !== Downshift.stateChangeTypes.changeInput
+        ) {
           setHighlightedIndex(changes.highlightedIndex);
         }
         if ('isOpen' in changes) {
@@ -292,6 +296,7 @@ function SingleAutocomplete({
 
         inst.lastChangeType = changes.type;
       }}
+      labelId={labelProps?.id}
     >
       {({
         getInputProps,
@@ -379,7 +384,7 @@ function SingleAutocomplete({
 
                 // Handle escape ourselves
                 if (e.key === 'Escape') {
-                  e.preventDefault();
+                  e.nativeEvent.preventDownshiftDefault = true;
 
                   if (!embedded) {
                     e.stopPropagation();

packages/desktop-client/src/components/forms.js

@@ -25,10 +25,12 @@ export function SectionLabel({ title, style }) {
   );
 }
 
-export function FormLabel({ style, title, htmlFor }) {
+export function FormLabel({ style, title, id, htmlFor }) {
   return (
     <Text style={[{ fontSize: 13, marginBottom: 3, color: colors.n3 }, style]}>
-      <label htmlFor={htmlFor}>{title}</label>
+      <label htmlFor={htmlFor} id={id}>
+        {title}
+      </label>
     </Text>
   );
 }

packages/desktop-client/src/components/schedules/EditSchedule.js

@@ -451,9 +451,10 @@ export default function ScheduleDetails() {
       </Stack>
       <Stack direction="row" style={{ marginTop: 20 }}>
         <FormField style={{ flex: 1 }}>
-          <FormLabel title="Payee" htmlFor="payee-field" />
+          <FormLabel title="Payee" id="payee-label" htmlFor="payee-field" />
           <PayeeAutocomplete
             value={state.fields.payee}
+            labelProps={{ id: 'payee-label' }}
             inputProps={{ id: 'payee-field', placeholder: '(none)' }}
             onSelect={id =>
               dispatch({ type: 'set-field', field: 'payee', value: id })
@@ -463,10 +464,15 @@ export default function ScheduleDetails() {
         </FormField>
 
         <FormField style={{ flex: 1 }}>
-          <FormLabel title="Account" htmlFor="account-field" />
+          <FormLabel
+            title="Account"
+            id="account-label"
+            htmlFor="account-field"
+          />
           <AccountAutocomplete
             includeClosedAccounts={false}
             value={state.fields.account}
+            labelProps={{ id: 'account-label' }}
             inputProps={{ id: 'account-field', placeholder: '(none)' }}
             onSelect={id =>
               dispatch({ type: 'set-field', field: 'account', value: id })

patches/downshift+1.31.16.patch

-diff --git a/node_modules/downshift/dist/downshift.esm.js b/node_modules/downshift/dist/downshift.esm.js
-index f39a298..da7b6f5 100644
---- a/node_modules/downshift/dist/downshift.esm.js
-+++ b/node_modules/downshift/dist/downshift.esm.js
-@@ -1200,10 +1200,15 @@ var _initialiseProps = function () {
-       // onMouseMove is used over onMouseEnter here. onMouseMove
-       // is only triggered on actual mouse movement while onMouseEnter
-       // can fire on DOM changes, interrupting keyboard navigation
--      onMouseMove: composeEventHandlers(onMouseMove, function () {
-+      onMouseMove: composeEventHandlers(onMouseMove, function (e) {
-         if (index === _this4.getState().highlightedIndex) {
-           return;
-         }
-+
-+        if(e.movementX === 0 && e.movementY === 0) {
-+          return;
-+        }
-+
-         _this4.setHighlightedIndex(index, {
-           type: Downshift.stateChangeTypes.itemMouseEnter
-         });

upcoming-release-notes/945.md

+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Autocomplete: upgrade `Downshift` dependency

yarn.lock

@@ -73,7 +73,7 @@ __metadata:
     customize-cra: ^1.0.0
     date-fns: ^2.29.3
     debounce: ^1.2.0
-    downshift: 1.31.16
+    downshift: 7.6.0
     focus-visible: ^4.1.1
     formik: ^0.11.10
     glamor: ^2.20.40
@@ -1593,7 +1593,7 @@ __metadata:
   languageName: node
   linkType: hard
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
   version: 7.21.0
   resolution: "@babel/runtime@npm:7.21.0"
   dependencies:
@@ -6863,6 +6863,13 @@ __metadata:
   languageName: node
   linkType: hard
+"compute-scroll-into-view@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "compute-scroll-into-view@npm:2.0.4"
+  checksum: f3d1db9276c16af42155b572750514939cd0ab0a0f46498906f6811c5b654c5ff2b3f9bfd65958e57439e000a5e1ae092eb96b9e153d194a73e52ffd2380550c
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -8306,13 +8313,18 @@ __metadata:
   languageName: node
   linkType: hard
-"downshift@npm:1.31.16":
-  version: 1.31.16
-  resolution: "downshift@npm:1.31.16"
+"downshift@npm:7.6.0":
+  version: 7.6.0
+  resolution: "downshift@npm:7.6.0"
+  dependencies:
+    "@babel/runtime": ^7.14.8
+    compute-scroll-into-view: ^2.0.4
+    prop-types: ^15.7.2
+    react-is: ^17.0.2
+    tslib: ^2.3.0
   peerDependencies:
-    prop-types: ">=15"
-    react: ">=0.14.x"
-  checksum: 558fb4658290477c74fb961b435ad8e416089a06f2beb8d570be29e33867de70ec79d4b6b07278773137d4d8f7dfc10b540c74898c53906607a7948b63e5dace
+    react: ">=16.12.0"
+  checksum: f738e0b50bcacedbf14c8de3baceb8e7be88ec4a2ab6becdc58ae253883d47de1085240db189cc485eb5995d0f35ac017836266116a95e0ac8c19b4600d38598
   languageName: node
   linkType: hard
@@ -16897,7 +16909,7 @@ __metadata:
   languageName: node
   linkType: hard
-"react-is@npm:^17.0.1":
+"react-is@npm:^17.0.1, react-is@npm:^17.0.2":
   version: 17.0.2
   resolution: "react-is@npm:17.0.2"
   checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8
@@ -19625,7 +19637,7 @@ __metadata:
   languageName: node
   linkType: hard
-"tslib@npm:^2.0.0, tslib@npm:^2.0.3":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.3.0":
   version: 2.5.0
   resolution: "tslib@npm:2.5.0"
   checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1