Skip to main content

FilterField

FilterField is an advanced, text-based filtering component. It supports complex data filtering with intuitive filter field syntax and auto-suggestions.

OverviewPropertiesUsageChangelog3.14.0

Changes to FilterField. The full components changelog also lists package-wide and cross-cutting entries.

3.14.0​

Updates​

  • Fixed the "not supported" hint message for not-starts-with, not-ends-with, not-contains, and not-matches-wildcard wildcard operators — they previously showed the hint for their positive counterpart (e.g. "Starts-with is not supported") instead of the correct negated operator name. (APPDEV-19904)
  • Fixed app state API requests being made when filterNamespace is not set. (APPDEV-19810)
  • addFilter and removeFilter now accept an optional valueType on the filter statement to control how the value is typed rather than inferring it from the value. removeFilter also supports key-only statements — omit value and comparisonOperator to target every statement for a key regardless of operator or value — and a parserConfig option for symmetric parsing with addFilter. (APPDEV-19753)
  • Fixed the error that occurred when stale editor ranges were applied after the controlled filter value changed. (APPDEV-19425)
  • Fixed onValidityChange being called while controlState is set. (APPDEV-19357)

3.13.1​

Updates​

  • Fixed app state API requests being made when filterNamespace is not set. (APPDEV-19810)

3.13.0​

Updates​

  • Complete filter statements now use the base background with a neutral border and incomplete statements use a subdued border when the visual refresh is enabled. (APPDEV-19754)
  • Switching from a comparison operator to a wildcard operator (= value*, = *value, = *value*) now automatically wraps the existing value with the appropriate wildcards. (APPDEV-18941)
  • Wildcard characters (*) inside filter values are now highlighted in the FilterField editor to make it clear which asterisks are interpreted as wildcards. (APPDEV-18748)
  • You can now enable wildcard-in-middle matching via the matchesWildcardConversion flag, which accepts * in any position of a value (e.g. eu-*-prod) and produces the new matches-wildcard and not-matches-wildcard operator nodes. (APPDEV-18747)
  • Fixed recent and pinned filter suggestions not being restored in apps that do not mount an AppStateProvider. (APPDEV-19694)
  • Reduced verbosity of suggestions overlay announcements for screen reader users. (APPDEV-19200)

3.12.3​

Updates​

  • Fixed app state API requests being made when filterNamespace is not set. (APPDEV-19810)

3.12.2​

Updates​

  • Fixed recent and pinned filter suggestions not being restored in apps that do not mount an AppStateProvider. (APPDEV-19694)

3.11.4​

Updates​

  • Fixed recent and pinned filter suggestions not being restored in apps that do not mount an AppStateProvider. (APPDEV-19694)

3.11.3​

Updates​

  • The link to the documentation in the suggestions footer is now reachable and selectable via arrow key navigation. Screen readers now also announce that pressing Enter applies the filter when no suggestion is focused. (APPDEV-19131, APPDEV-19125)
  • Selecting a comparison operator suggestion via keyboard no longer duplicates the operator when the user has already typed the same operator character. (APPDEV-19229)
  • Fixed the filter field value not being announced by screen readers when it changes dynamically. (APPDEV-19164)

3.11.0​

Updates​

General​

  • Overlays such as Tooltip, Menu item tooltips, Select and FilterField suggestion lists, FeatureHighlight, and chart tooltips no longer flash briefly in the top-left corner of the screen before moving to their final position. (APPDEV-19359)

Editors​

  • Aligned the inline-diagnostics hover tooltip styling with the FilterField diagnostic tooltip. Each severity now shows a leading icon (error, warning, info). (APPDEV-18787)
  • You can now use onFocus and onBlur props on FilterField; both fire at the whole-component boundary so moving focus between the editor, clear/pin buttons, and suggestions does not produce spurious blur or focus events. (APPDEV-17913)
  • Added utilities to convert the syntax tree into DQL. convertFilterFieldTreeToDql returns a ready-to-use | filter … | search … statement, and enrichFilterFieldTreeWithDql returns the tree with a filterDql fragment on every node, plus a searchDql term on every group. Both accept a keyMap for renaming keys and an overrides callback for full, per-statement control. The escapeDqlIdentifier / escapeDqlStringLiteral helpers are exposed for use inside overrides. (APPDEV-18385)
  • Empty values are not saved as recent filters. (APPDEV-19354)
  • Fixed the duplicate * that was appended outside the closing quote when selecting a "starts with" suggestion for a quoted value that already ends with *. (APPDEV-19227)
  • Fixed the grammar from treating ,, :, [, and `
  • Fixed the cursor jumping to a wrong position while typing in a controlled FilterField. (APPDEV-19263)
  • Fixed the random spacing between suggestions that appeared when many suggestions were listed. (APPDEV-19236)

3.10.6​

Updates​

  • Fixed recent and pinned filter suggestions not being restored in apps that do not mount an AppStateProvider. (APPDEV-19694)

3.10.5​

Updates​

General​

  • Overlays such as Tooltip, Menu item tooltips, Select and FilterField suggestion lists, FeatureHighlight, and chart tooltips no longer flash briefly in the top-left corner of the screen before moving to their final position. (APPDEV-19359)

3.10.0​

Updates​

  • Removing required from a FilterField correctly clears an existing error. (APPDEV-18473)
  • Fixed a crash where Cannot read properties of undefined (reading 'to') was thrown during handleOnChange when the transaction selection's ranges array element was undefined. (APPDEV-18712)
  • Fallback key and statement suggestions now include the operator's description in the suggestion details. (APPDEV-18595)

3.9.2​

Updates​

  • Fixed recent and pinned filter suggestions not being restored in apps that do not mount an AppStateProvider. (APPDEV-19694)

3.9.0​

Updates​

  • Fixed programmatic validation so validate() reveals the validation result consistently, including while the field has focus. (APPDEV-18261)
  • Recent and pinned filter suggestions now use full syntax highlighting. (APPDEV-18229)

3.8.3​

Updates​

  • Fixed recent and pinned filter suggestions not being restored in apps that do not mount an AppStateProvider. (APPDEV-19694)

3.8.1​

Updates​

  • Fixed build warnings due to extra commas in css file (APPDEV-18608)

3.8.0​

Updates​

Filters​

  • You can now use the onValidityChange prop on FilterField, SegmentSelector, and TimeframeSelector to react to validation state changes. (APPDEV-17939)
  • Aligned the boxShadows to match other inputs when the visual refresh introduced with Strato 3.5.0 is enabled. (APPDEV-17773)
  • Fixed a syntax error message from appearing while the user is actively typing after refocusing a previously-blurred field. (APPDEV-18122)

3.7.0​

Updates​

  • Fixed an issue where clicking the clear button triggered premature validation and caused a brief error state. (APPDEV-15429)
  • Fixed a crash ("Ranges must be added sorted by from position") that occurred when CodeMirror produced multiple visible ranges. (APPDEV-17983)
  • Add removeFilter value operation helper for programmatically removing filter values from a FilterField value string. (APPDEV-17700)
  • Added the addFilter value operation helper to programmatically add filter values to a FilterField value string. (APPDEV-17699)

3.6.0​

Updates​

  • Suggestions now match and highlight eligible details text while keeping operator and generated supported-values details display-only. (APPDEV-17870)
  • Pressing Enter on the clear or pin button triggers the respective button. (APPDEV-17705)
  • Fixed suggestion application when a custom suggestion provides its replacement range in reverse order. (PAPA-33294)

3.5.1​

Updates​

  • Fixed focus styles when visual refresh is enabled.

3.5.0​

Updates​

  • Fixed validatorMap key suggestion details not being shown for keys with literal value predicates. (APPDEV-17670)
  • Virtual focus styles now use consistent design token-based colors and animations. (APPDEV-17185)

3.4.0​

Updates​

General​

  • Behavior tracking attributes are now supported in all button components, including Button, IntentButton, NotifyButton, and RunQueryButton. (APPDEV-16876)
  • The text and icon color tokens for the success on accent button are now correct. (APPDEV-17388)
  • Behavior tracking attributes are now supported in all form components, including Calendar, Checkbox, DateTimePicker, DateTimeRangePicker, FieldSet, FormField, Label, NumberInput, NumberInputV2, PasswordInput, Radio, SearchInput, Select, Switch, TextArea, TextInput, and ToggleButtonGroup. (APPDEV-16882)
  • Behavior tracking attributes are now supported in FilterBar, FilterField, SegmentSelector, and TimeframeSelector. FilterField.Suggestions and TimeframeSelector.Presets now also support behavior tracking attributes. (APPDEV-16881)
  • Added feature flag and css overrides for design tokens for visual refresh. (APPDEV-17223)
  • No longer crashes when saving pinned or recent filter fails due to missing permissions (403/401). Pinning is silently disabled in those cases. (APPDEV-17372)
  • Improved the visual style of pasted content. (APPDEV-16263)
  • suggestStatementOnValueMatch now matches values case-insensitively. (APPDEV-17294)
  • Typing a key followed by a space inside a bracket group ((foo ), for example) now shows the correct suggestions. (APPDEV-17232)
  • Fixed the highlight range from potentially being out of bounds. (APPDEV-17263)
  • Pasting multi-line text no longer inserts literal newlines — line breaks are collapsed into spaces so the pasted content stays on a single line. (APPDEV-11712)

3.3.3​

Updates​

  • Now catches pending promise rejections on the FilterField saveRecentFilters imperative handle. (APPDEV-17372)

3.3.2​

Updates​

  • FilterField no longer crashes when saving pinned or recent filters fails due to missing permissions (403/401). Pinning is now disabled gracefully in those cases. (APPDEV-17372)

3.3.0​

Deprecations​

  • The object notation of the validatorMap component's keyPredicates is now deprecated. Use the array notation instead. (APPDEV-15798)

Instead of accepting an object, the keyPredicates now have to be provided as an array. See the example below:

const validatorMap = {
- keyPredicates: {
-   myKey1: {
-     valuePredicate: ...
-   },
-   myKey2: {
-     valuePredicate: ...
-   },
- },
+ keyPredicates: [
+   {
+     key: 'myKey1',
+     valuePredicate: ...
+   },
+   {
+     key: 'myKey2',
+     valuePredicate: ...
+   },
+
  • The FilterFieldValidatorMapTypePredicate is now deprecated. Adding the type to the valuePredicate will no longer be supported to restrict a key's value to a specific type or set of types. Use the valueType on FilterFieldKeySuggestionConfig instead, providing a FilterFieldPrimitive type (or custom type) or array of types.
const validatorMap = {
  keyPredicates: [
    {
      key: 'myKey1',
-     valuePredicate: {
-       type: ['String', 'Number']
-     },
+     valueType: ['String', 'Number']
    },
    {
      key: 'myKey2',
      valuePredicate: [
        'warning',
        'error',
-       { type: 'String' }
      ],
+     valueType: 'String',
    },
  ],
};
  • The FilterFieldDuration type is now deprecated. Instead of providing durations as { value: ..., unit: ...} objects in the validatorMap, use simple strings instead.
const validatorMap = {
  keyPredicates: [
    {
      key: 'myKey1',
      valuePredicate: [
-       { value: 10, unit: 'ms' },
-       { value: 1, unit: 's' },
+       '10ms',
+       '1s',
      ],
    },
  ],
};

Updates​

  • The contains-middle and ends-with matches are now grouped together when sorting suggestions by match relevance while typing (exact → starts-with → contains-middle/ends-with). (APPDEV-16055)
  • Custom validation functions are now called for each element in a value list. (APPDEV-17106)
  • Added data-dt-name and data-dt-properties attributes to the suggestions, 'Clear' button, 'Delete filter statement' buttons, 'Show more' and 'Show less' buttons, and the filter syntax link. (APPDEV-16903)
  • Invalid value error messages now include the supported value types for the key. For custom types defined via customTypes, a label can be provided. Per default, the type name is used. (APPDEV-16719)
  • Suggestions can now be grouped using the validatorMap. The object notation of the keyPredicates doesn't support groups. Switch to the array notation to add groups. (APPDEV-15798)
  • The valuePredicate function is now called correctly for values of type Variable.
  • Typing a relative timeframe character (n, +, -, @) while focused on an absolute date input now automatically switches to relative timeframe mode. (APPDEV-16134)

3.2.2​

Updates​

  • Now catches pending promise rejections on the FilterField saveRecentFilters imperative handle. (APPDEV-17372)

3.2.0​

Updates​

  • Fixed onFilter being incorrectly called when the clear button is clicked (APPDEV-16623)
  • Silently handle missing pinned or recent filter state instead of logging an error warning. (APPDEV-16875)
  • Suggestions are now automatically sorted by match relevance (exact → starts-with → contains-middle → ends-with). Key and value suggestions are sorted alphabetically or in ascending order within each group. Key and value suggestion sorting can be disabled by setting sortSuggestions: false on the validatorMap, keeping the original order of the suggestions while still sorting by relevance once the user starts typing. (APPDEV-15956)

3.1.5​

Updates​

  • Now catches pending promise rejections on the FilterField saveRecentFilters imperative handle. (APPDEV-17372)

3.1.1​

Updates​

  • Reduce number of requests for recent and pinned filters. (APPDEV-16748)

3.1.0​

Updates​

Overlays​

  • Possibly overlapping overlays are now closed when focusing the FilterField. (APPDEV-16114)
  • The validatorMap now supports displayValue and details on keys and values, enabling richer suggestions with labels and descriptions. (APPDEV-16298)
  • All filter field suggestions are now flattened in the DOM to support virtualization for individual items of suggestion groups. A11y is still ensured using aria attributes to link items to groups. (APPDEV-10064)
  • Custom validation types can now be defined via the customTypes prop, allowing type-specific value constraints to be used in the validatorMap. (APPDEV-16028)
  • No longer incorrectly marks values inside an in() operator as invalid when the key is configured with a special type (e.g. IPAddress, UID, Timestamp, SmartscapeId) in the validatorMap. (APPDEV-16555)

3.0.3​

Updates​

  • Now catches pending promise rejections on the FilterField saveRecentFilters imperative handle. (APPDEV-17372)
Still have questions?
Find answers in the Dynatrace Community