✨ (autocomplete) enable new version for dev/preview deploys (#789)

Enabling the new autocomplete for dev/preview deployments.

This will allow us to spot any more issues there might be before we
release the new autocomplete.

https://github.com/actualbudget/actual/issues/773

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

@@ -442,6 +442,7 @@ export default function ScheduleDetails() {
           <FormLabel title="Payee" htmlFor="payee-field" />
           <PayeeAutocomplete
             value={state.fields.payee}
+            inputId="payee-field"
             inputProps={{ id: 'payee-field', placeholder: '(none)' }}
             onSelect={id =>
               dispatch({ type: 'set-field', field: 'payee', value: id })
@@ -455,6 +456,7 @@ export default function ScheduleDetails() {
           <AccountAutocomplete
             includeClosedAccounts={false}
             value={state.fields.account}
+            inputId="account-field"
             inputProps={{ id: 'account-field', placeholder: '(none)' }}
             onSelect={id =>
               dispatch({ type: 'set-field', field: 'account', value: id })

packages/desktop-client/src/hooks/useFeatureFlag.js

@@ -1,7 +1,12 @@
 import { useSelector } from 'react-redux';
 
+import {
+  isDevelopmentEnvironment,
+  isPreviewEnvironment,
+} from 'loot-design/src/util/environment';
+
 const DEFAULT_FEATURE_FLAG_STATE = {
-  newAutocomplete: false,
+  newAutocomplete: isDevelopmentEnvironment() || isPreviewEnvironment(),
   syncAccount: false,
   goalTemplatesEnabled: false,
 };

packages/loot-design/src/components/NewAutocomplete.js

@@ -40,7 +40,7 @@ const Autocomplete = React.forwardRef(
 
       // Create a new option
       if (selected.__isNew__) {
-        onCreateOption(selected);
+        onCreateOption(selected.value);
         return;
       }
 

packages/loot-design/src/components/NewPayeeAutocomplete.js

@@ -93,9 +93,9 @@ export default function PayeeAutocomplete({
       inputValue={inputValue}
       onInputChange={setInputValue}
       onSelect={onSelect}
-      onCreateOption={async selected => {
+      onCreateOption={async selectedValue => {
         const existingOption = allOptions.find(option =>
-          option.label.toLowerCase().includes(selected.label?.toLowerCase()),
+          option.label.toLowerCase().includes(selectedValue?.toLowerCase()),
         );
 
         // Prevent creating duplicates
@@ -105,7 +105,7 @@ export default function PayeeAutocomplete({
         }
 
         // This is actually a new option, so create it
-        onSelect(await dispatch(createPayee(selected.value)));
+        onSelect(await dispatch(createPayee(selectedValue)));
       }}
       isCreatable={useCreatableComponent}
       createOptionPosition="first"

upcoming-release-notes/789.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Enable new autocomplete in dev/preview builds