SingleAutocomplete

Type: React component

How to get SingleAutocomplete?

JavaScript

import { SingleAutocomplete } from 'fds/components';

An autocompletable TextInput with an ItemsMenu inside a Drop for rendering the autocomplete suggestions. Allows for toggling a single item. The toggled item (label) is displayed as the value of the TextInput.

Keyboard behavior:

  • ArrowDown: open the Drop

  • Escape: close the Drop

Props

  1. emptyVisual

    (Optional)

    Type: String | ReactElement

    The visual to use when the component has no values. Usually displayed in a StateMessage or CompactStateMessage as appropriate.

    • string: a name of an icon. This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

    • ReactElement: a React Element (instance of a React Component, usually created with JSX)

    Default value

  2. isDisabled

    (Optional)

    Type: Boolean

    Whether or not the component should be rendered in a disabled state.

    Default value

  3. items

    (Required)

    Type: Object

    An item with a label property with a string value to display and a property to hold the actual value.

    Properties

  4. name

    (Optional)

    Type: String

    The name of this component to identify it (and its value) when used inside an intelligent container component which aggregates its children (and/or their values), like a Form.

    Default value

  5. onChange

    (Optional)

    Type: Function

    A callback that is called whenever a component's value changes.

    This callback is called just before the "validate" prop is called.

    Use this callback to update local state which in turn should update the value prop of the component whose callback just fired.

    Arguments

    Default value

  6. onRef

    (Optional)

    Type: Function

    A callback that is called whenever a component's ref changes.

    Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.

    For more information about React and "refs", check the React documentation

    Arguments

    Returns

    Default value

  7. placeholder

    (Optional)

    Type: String

    The placeholder text displayed in component when it is empty, i.e. has no values.

    Default value

  8. renderEmptyMessage

    (Optional)

    Type: Function

    A callback that is called when rendering the empty state for a component, i.e. when it has no values.

    Use this callback to customize the message displayed near the empty visual.

    Arguments

    Returns

    Default value

  9. showClearButton

    (Optional)

    Type: Boolean

    Whether or not a clear button to empty the text input is displayed on the right of it.

    Default value

  10. tooltipContent

    (Optional)

    Type: String | ReactElement

    The content of the tooltip that is displayed when hovering over the whole component.

    • string: the textual content of the tooltip

    • ReactElement: a React Element (instance of a React Component, usually created with JSX)

    Default value

  11. validate

    (Optional)

    Type: Function

    A callback that is called directly after the value(s) of a form component change(s).

    Use this callback to check the selected value(s) against business rules and to set any feedback for the user based on this.

    Arguments

    Returns

    Default value

  12. value

    (Optional)

    Type: Any

    The value of an ItemWithLabelAndValue.

    This value is used to compare items, eg. when determining the selected item(s).

    Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.

    Default value

  13. isBorderless

    (Required)

    Default value

  14. isWidthEqual

    (Required)

    Default value

  15. onPositionerMount

    (Required)

    Default value

  16. onPositionerUnmount

    (Required)

    Default value