I am using MUI Autocomplete and would like to add a “+” button to the right of the text input that can be clicked to simulate “Enter” keypress.

<Autocomplete
        freeSolo
        multiple
        ... // various autocomplete props...
        renderInput={(params) => (
          <TextField
            {...params}
            inputRef={textFieldRef}
            InputProps={
                    ...params.InputProps,
                    endAdornment: (
                      <>
                        <Box
                          onClick={() => {
                            console.log("I am here");
                            textFieldRef?.current?.dispatchEvent(
                              new KeyboardEvent("keydown", {
                                key: "Enter,
                              })
                            );
                          }}
                        >
                          <Text>
                            +
                          </Text>
                        </Box>
                      </>
                    ),
                  }
            }
          />
        )}
      />

When I press the “+” button I can see the console.log’s text but the Enter event does not seem to be triggered.

I tried using ref instead of inputRef and also using document.dispatchEvent instead of using reference, did not work either.

Any ideas what else I could try?

Thank you!