Изменение размера Material-UI <TextField>заставляет курсор выходить из своего контейнера

Question

Я пытался изменить размер компонента <TextField> material-ui, чтобы он соответствовал динамическому контейнеру. Однако это приводит к тому, что вводу курсора разрешается покидать текстовую область вообще (см. Изображение № 2 / № 3 ниже). Кроме того, когда текст не введен, курсор начинается с центрированной позиции относительно высоты его контейнера (см. Изображение № 1 ниже).

Ниже приведен основной пример этого в действии.

const TextArea = () =>
{
  const containerStyle = {
    width: 200,
    height: 200
  }

  const textFieldStyle = {
    marginTop: 8,
    width: '100%',
    height: 'calc(100% - 8px)'
  }

  const inputStyle = {
    width: '100%',
    height: '100%',
    overflowY: 'auto' // tried this afterwards to no avail
  }

  const props = {
    style: textFieldStyle,
    label: 'Workings',
    multiline: true,
    variant: 'outlined',
    InputProps: {style: inputStyle}
  }

  return (
    <div style={containerStyle}>
      <TextField {...props}/>
    </div>
  );
}

Я хотел бы знать, как изменить размер <TextField>, чтобы заполнить контейнер, сохранив при этом его ожидаемую функциональность.

Редактировать: Я использую @material-ui/core v3.6.0 и react v16.4.1

Редактировать: Вот CodeSandbox , показывающий проблему.

Answer 1

Основная проблема в том, что вы не указываете свойство rows.

row Количество строк, отображаемых, когда для параметра multiline установлено значение true ( docs ).

Поведение по умолчанию для многострочного TextField состоит в том, чтобы он начинался с одной строки и увеличивался по мере необходимости (таким образом, в конечном итоге увеличиваясь за пределы высоты вашего контейнера). Вы можете указать maxRows, чтобы наложить ограничение на это поведение автоматического увеличения, или вы можете установить фиксированное количество строк (полоса прокрутки появляется, если вы попытаетесь ввести больше строк), указав свойство rows.

Вы можете либо попытаться вычислить значение для rows на основе высоты контейнера:

  const props = {
    style: textFieldStyle,
    label: "derive rows from height",
    multiline: true,
    variant: "outlined",
    rows: containerStyle.height / 21,
    InputProps: { style: inputStyle }
  };

Я не даю никаких обещаний, что математика надежна для разных размеров, но деление на 21, похоже, сработало в этом случае.

Другой подход заключается в удалении явных высот и разрешении свойству rows в TextField управлять всеми остальными высотами:

  const props = {
    style: textFieldStyle, // style would not control height
    label: "no explicit height",
    multiline: true,
    variant: "outlined",
    rows: 9,
    InputProps: { style: inputStyle }  // style would not control height
  };

Когда вы упоминаете, что хотите заполнить высоту динамического контейнера, я не уверен, что движет динамической природой, но если это возможно, я бы избегал динамического изменения высоты контейнера и вместо этого динамически изменял количество строк в текстовая область (т.е. используйте второй подход).

Вот песочница, показывающая оба подхода: