diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx index 5dd11642d..17573e527 100644 --- a/frontend/src/components/v2/Input/Input.tsx +++ b/frontend/src/components/v2/Input/Input.tsx @@ -1,4 +1,4 @@ -import { forwardRef, InputHTMLAttributes, ReactNode } from "react"; +import { ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode } from "react"; import { cva, VariantProps } from "cva"; import { twMerge } from "tailwind-merge"; @@ -10,6 +10,7 @@ type Props = { rightIcon?: ReactNode; isDisabled?: boolean; isReadOnly?: boolean; + autoCapitalization?: boolean; }; const inputVariants = cva( @@ -80,10 +81,19 @@ export const Input = forwardRef( variant = "filled", size = "md", isReadOnly, + autoCapitalization, ...props }, ref ): JSX.Element => { + const handleInput = (event: ChangeEvent) => { + console.log(123, props, autoCapitalization) + if (autoCapitalization) { + // eslint-disable-next-line no-param-reassign + event.target.value = event.target.value.toUpperCase(); + } + }; + return (
{leftIcon && {leftIcon}} @@ -93,6 +103,7 @@ export const Input = forwardRef( ref={ref} readOnly={isReadOnly} disabled={isDisabled} + onInput={handleInput} className={twMerge( leftIcon ? "pl-10" : "pl-2.5", rightIcon ? "pr-10" : "pr-2.5", diff --git a/frontend/src/views/DashboardPage/DashboardPage.tsx b/frontend/src/views/DashboardPage/DashboardPage.tsx index 6d794cbec..5763128e4 100644 --- a/frontend/src/views/DashboardPage/DashboardPage.tsx +++ b/frontend/src/views/DashboardPage/DashboardPage.tsx @@ -971,6 +971,7 @@ export const DashboardPage = () => { register={register} control={control} setValue={setValue} + autoCapitalization={currentWorkspace?.autoCapitalization} /> ))} {!isReadOnly && !isRollbackMode && ( diff --git a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx index 899e0197f..a2f95e4a4 100644 --- a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx +++ b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx @@ -79,6 +79,7 @@ type Props = { setValue: UseFormSetValue; isKeyError?: boolean; keyError?: string; + autoCapitalization?: boolean; }; export const SecretInputRow = memo( @@ -98,7 +99,8 @@ export const SecretInputRow = memo( setValue, isKeyError, keyError, - secUniqId + secUniqId, + autoCapitalization }: Props): JSX.Element => { const isKeySubDisabled = useRef(false); // comment management in a row @@ -243,6 +245,7 @@ export const SecretInputRow = memo( isKeySubDisabled.current = false; field.onBlur(); }} + autoCapitalization={autoCapitalization} />