diff --git a/src/components/BaseTextInput/WebTextInput/index.tsx b/src/components/BaseTextInput/WebTextInput/index.tsx index babf9b7b1..a5666686b 100644 --- a/src/components/BaseTextInput/WebTextInput/index.tsx +++ b/src/components/BaseTextInput/WebTextInput/index.tsx @@ -2,7 +2,9 @@ import styled from 'styled-components' import { colors } from '~/utils/colors' import { BaseTextInputProps } from '../types' -type Props = Required> +type Props = Required< + Pick +> export const WebTextInput = styled.input` -webkit-appearance: none; @@ -16,6 +18,7 @@ export const WebTextInput = styled.input` outline: 0; padding: 0; text-align: ${({ textAlign }) => textAlign}; + text-transform: ${({ autoCapitalize }) => autoCapitalize}; &:focus { border: none; diff --git a/src/components/BaseTextInput/defaultProps/index.ts b/src/components/BaseTextInput/defaultProps/index.ts index 200aab52e..71954d692 100644 --- a/src/components/BaseTextInput/defaultProps/index.ts +++ b/src/components/BaseTextInput/defaultProps/index.ts @@ -4,6 +4,7 @@ type DefaultProps = Required< Pick< BaseTextInputProps, | 'autoComplete' + | 'autoCapitalize' | 'colorName' | 'disabled' | 'maxLength' @@ -18,6 +19,7 @@ type DefaultProps = Required< export const defaultProps: DefaultProps = { autoComplete: 'off', colorName: 'black', + autoCapitalize: 'none', disabled: false, maxLength: 524288, placeholder: '', diff --git a/src/components/BaseTextInput/index.tsx b/src/components/BaseTextInput/index.tsx index a2bdef479..ee8428210 100644 --- a/src/components/BaseTextInput/index.tsx +++ b/src/components/BaseTextInput/index.tsx @@ -8,6 +8,7 @@ export const BaseTextInput = forwardRef( ( { autoComplete = defaultProps.autoComplete, + autoCapitalize = defaultProps.autoCapitalize, autoFocus, className, colorName = defaultProps.colorName, @@ -41,6 +42,7 @@ export const BaseTextInput = forwardRef( return (