SearchInput

A wrapper around Input with a few additions:

• A Search icon, added as an addonBefore.
• A clear button, added as an addonAfter, when the input has value. onClear is called when the clear button is clicked.
• A list of search queries shown as a menu, when the search icon is clicked, if searchHistory is provided.
• An action provided on the input element, to open the search history via CommonActionId.SHOW_SEARCH_HISTORY shortcut.
• Search submission callback (onSubmit) called when search is submitted by pressing Enter

onChange and onSubmit props are also different in SearchInput, compared to the corresponding props of the native input.

Caveat: If the width is not set (either explicitly or via the entailing layout), the width of the input will change when clear button shows/hides.

See also:

• Input
• InputField

Remaining

• 🚧 Support for multiline search strings

Live example

Result

Loading...

Live Editor

<> <SearchInput style={{ width: 250 }} onSubmit={alert} onClear={() => console.log("onClear")} addonAfter={ <> <TooltipTrigger tooltip={<ActionTooltip actionName="Match Case" />}> <StyledHoverContainer as={IconButton} excludeFromTabOrder={false}> <AutoHoverPlatformIcon icon="actions/regex" hoverIcon="actions/regexHovered" /> </StyledHoverContainer> </TooltipTrigger> </> } /> </>

<>
  <SearchInput
    style={{ width: 250 }}
    onSubmit={alert}
    onClear={() => console.log("onClear")}
    addonAfter={
      <>
        <TooltipTrigger tooltip={<ActionTooltip actionName="Match Case" />}>
          <StyledHoverContainer as={IconButton} excludeFromTabOrder={false}>
            <AutoHoverPlatformIcon
              icon="actions/regex"
              hoverIcon="actions/regexHovered"
            />
          </StyledHoverContainer>
        </TooltipTrigger>
      </>
    }
  />
</>

With search history

Use searchHistory prop to pass a list of search queries, which will be available as a menu on the search icon.

Result

Loading...

Live Editor

<> <SearchInput style={{ width: 250 }} searchHistory={["Expand", "Deprecated", "break", "overr"]} /> </>

<>
  <SearchInput
    style={{ width: 250 }}
    searchHistory={["Expand", "Deprecated", "break", "overr"]}
  />
</>

SearchInput also provides an action to allow opening search history menu via a CommonActionId.SHOW_SEARCH_HISTORY shortcut, which by default is mapped to Alt+↓.