fix DropdownMenuInput border when focused

This commit is contained in:
bosiraphael 2024-11-05 13:34:46 +01:00
parent 0893774cc1
commit b9aa6386a2

View File

@ -2,7 +2,7 @@ import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';
import 'react-phone-number-input/style.css';
import { TEXT_INPUT_STYLE } from 'twenty-ui';
import { RGBA, TEXT_INPUT_STYLE } from 'twenty-ui';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { useCombinedRefs } from '~/hooks/useCombinedRefs';
@ -22,6 +22,14 @@ const StyledInput = styled.input<{
position: relative;
width: 100%;
&:focus {
${({ theme, hasError = false }) => {
if (hasError) return '';
return `box-shadow: 0px 0px 0px 3px ${RGBA(theme.color.blue, 0.1)};
border-color: ${theme.color.blue};`;
}};
}
${({ withRightComponent }) =>
withRightComponent &&
css`