Whenever I try to search, I can type only the letters which are similar to the one of the titles. If any letter is different I lose focus from input. It used to work normally before, but Idk what happened now. Any suggestions?
After starting to type on search input:
When I type a letter which is not in the title:
Code:
if (props.items.length === 0) { return ( <div className="files-list center"> <Card> <h2>No files found.</h2> </Card> </div> ); } else if ( props.items.filter( (file) => file.title.toLowerCase().includes(searchInput) || file.title.toUpperCase().includes(searchInput) ).length === 0 ) { return ( <div className="filesList"> <div className="search"> <input type="text" placeholder="Search Files" onChange={(event) => setSearchInput(event.target.value)} /> </div> <Card> <h2>No files found.</h2> </Card> </div> ); } return ( <React.Fragment> <div className="filesList"> <div className="actionsBtn"> <NavLink to="/add-file" className="addFileBtn" title="Add File"> <FontAwesomeIcon icon={faPlus} /> </NavLink> <input type="text" placeholder="Search Files" onChange={(event) => setSearchInput(event.target.value)} /> </div> <ul className="files-list"> {props.items .filter( (file) => file.title.toLowerCase().includes(searchInput) || file.title.toUpperCase().includes(searchInput) ) .map((file) => ( <FilesPostItem key={file.id} id={file.id} title={file.title} file={file.file} creator={file.creator.name} description={file.description} creatorId={file.creator} onDelete={props.onDeleteFile} /> ))} </ul> </div> </React.Fragment> );
Advertisement
Answer
What I think happens is, your “default” return form the beginning gets reset by the return in the “if else”. So the Input is a new DOM Element and loses focus.
You might want to add something like this to your default return and remove your “if else” statement.
<ul className="files-list"> {props.items .filter( (file) => file.title.toLowerCase().includes(searchInput) || file.title.toUpperCase().includes(searchInput) ) .map((file) => ( <FilesPostItem key={file.id} id={file.id} title={file.title} file={file.file} creator={file.creator.name} description={file.description} creatorId={file.creator} onDelete={props.onDeleteFile} /> ))} </ul> {props.items .filter( (file) => file.title.toLowerCase().includes(searchInput) || file.title.toUpperCase().includes(searchInput) ).length > 0 && <Card> <h2>No files found.</h2> </Card> }
What does this do? It adds the “No files found” message to your default return and shows it only, if items is empty.
But i am pretty sure, there is a better way to do this.