reactjs - How to limit height of content inside MUI Autocomplete - Stack Overflow

admin管理员组

文章数量:1356438

I am using MUI autocomplete to allow user to add multiple emails. All valid emails are shown as MUI Chip components using tags and invalid emails are shown as comma separated list. I want to limit the height of content (tags + input value) to 300px. What is the best way to achieve this?

Currently, I have implemented this by overriding MUI form control root in styled component

& .MuiFormControl-root {
    max-height: 300px;
    overflow-y: auto;
}

However, this scrolls the border and helper text as well. bottom border and helper text is not visible until scrolled to end. I want a way to scroll the content inside this input field so that bottom border and helper text always stay visible and content inside (including tags + input value) scrolls.

//complete code
<StyledAutocomplete
      clearIcon={false}
      options={[]}
      freeSolo
      multiple
      value={validEmails}
      inputValue={inputValue}
      inputMode='email'
      renderTags={(value, getTagProps) =>
        value.map((option, index) => {
          const { key, ...tagProps } = getTagProps({ index });

          return (
            isValidEmail(option as string) && (
              <Chip
                key={key}
                label={option as string}
                {...tagProps}
                onDelete={() => handleDelete(option as string)}
              />
            )
          );
        })
      }
      renderInput={(params) => (
        <TextField
          placeholder='Separate emails with commas'
          {...params}
          onChange={handleInputChange}
          onKeyDown={handleKeyDown}
          onPaste={handlePaste}
          //SetTimeout ensures that onTabChange we don't see flicker of error state.
          onBlur={() => setTimeout(() => processEmails(inputValue), 0)}
          multiline
          minRows={4}
          error={!!hasInvalidEmails || exceedsLimit}
          helperText={getHelperText(
            hasInvalidEmails,
            exceedsLimit,
            emailsLimit,
          )}
        />
      )}
    />

本文标签： reactjsHow to limit height of content inside MUI AutocompleteStack Overflow