I cant disable or hide the autocomplete custom renderer input field.

[Ayomikuolatunji]

I was given a task to implement algolia autocomplete search with the custom renderer APIs and with a Figma design. I want to customise the input field and disable the clear search button that automatically shows when you start typing.

[Ayomikuolatunji]

 <Box
        component="form"
        ref={formRef}
        {...autocomplete.getFormProps({ inputElement: inputRef.current })}
      >
        <TextField
          size="medium"
          fullWidth
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                {(mobile && isOpen) || (query && mobile) ? (
                  <ArrowBackIcon className={classes.icon} color="primary" onClick={onClosePage} />
                ) : (
                  <SearchOutlined />
                )}
              </InputAdornment>
            ),
          }}
          sx={
            noResultInput
              ? noResultInputStyles(spacing, shadows, noResultInput)
              : desktop
              ? desktopInputStyles(spacing, shadows, isOpen)
              : mobile && !isOpen && !desktop
              ? mobileInputStyles(spacing, isOpen, grey[300])
              : inputStyles(spacing)
          }
          ref={inputRef}
          {...autocomplete.getInputProps({ inputElement: inputRef.current })}
        />
      </Box>

[Haroenv]

Do you mean this clear button?

That's default styling of input[type=search], you can undo it with css:

input[type=search] {
  appearance: textfield;
}

[Ayomikuolatunji]

thanks