Search input loses focus when it doesn’t find any title

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?

How it first looks like:

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>
  );

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.