Skip to content

[FEATURE] - Support custom input formatters in Advanced Search #663

@jensen-vw

Description

@jensen-vw

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 (using formatter)
  • In edit forms: Values display as 100000 (using handler.get)
  • In Advanced Search: Users must type 100000 with 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions