Setting and resetting facet widgets

Save PDF

Last Updated: May 5, 2026
2 minute read

MarkLogic Server
Documentation

These widgets implement the IFacetReset and IFacetRef interfaces to enable the setting and resetting of facet constraints:

Interfaces to support setting and resetting

export interface IFacetReset<T = unknown> {
  /**
   * Applies a Reset button to the bottom of the component.
   */
  resetConfig?: {
    /**
     * Toggles visibility.
     */
    hide?: boolean;
    /**
     * Overrides the button label.
     * @default Reset
     */
    label?: string;
    /**
     * Overrides the Button's properties.
     */
    ButtonProps?: ButtonProps;
  } & T;
}
export interface IFacetRef<S> {
  /**
   * Flag indicating values have been changed.
   */
  isDirty: boolean;
  /**
   * Triggers the update method, applying the selected facet value.
   * @param facetValue
   * @returns
   */
  set: (facetValue: S) => void;
  /**
   * Triggers the "Clear All" method, removing all currently selected facets.
   * @returns
   */
  clearAll: () => void;
}

This interface enables developers to display and format a reset button for each widget. The interface also allows and executes a clearAll method via a ref property to reset a widget to its default unselected state. Similarly, the set method can be executed for programmatic setting of specific facet values which allows for updating the facet state outside of normal user interactions. The isDirty flag provides developers with a boolean indicator of whether any facet values are currently selected.

This code shows how to programmatically select a specific facet value using the ref's set method. This can be useful for applying facet selections through different user events. See isDirty for information on checking facet selection states.

// App.tsx
const stringFacetRef = useRef(null);

// Select a facet value programmatically
const handleTagClick = (tag) => {
  stringFacetRef.current.set(tag);
};

return (
  <>
    <StringFacet
      {...props}
      ref={stringFacetRef}
    />
    
    {/* Example button that selects a specific facet in association */}
    <Button 
      label="City" 
      onClick={handleTagClick}
    />
    
    {/* Check if any facets are selected */}
    {stringFacetRef.current?.isDirty && (
      <div>Filters applied</div>
    )}
  </>
);

This example shows how to configure a widget’s Reset button with the resetConfig prop. You can also define a ref prop to reset a facet widget programmatically.

// App.tsx
const stringFacetRef = useRef(null);

const handleOnResetClick = () => {
  stringFacetRef.current.clearAll();
};

<StringFacet
  {...props}
  resetConfig={{
    hide: false
  }}
  ref={stringFacetRef}
/>

The StringFacet and BucketRangeFacet widgets also implement the IFacetSingleRef interface for clearing a specific facet selection programmatically:

export interface IFacetSingleRef {
  /**
   * Removes the facet selection that matches the facet key.
   * @param facetKey
   * @returns
   */
  clear: (facetKey: string) => void;
}

Example usage:

// App.tsx
const stringFacetRef = useRef(null);

const handleResetValue = (val: string) => {
  stringFacetRef.current.clear(val);
};

<StringFacet
  {...props}
  resetConfig={{
    hide: false
  }}
  ref={stringFacetRef}
/>

Develop with FastTrack