MUI Core - use autocomplete component as search box

user_2951437 0
Viewed 342

I'm trying to use Material-UI (MUI) Autocomplete component but more like a search bar. So i am trying to disable the popup of values when you click in the search area/text field. I have tried using the onkeyDown event but this is just keyboard, and i've tried free-solo but it keeps opening the dropdown list. Any ideas chaps?

Sample code ive tried below.

      return ( 
            <Autocomplete
            openOnFocus={false}
            disablePortal={true}
            id="combo-box-demo"
            freeSolo
            options={labels}
            sx={{ width: 300 }}
            onMouseClick={(event) => {
                console.log(event.key);
                if (event.key === 'Click') {
                  // Prevent's default 'Enter' behavior.
                  event.defaultMuiPrevented = true;
                
                }
            }}
            renderInput={(params) => <TextField {...params} label="SKU" />}
          />
material-ui autocomplete
1 Answers

To achieve the desired behavior you can use the open prop and set condition to it like:

    <Autocomplete
      open={true && searchInputValue.length>0}
      ...
    />

where searchInputValue will be the value of the state responsible for the search input.

user_141906900
Related