<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Transition from 'react-transition-group/Transition';
import { NavigatorContext } from '../../../../context';
import styles from './style';
import transition from './transition';

/**
 * The NavigatorSearch component.
 */
class NavigatorSearch extends Component {
  static propTypes = {
    active: PropTypes.bool.isRequired,
    query: PropTypes.string.isRequired,
    setSearchQuery: PropTypes.func.isRequired,
    toggleSearchField: PropTypes.func.isRequired,
  }

  static contextTypes = {
    i18n: PropTypes.func,
  };

  /**
   * @param {Object} props The component props.
   */
  constructor(props) {
    super(props);

    this.inputField = React.createRef();

    this.state = {
      value: props.query,
    };
  }

  /**
   * @param {Object} nextProps The next component props.
   */
  componentWillReceiveProps(nextProps) {
    if (nextProps.active) {
      this.inputField.current.focus();
    }

    if (this.state.value !== nextProps.query) {
      this.setState({
        value: nextProps.query,
      });
    }
  }

  /**
   * Marks the whole input on focus.
   */
  handleFocus = () => {
    this.inputField.current.selectionStart = 0;
    this.inputField.current.selectionEnd = this.state.value.length;
  };

  /**
   * Handles blur events on the input element.
   */
  disableField = () => {
    this.inputField.current.blur();
    this.props.toggleSearchField(false);
  };

  /**
   * Handles input events on the input element.
   * @param {SyntheticEvent} event An input event.
   */
  handleInput = (event) => {
    this.props.setSearchQuery(event.target.value);
  }

  /**
   * Disabled the search field and submits the search.
   * @param {SyntheticEvent} event An input event.
   */
  submitSearch = (event) => {
    event.preventDefault();
    this.props.toggleSearchField(false, true);
  }

  /**
   * @return {JSX}
   */
  render() {
    const { __ } = this.context.i18n();
    const placeholder = __('search.placeholder');

    return (
      <Transition in={this.props.active} timeout={0}>
        {state => (
          <div
            className={styles.container}
            style={transition[state]}
          >
            <form
              className={styles.form}<commit_msg>PWA-511 Blurred search field when form is submitted<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Transition from 'react-transition-group/Transition';
import { NavigatorContext } from '../../../../context';
import styles from './style';
import transition from './transition';

/**
 * The NavigatorSearch component.
 */
class NavigatorSearch extends Component {
  static propTypes = {
    active: PropTypes.bool.isRequired,
    query: PropTypes.string.isRequired,
    setSearchQuery: PropTypes.func.isRequired,
    toggleSearchField: PropTypes.func.isRequired,
  }

  static contextTypes = {
    i18n: PropTypes.func,
  };

  /**
   * @param {Object} props The component props.
   */
  constructor(props) {
    super(props);

    this.inputField = React.createRef();

    this.state = {
      value: props.query,
    };
  }

  /**
   * @param {Object} nextProps The next component props.
   */
  componentWillReceiveProps(nextProps) {
    if (nextProps.active) {
      this.inputField.current.focus();
    }

    if (this.state.value !== nextProps.query) {
      this.setState({
        value: nextProps.query,
      });
    }
  }

  /**
   * Marks the whole input on focus.
   */
  handleFocus = () => {
    this.inputField.current.selectionStart = 0;
    this.inputField.current.selectionEnd = this.state.value.length;
  };

  /**
   * Handles blur events on the input element.
   */
  disableField = () => {
    this.inputField.current.blur();
    this.props.toggleSearchField(false);
  };

  /**
   * Handles input events on the input element.
   * @param {SyntheticEvent} event An input event.
   */
  handleInput = (event) => {
    this.props.setSearchQuery(event.target.value);
  }

  /**
   * Disabled the search field and submits the search.
   * @param {SyntheticEvent} event An input event.
   */
  submitSearch = (event) => {
    event.preventDefault();
    this.inputField.current.blur();
    this.props.toggleSearchField(false, true);
  }

  /**
   * @return {JSX}
   */
  render() {
    const { __ } = this.context.i18n();
    const placeholder = __('search.placeholder');

    return (
      <Transition in={this.props.active} timeout={0}>
        {state => (
          <div
            className={styles.container}
            style={transition[state]}
          >
            <form
              className={styles.form}
{'fraction_non_alphanumeric': 0.13845172267120373, 'fraction_numerical': 0.0031901318587834963, 'mean_word_length': 2.603831417624521, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 17, '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': '982011', 'n_tokens_mistral': 1421, 'n_tokens_neox': 1391, 'n_words': 307}