♻️ (select) removing 2x usages of the Select component (#1259)

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

@@ -88,7 +88,10 @@ export class AccountPage {
   async clickCloseAccount() {
     await this.menuButton.click();
     await this.page.getByRole('button', { name: 'Close Account' }).click();
-    return new CloseAccountModal(this.page.locator('css=[aria-modal]'));
+    return new CloseAccountModal(
+      this.page.locator('css=[aria-modal]'),
+      this.page,
+    );
   }
 
   async _fillTransactionFields(transactionRow, transaction) {

packages/desktop-client/e2e/page-models/close-account-modal.js

@@ -1,10 +1,12 @@
 export class CloseAccountModal {
-  constructor(page) {
+  constructor(page, rootPage) {
     this.page = page;
+    this.rootPage = rootPage;
   }
 
   async selectTransferAccount(accountName) {
-    await this.page.getByRole('combobox').selectOption({ label: accountName });
+    await this.page.getByPlaceholder('Select account...').fill(accountName);
+    await this.rootPage.keyboard.press('Enter');
   }
 
   async closeAccount() {

packages/desktop-client/src/components/modals/CloseAccount.js

@@ -3,16 +3,14 @@ import React, { useState } from 'react';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
 import { colors } from '../../style';
-import {
-  View,
-  Text,
-  Modal,
-  Button,
-  P,
-  Select,
-  FormError,
-  LinkButton,
-} from '../common';
+import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
+import CategoryAutocomplete from '../autocomplete/CategorySelect';
+import { P, LinkButton } from '../common';
+import Button from '../common/Button';
+import FormError from '../common/FormError';
+import Modal from '../common/Modal';
+import Text from '../common/Text';
+import View from '../common/View';
 
 function needsCategory(account, currentTransfer, accounts) {
   const acct = accounts.find(a => a.id === currentTransfer);
@@ -23,23 +21,6 @@ function needsCategory(account, currentTransfer, accounts) {
   return account.offbudget === 0 && isOffBudget;
 }
 
-function CategorySelect({ categoryGroups, ...nativeProps }) {
-  return (
-    <Select {...nativeProps}>
-      <option value="">Select category...</option>
-      {categoryGroups.map(group => (
-        <optgroup key={group.id} label={group.name}>
-          {group.categories.map(category => (
-            <option key={category.id} value={category.id}>
-              {category.name}
-            </option>
-          ))}
-        </optgroup>
-      ))}
-    </Select>
-  );
-}
-
 function CloseAccount({
   account,
   accounts,
@@ -56,10 +37,6 @@ function CloseAccount({
   let [transferError, setTransferError] = useState(false);
   let [categoryError, setCategoryError] = useState(false);
 
-  let filtered = accounts.filter(a => a.id !== account.id);
-  let onbudget = filtered.filter(a => a.offbudget === 0);
-  let offbudget = filtered.filter(a => a.offbudget === 1);
-
   return (
     <Modal
       title="Close Account"
@@ -113,33 +90,23 @@ function CloseAccount({
                   to:
                 </P>
 
-                <Select
-                  value={transfer}
-                  onChange={event => {
-                    setTransfer(event.target.value);
-                    if (transferError && event.target.value) {
-                      setTransferError(false);
-                    }
-                  }}
-                  style={{ width: 200, marginBottom: 15 }}
-                >
-                  <option value="">Select account...</option>
-                  <optgroup label="For Budget">
-                    {onbudget.map(acct => (
-                      <option key={acct.id} value={acct.id}>
-                        {acct.name}
-                      </option>
-                    ))}
-                  </optgroup>
+                <View style={{ marginBottom: 15 }}>
+                  <AccountAutocomplete
+                    includeClosedAccounts={false}
+                    value={transfer}
+                    accounts={accounts}
+                    inputProps={{
+                      placeholder: 'Select account...',
+                    }}
+                    onSelect={acc => {
+                      setTransfer(acc);
+                      if (transferError && acc) {
+                        setTransferError(false);
+                      }
+                    }}
+                  />
+                </View>
 
-                  <optgroup label="Off Budget">
-                    {offbudget.map(acct => (
-                      <option key={acct.id} value={acct.id}>
-                        {acct.name}
-                      </option>
-                    ))}
-                  </optgroup>
-                </Select>
                 {transferError && (
                   <FormError style={{ marginBottom: 15 }}>
                     Transfer is required
@@ -154,17 +121,20 @@ function CloseAccount({
                       categorized. Select a category:
                     </P>
 
-                    <CategorySelect
+                    <CategoryAutocomplete
                       categoryGroups={categoryGroups}
                       value={category}
-                      onChange={event => {
-                        setCategory(event.target.value);
-                        if (categoryError && event.target.value) {
+                      inputProps={{
+                        placeholder: 'Select category...',
+                      }}
+                      onSelect={newValue => {
+                        setCategory(newValue);
+                        if (categoryError && newValue) {
                           setCategoryError(false);
                         }
                       }}
-                      style={{ width: 200 }}
                     />
+
                     {categoryError && (
                       <FormError>Category is required</FormError>
                     )}

packages/desktop-client/src/components/reports/Header.js

@@ -2,7 +2,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 
 import ArrowLeft from '../../icons/v1/ArrowLeft';
 import { styles } from '../../style';
-import { View, Select, Button, ButtonLink } from '../common';
+import { View, Button, ButtonLink, CustomSelect } from '../common';
 import { FilterButton, AppliedFilters } from '../filters/FiltersMenu';
 
 function validateStart(allMonths, start, end) {
@@ -83,35 +83,31 @@ function Header({
           gap: 15,
         }}
       >
-        <div>
-          <Select
-            style={{ flex: 0, backgroundColor: 'white' }}
-            onChange={e =>
-              onChangeDates(...validateStart(allMonths, e.target.value, end))
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 5,
+          }}
+        >
+          <CustomSelect
+            style={{ backgroundColor: 'white', width: 130 }}
+            onChange={newValue =>
+              onChangeDates(...validateStart(allMonths, newValue, end))
             }
             value={start}
-          >
-            {allMonths.map(month => (
-              <option key={month.name} value={month.name}>
-                {month.pretty}
-              </option>
-            ))}
-          </Select>{' '}
-          to{' '}
-          <Select
-            style={{ flex: 0, backgroundColor: 'white' }}
-            onChange={e =>
-              onChangeDates(...validateEnd(allMonths, start, e.target.value))
+            options={allMonths.map(({ name, pretty }) => [name, pretty])}
+          />
+          <View>to</View>
+          <CustomSelect
+            style={{ backgroundColor: 'white', width: 130 }}
+            onChange={newValue =>
+              onChangeDates(...validateEnd(allMonths, start, newValue))
             }
             value={end}
-          >
-            {allMonths.map(month => (
-              <option key={month.name} value={month.name}>
-                {month.pretty}
-              </option>
-            ))}
-          </Select>
-        </div>
+            options={allMonths.map(({ name, pretty }) => [name, pretty])}
+          />
+        </View>
 
         <FilterButton onApply={onApply} />
 

upcoming-release-notes/1259.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Refactoring some usages of legacy `Select` component to autocompletes or `CustomSelect`