diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx index 3175aabf..ff49b361 100644 --- a/src/components/Search/Search.tsx +++ b/src/components/Search/Search.tsx @@ -15,7 +15,7 @@ limitations under the License. */ import classnames from "classnames"; -import React from "react"; +import React, { ComponentProps, forwardRef } from "react"; import styles from "./Search.module.css"; import { Field, Label } from "../Form"; @@ -36,22 +36,22 @@ type SearchProps = { * The field name. */ name: React.ComponentProps["name"]; - /** - * Event handler called when the search changes. - */ - onChange?: (e: React.ChangeEvent) => void; -}; +} & Omit, "id" | "type">; /** * A standalone search component */ -export const Search = ({ - className, - onChange, - // TODO: i18n needs to be setup - placeholder = "Search…", - name, -}: SearchProps): JSX.Element => { +export const Search = forwardRef(function Search( + { + className, + onChange, + // TODO: i18n needs to be setup + placeholder = "Search…", + name, + ...props + }: SearchProps, + ref, +) { const classes = classnames(styles.search, className); const id = useId(); return ( @@ -59,6 +59,8 @@ export const Search = ({