Options
All
  • Public
  • Public/Protected
  • All
Menu

Hierarchy

Index

Properties

anchor?: PositionAnchor

The configuration to anchor the fixed element to the container element.

defaultvalue

BELOW_CENTER_ANCHOR

clearOnAutoComplete: boolean

Boolean if the text field's value should be cleared when the value is autocompleted. This is useful when also adding custom onAutoComplete behavior.

closeOnResize?: boolean

Boolean if the select's listbox should not hide if the user resizes the browser while it is visible.

closeOnScroll?: boolean

Boolean if the select's listbox should not hide if the user scrolls the page while it is visible.

data: readonly AutoCompleteData[]

The list of data that should be autocompleted based on the provided filter.

defaultValue?: string
disableShowOnFocus?: boolean

Boolean if the list of suggestions should no longer appear immediately once the text field is focused and there is at least one item in the data list. If this is set to false, the menu will only be shown when:

  • a letter is added or removed from the text field
  • the user clicks it again
  • using the alt+arrow-down keyboard shortcut

If this prop is omitted, the show on focus behavior will be disabled on touch devices since touch device's soft keyboards do a lot of funky things with the viewport and scroll behavior. This makes it so the native viewport and scroll behavior actions are normally finished before the suggestions appear.

disableSwapping?: boolean

Boolean if the auto-swapping behavior should be disabled. It's normally recommended to not disable this since it'll allow elements to appear off screen.

defaultvalue

false

remarks

@since 5.0.0 This will always be true if the FixedPositionOptions.container is null. @remarks @since 5.1.6 Allow this to be false while the container is null. I can't figure out why I prevented that.

disableVHBounds?: boolean

Boolean if the fixed positioning should no longer prevent the fixed element to be positioned within the viewport. This is nice if you want to allow for full page scrolling instead and manually set a max-height on your element.

defaultvalue

false

see

AutoCompleteFilterFunction

filterOnNoValue: boolean

Boolean if the filter function should still be called when there is no value in the text field. This normally defaults to false so that the data is just returned, but it can be useful with a custom filter function that returns different data while there is no value.

filterOptions: CaseInsensitiveOptions<AutoCompleteData>

An optional object of options to provide to the filter function. This will be defaulted to work with the fuzzy filter and case-insensitive filter functions to trim whitespace before doing the comparisons.

forwardedRef?: Ref<HTMLInputElement>
initialX?: number

The initial x value to use when calculating the position instead of finding the container element to determine the the correct position. All the other positioning logic will still be in effect to ensure the element will be visible within the viewport.

initialY?: number

The initial y value to use when calculating the position instead of finding the container element to determine the the correct position. All the other positioning logic will still be in effect to ensure the element will be visible within the viewport.

isInlineAutocomplete: boolean
isListAutocomplete: boolean
listboxStyle?: CSSProperties

An optional style to also apply to the listbox element showing all the matches.

listboxWidth?: PositionWidth

The sizing behavior for the listbox. It will default to have the same width as the select button, but it is also possible to either have the min-width be the width of the select button or just automatically determine the width.

The sizing behavior will always ensure that the left and right bounds of the listbox appear within the viewport.

onAutoComplete?: AutoCompleteHandler
see

AutoCompleteHandler

onBlur?: FocusEventHandler<HTMLInputElement>
onChange?: FormEventHandler<HTMLInputElement>
onClick?: MouseEventHandler<HTMLInputElement>
onFocus?: FocusEventHandler<HTMLInputElement>
onKeyDown?: KeyboardEventHandler<HTMLInputElement>
preventOverlap?: boolean

Boolean if the fixed element should no longer be able to overlap the container element. This is useful for autocomplete menus or other components that retain focus on the container element while the fixed element becomes visible.

defaultvalue

false

propValue?: string
suggestionsId: string
transformOrigin?: boolean

Boolean if the style object should include the transformOrigin value based on the x and y positions.

defaultvalue

false

valueKey: string

The key to use to extract a searchable value string from a result when the provided data list is a list of objects.

vhMargin?: number

The viewwidth margin to apply so that the element doesn't need to be directly on the screen edge.

defaultvalue

16

vwMargin?: number

The viewwidth margin to apply so that the element doesn't need to be directly on the screen edge.

defaultvalue

16

xMargin?: number

The container width margin to apply so that the element doesn't need to be directly on the container's edge.

defaultvalue

0

yMargin?: number

The container height margin to apply so that the element doesn't need to be directly on the container's edge

defaultvalue

0

Methods

  • getResultId(id: string, index: number): string
  • A function to call that will generate an id for each result in the autocomplete's listbox. These ids are required for a11y as it'll be used with the aria-activedescendant movement within the autocomplete.

    Parameters

    • id: string
    • index: number

    Returns string

  • A function to call that will extract a searchable value string from each result. This must return a string and will prevent the autocomplete from filtering data with the built in filter functions.

    Parameters

    Returns string

Generated using TypeDoc