<commit_before>import React from 'react';
import classNames from 'classnames';
import { compose, withState } from 'recompose';
import TextareaAutosize from 'react-autosize-textarea';
import './EditableTextArea.css';

const EditableTextArea = compose(
  withState('isInEditMode', 'setIsInEditMode', false),
)(
  ({
    value,
    placeHolder,
    title,
    maxLength,
    classNames: classes = {},
    isInEditMode,
    setIsInEditMode,
    onTextChanged = () => {},
  }) =>
    <div className={classNames('textarea-container', classes.container)}>
      <TextareaAutosize
        innerRef={(textarea) => {
          if (!textarea) return;
          textarea.readOnly = !isInEditMode;
          if (isInEditMode) textarea.focus();
        }}
        onClick={() => setIsInEditMode(true)}
        onChange={e => onTextChanged(e.target.value)}
        value={value}
        placeholder={placeHolder}
        title={title}
        className={classNames('textarea-input', classes.input, {
          'read-only': !isInEditMode,
        })}
        onBlur={() => {
          value = value.trim();
          setIsInEditMode(false);
          onTextChanged(value);
        }}
        maxLength={maxLength}
      />
    </div>,
);

export default EditableTextArea;<commit_msg>fix description can't focus bug<commit_after>import React from 'react';
import classNames from 'classnames';
import { compose, withState } from 'recompose';
import TextareaAutosize from 'react-autosize-textarea';
import './EditableTextArea.css';

const EditableTextArea = compose(
  withState('isInEditMode', 'setIsInEditMode', false),
)(
  ({
    value,
    placeHolder,
    title,
    maxLength,
    classNames: classes = {},
    isInEditMode,
    setIsInEditMode,
    onTextChanged = () => {},
  }) =>
    <div className={classNames('textarea-container', classes.container)}>
      <TextareaAutosize
        readOnly={!isInEditMode}
        onClick={() => setIsInEditMode(true)}
        onChange={e => onTextChanged(e.target.value)}
        value={value}
        placeholder={placeHolder}
        title={title}
        className={classNames('textarea-input', classes.input, {
          'read-only': !isInEditMode,
        })}
        onBlur={() => {
          value = value.trim();
          setIsInEditMode(false);
          onTextChanged(value);
        }}
        maxLength={maxLength}
      />
    </div>,
);

export default EditableTextArea;
{'fraction_non_alphanumeric': 0.13990066225165562, 'fraction_numerical': 0.0, 'mean_word_length': 2.854864433811802, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 20, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4828968', 'n_tokens_mistral': 725, 'n_tokens_neox': 715, 'n_words': 131}