How to make the first item of the list always be at the top and the rest of the list will scroll independently of it

Question

Is it possible to position the first item of a list to the top of the list and do not scroll with other items?

     <Select
            open={open}
            value={value}
            onChange={this.handleSelectChange}
            onClose={this.handleSelectClose}
            onOpen={this.handleSelectOpen}
          >
            <MenuItem
              style={{
                backgroundColor: "transparent"
              }}
            >
              <TextField
                value={search}
                fullWidth
                placeholder="search"
                onChange={this.handleInputChange}
              />
            </MenuItem>
            {filteredOptions.length ? (
              filteredOptions.map(option => {
                return (
                  <MenuItem value={option} key={option.value}>
                    {option.label}
                  </MenuItem>
                );
              })
            ) : (
              <MenuItem disabled>No match</MenuItem>
            )}
     </Select>

It can look like an autocomplete on the https://sharlaan.github.io/example3

Answer 1

From a UX point of view I wouldn't place the search field inside the list... Why don't you take the Autocomplete component of Material-UI directly? In this case you would have a normal text field which opens the corresponding list, once the user starts typing. See https://material-ui.com/demos/autocomplete/ for an example how to use it...

If you want to have a more complex select component I can recommend React-Select (https://react-select.com). But if you want it to match the Material look & feel, you would have to style it yourself...