Aman-Mittal opened a new issue, #626: URL: https://github.com/apache/fineract-backoffice-ui/issues/626
### What can't you do today Almost every dropdown in the back-office UI is a plain `ion-select`, and none of them can be searched or filtered. To pick a value you have to scroll the whole list and read it. That is fine for a five-option enum, but a lot of these lists are long and data-driven, so the control becomes the slowest part of the form. Concrete example — **Products → Collateral Management → Create**, route `/products/collateral-management/create`: 1. Fill in Name, Quality, Unit Type, Base Price, Percentage to Base. 2. Open the **Currency** dropdown. 3. You get the full currency list starting at "Afghanistan Afghani (AFN)", alphabetically, with no input box. Selecting INR or USD means scrolling past a hundred-plus entries. The same shape of problem shows up wherever the options come from the API rather than from an enum: - **Currency** selects — 14 components build one. - **Office** selects — present in ~23 components; a tenant with a real branch network has hundreds. - **Client** selects — ~17 components. - **Staff / loan officer** selects — ~11 components. - **Charge** selects — ~10 components. - **GL account** selects — [`gl-account-select.component.ts`](../blob/develop/src/app/features/products/accounting/gl-account-select.component.ts), reused for every accounting-mapping slot; a full chart of accounts is easily in the hundreds, and the option text is `code — name`, which is exactly the kind of string people want to type into rather than hunt for. The scale of it: `grep -r "<ion-select" src/app --exclude-dir=api` returns **563 tags across 111 files**. Only 323 of those are backed by a static `<ion-select-option>`; the rest iterate over API data of unknown length. Every explicit `interface=` in the codebase is `"popover"` (238 of them) and the remainder fall through to Ionic's default `"alert"` — neither interface offers a filter field, and neither gives reliable type-to-jump behaviour the way a native `<select>` does. The forms with the heaviest concentration are the ones where this hurts most: | Component | `ion-select` count | | --- | --- | | `products/loan-product-form.component.ts` | 57 | | `transfers/standing-instruction-form.component.ts` | 35 | | `loans/loan-form.component.ts` | 20 | | `transfers/account-transfer-form.component.ts` | 18 | | `organization/loan-portfolio-summary/...` | 18 | | `working-capital/loan-products/wc-loan-product-form.component.ts` | 16 | ### What you would like instead A shared searchable-select primitive under `src/app/ui/`, alongside the existing `button`, `icon`, `tabs` primitives, used in place of bare `ion-select` wherever the option list is data-driven or long. Suggested shape: - Ionic's documented typeahead pattern — `ion-select` with `interface="modal"` (or an `ion-modal` trigger) containing an `ion-searchbar` over an `ion-list`. No new dependency needed. - Case-insensitive substring match across the full option label, so "INR", "Indian" and "Rupee" all find the same currency, and a GL account is reachable by either its code or its name. - Keep the current API surface — `[ngModel]`, `name`, `required`, `disabled`, `placeholder`, `data-testid`, and the `aria-label` handling that `gl-account-select` already documents — so the swap is mechanical at each call site. - Apply it selectively. A three-option enum does not need a modal and a search box; the threshold should be roughly "more than ~10 options, or the list comes from an endpoint". Static enum selects can stay as they are. - Accessibility: the search input needs a label, the filtered list needs `aria-live` feedback on result count, and keyboard-only selection must work end to end. Worth a check against `check:a11y-names`. Given the 111 files involved, this should land as the primitive plus a first batch of high-value call sites (currency, office, client, staff, GL account), then migrate the rest incrementally rather than in one sweep. ### Fineract endpoint None — this is purely client-side. The option data already arrives from the existing template endpoints. ### Workaround you are using now Scrolling. On the Currency dropdown that means paging through the full ISO currency list every time. ### Screen or route `/products/collateral-management/create` reproduces it in the fewest steps, but it is visible on essentially every create/edit form. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
