< Summary

Information

Class:	tui-search-bar.tsx
Assembly:	app.components
File(s):	/home/runner/work/ClutterStock/ClutterStock/frontend/app/components/tui-search-bar.tsx
Tag:	58_25416222083

Line coverage

Branch coverage

Method coverage

Feature is only available for sponsors

Metrics

#	Line	Line coverage
	`1`	`import { useEffect, useRef } from "react";`
	`2`
0	`3`	`export function TuiSearchBar({ value, onChange, onClose }: {`
	`4`	`value: string;`
	`5`	`onChange: (v: string) => void;`
	`6`	`onClose: (clear: boolean) => void;`
	`7`	`}) {`
0	`8`	`const ref = useRef<HTMLInputElement>(null);`
	`9`
0	`10`	`useEffect(() => {`
0	`11`	`ref.current?.focus();`
0	`12`	`ref.current?.select();`
	`13`	`}, []);`
	`14`
0	`15`	`return (`
	`16`	`<div className="cs-search-bar">`
	`17`	`<span className="cs-search-prompt">/</span>`
	`18`	`<input`
	`19`	`ref={ref}`
	`20`	`type="text"`
	`21`	`value={value}`
0	`22`	`onChange={(e) => onChange(e.target.value)}`
0	`23`	`onKeyDown={(e) => {`
0	`24`	`if (e.key === "Escape") {`
0	`25`	`e.preventDefault();`
0	`26`	`e.stopPropagation();`
0	`27`	`onClose(true);`
0	`28`	`} else if (e.key === "Enter") {`
0	`29`	`e.preventDefault();`
0	`30`	`e.stopPropagation();`
0	`31`	`onClose(false);`
	`32`	`}`
	`33`	`}}`
	`34`	`placeholder="filter items… (Esc to clear, Enter to keep)"`
	`35`	`spellCheck={false}`
	`36`	`autoCorrect="off"`
	`37`	`autoCapitalize="off"`
	`38`	`className="cs-search-input"`
	`39`	`/>`
	`40`	`</div>`
	`41`	`);`
	`42`	`}`