score:4

i found solution, you can use "filteroptions" method to add a new button at the bottom.

check this::

<autocomplete
    id="supplieridd"
    style={{ width: 300 }}
    options={suppliers.map((supplier) => supplier.name)}
    renderinput={(params) => 
      <>
        <textfield {...params} label="булстат" margin="normal" onclick={()=>{console.log("hi")}} variant="outlined" />
      </>
    }
    filteroptions={(options) => {
          const result = [...options]
          result.push(
            ((
              <button
                variant="outlined"
                color="primary"
                onmousedown={onaddnew}
              >
               + add new
              </button>
            ) as unknown) as string,  // typecasting required for typescript
          )

          return result
        }}

      />

Related Query

More Query from same tag