<commit_before>import { useRef } from "react";
import { useEffect } from "react";

export default function SearchBox({
  text,
  onChange,
}: {
  text: string;
  onChange: (text: string) => void;
}) {
  const ref = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (ref.current) {
      // focus and click required to trigger keyboard on mobile
      ref.current.focus();
      ref.current.click();
    }
  }, [ref]);

  const hasContent = text.length > 0;

  return (
    <div>
      <style jsx={true}>{`
        .back_button {
          position: absolute;
          width 42px;
          height: 42px;
          top: 8px;
          left: 6px;
        }

        .hiddenlabel {
          display: none;
        }

        .search_input {
          width: 100%;
          outline: none;
          padding: 19px 5px 16px 52px;
          color: #ffffff;
          transition: ease-in-out, 0.35s ease-in-out;
          border: none;
          box-shadow: 2px 1px 3px gray;
          font: font-family: "Roboto", sans-serif;
          font-size: 13pt;
          font-weight: none;
          background: #ee6e73 url(${
            hasContent
              ? "/icons/back_chevron_feature.svg"
              : "/icons/search_icon_color_feature.svg"
          }) no-repeat
            scroll 20px 22px;
        }

        .search_input:focus {
          color: #000000;
          background: #ffffff url(${
            hasContent
              ? "/icons/back_chevron_black.svg"
              : "/icons/search_icon_color_black.svg"
          }) no-repeat scroll 20px 22px};
        }

        .search_input:focus ::placeholder {
          color: #999999;
        }

        .search_input ::placeholder {
          color: #eebdbf;
        }

        .search_input::-webkit-search-cancel-button {
          -webkit-appearance: none;
        }
      `}</style>
      <div>
        <a
          className="back_button"
          href="#"
          onClick={(e) => {
            onChange("");
            e.preventDefault();
            if (ref.current) {
              // focus and click required to trigger keyboard on mobile
              ref.current.focus();
              ref.current.click();
            }
          }}
        />
        <label htmlFor="search" className="hiddenlabel">
          Search gifs
        </label>
        <input
          id="search"
          className="search_input"
          placeholder="Search gifs"
          type="search"
          value={text}
          onChange={(e) => onChange(e.target.value)}
          ref={ref}
        />
      </div>
    </div>
  );
}<commit_msg>Try to fix label accessibility<commit_after>import { useRef } from "react";
import { useEffect } from "react";

export default function SearchBox({
  text,
  onChange,
}: {
  text: string;
  onChange: (text: string) => void;
}) {
  const ref = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (ref.current) {
      // focus and click required to trigger keyboard on mobile
      ref.current.focus();
      ref.current.click();
    }
  }, [ref]);

  const hasContent = text.length > 0;

  return (
    <div>
      <style jsx={true}>{`
        .back_button {
          position: absolute;
          width 42px;
          height: 42px;
          top: 8px;
          left: 6px;
        }

        .search_input {
          width: 100%;
          outline: none;
          padding: 19px 5px 16px 52px;
          color: #ffffff;
          transition: ease-in-out, 0.35s ease-in-out;
          border: none;
          box-shadow: 2px 1px 3px gray;
          font: font-family: "Roboto", sans-serif;
          font-size: 13pt;
          font-weight: none;
          background: #ee6e73 url(${
            hasContent
              ? "/icons/back_chevron_feature.svg"
              : "/icons/search_icon_color_feature.svg"
          }) no-repeat
            scroll 20px 22px;
        }

        .search_input:focus {
          color: #000000;
          background: #ffffff url(${
            hasContent
              ? "/icons/back_chevron_black.svg"
              : "/icons/search_icon_color_black.svg"
          }) no-repeat scroll 20px 22px};
        }

        .search_input:focus ::placeholder {
          color: #999999;
        }

        .search_input ::placeholder {
          color: #eebdbf;
        }

        .search_input::-webkit-search-cancel-button {
          -webkit-appearance: none;
        }
      `}</style>
      <div>
        <a
          className="back_button"
          href="#"
          onClick={(e) => {
            onChange("");
            e.preventDefault();
            if (ref.current) {
              // focus and click required to trigger keyboard on mobile
              ref.current.focus();
              ref.current.click();
            }
          }}
        />
        <input
          id="search"
          className="search_input"
          aria-label="Search gifs"
          placeholder="Search gifs"
          type="search"
          value={text}
          onChange={(e) => onChange(e.target.value)}
          ref={ref}
        />
      </div>
    </div>
  );
}
{'fraction_non_alphanumeric': 0.12350986906390463, 'fraction_numerical': 0.018760992769200704, 'mean_word_length': 1.460576923076923, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 33, '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': '2200902', 'n_tokens_mistral': 1578, 'n_tokens_neox': 1476, 'n_words': 325}