<commit_before>import React, { useState, useEffect } from 'react'
import styled from 'styled-components'

import { Select as GovSelect } from 'govuk-react'
import { MEDIA_QUERIES } from '@govuk-react/constants'
import { spacing } from '@govuk-react/lib'

const StyledGovSelect = styled(GovSelect)`
  ${spacing.responsive({
    size: 2,
    property: 'margin',
    direction: ['top'],
  })}

  select {
    flex: 1;
    width: 'initial';
    min-width: 200px;
  }

  ${MEDIA_QUERIES.TABLET} {
    display: flex;
    align-items: center;
    flex-direction: row;
    ${spacing.responsive({
      size: 0,
      property: 'margin',
      direction: ['top'],
    })}
    span {
      ${spacing.responsive({
        size: 1,
        property: 'margin',
        direction: ['right'],
      })}
    }
  }
`

const Select = ({ input, ...props }) => {
  /*
   * A Select input
   *
   * Changing the initialValue prop overrides the user's input value - this
   * means that the input value will stay synchronised when changing the route.
   */
  const { onChange = () => {}, initialValue = '', ...inputProps } = input
  const [value, setValue] = useState(initialValue)
  useEffect(() => setValue(initialValue), [initialValue])

  return (
    <StyledGovSelect
      {...props}
      input={{
        onChange: (e) => {
          setValue(e.target.value)
          onChange(e)
        },
        value,
        ...inputProps,<commit_msg>Set select ids to include tyhe selected value<commit_after>import React, { useState, useEffect } from 'react'
import styled from 'styled-components'

import { Select as GovSelect } from 'govuk-react'
import { MEDIA_QUERIES } from '@govuk-react/constants'
import { spacing } from '@govuk-react/lib'

const StyledGovSelect = styled(GovSelect)`
  ${spacing.responsive({
    size: 2,
    property: 'margin',
    direction: ['top'],
  })}

  select {
    flex: 1;
    width: 'initial';
    min-width: 200px;
  }

  ${MEDIA_QUERIES.TABLET} {
    display: flex;
    align-items: center;
    flex-direction: row;
    ${spacing.responsive({
      size: 0,
      property: 'margin',
      direction: ['top'],
    })}
    span {
      ${spacing.responsive({
        size: 1,
        property: 'margin',
        direction: ['right'],
      })}
    }
  }
`

const Select = ({ input, ...props }) => {
  /*
   * A Select input
   *
   * Changing the initialValue prop overrides the user's input value - this
   * means that the input value will stay synchronised when changing the route.
   */
  const { onChange = () => {}, initialValue = '', id, ...inputProps } = input
  const [value, setValue] = useState(initialValue)
  useEffect(() => setValue(initialValue), [initialValue])

  return (
    <StyledGovSelect
      {...props}
      input={{
        onChange: (e) => {
          setValue(e.target.value)
          onChange(e)
        },
        id: id && `${id}-${initialValue}`,
        value,
        ...inputProps,
{'fraction_non_alphanumeric': 0.14797136038186157, 'fraction_numerical': 0.00477326968973747, 'mean_word_length': 2.5095693779904304, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 11, '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': '3615442', 'n_tokens_mistral': 949, 'n_tokens_neox': 911, 'n_words': 238}