Cada vez que intento buscar, solo puedo escribir las letras que son similares a las de los títulos. Si alguna letra es diferente, pierdo el foco de entrada. Solía funcionar normalmente antes, pero no sé qué pasó ahora. ¿Alguna sugerencia?
Después de comenzar a escribir en la entrada de búsqueda:
Cuando escribo una letra que no está en el título:
Código:
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> );Lo que creo que sucede es que su devolución "predeterminada" desde el principio se restablece con la devolución en "if else". Entonces, la entrada es un nuevo elemento DOM y pierde el foco.
Es posible que desee agregar algo como esto a su devolución predeterminada y eliminar su declaración "if else".
<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> }¿Qué hace esto? Agrega el mensaje "No se encontraron archivos" a su devolución predeterminada y lo muestra solo si los elementos están vacíos.
Pero estoy bastante seguro, hay una mejor manera de hacer esto.