I am using material ui textfield to search a query and show the list of items below. My problem is when i have small screen (mobile view) i have the same functionallity as web, and i wanna change it.

For example i dont want to "click" in query text to move on but i want to "click" on search icon mobile keyboard and make the search as the image below

Textfield Component

        <TextField
          autoFocus
          placeholder="Start typing to search"
          fullWidth
          id="fullWidth"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
            ),
          }}
        />