-
Notifications
You must be signed in to change notification settings - Fork 41
Description
Description
Currently, the Advanced Search modal in NextAdmin does not support custom formatting for input fields. While the library provides excellent support for custom inputs and formatters in edit forms via edit.fields[field].input and edit.fields[field].handler.get, these customizations do not apply to the Advanced Search inputs.
This creates an inconsistent user experience, particularly for numeric fields where comma-separated formatting significantly improves readability.
Use Case
In our application, we have a model with several currency fields
Current Behavior:
- In the list view: Values display as
$100,000(usingformatter) - In edit forms: Values display as
100000(usinghandler.get) - In Advanced Search: Users must type
100000with no visual formatting
Expected Behavior:
Users should be able to type 100,000 with commas in the Advanced Search inputs, providing a consistent and user-friendly experience across the entire admin interface.
Proposed Solution
Add support for input formatting in Advanced Search through one of these approaches:
Option 1: Extend existing edit.fields configuration
edit: {
fields: {
priceField: {
format: "currency", // or custom formatter
advancedSearch: {
formatter: (value) => formatWithCommas(value),
parser: (input) => removeCommas(input)
}
}
}
}Option 2: Allow custom input components for Advanced Search
edit: {
fields: {
priceField: {
input: <CustomNumberInput />, // Already supported for edit forms
advancedSearchInput: <CustomNumberInput /> // New prop for advanced search
}
}
}Option 3: Global input customization
const options: NextAdminOptions = {
customInputs: {
number: {
advancedSearch: <CustomNumberInput />
}
}
}Additional Context
This feature would benefit any application dealing with:
- Currency/financial data
- Large numbers (population, revenue, etc.)
- Phone numbers
- Custom date formats
- Any field requiring input masking or formatting
- Related to [BUG] - formatter not working with boolean column #654 where formatters don't work consistently across all contexts.
References
Documentation: https://next-admin.premieroctet.com/
Current Advanced Search implementation: dist/components/advancedSearch/AdvancedSearchInput.js