From b9aa6386a22aaa175dca3cde8ddd406c225c5d9e Mon Sep 17 00:00:00 2001 From: bosiraphael Date: Tue, 5 Nov 2024 13:34:46 +0100 Subject: [PATCH] fix DropdownMenuInput border when focused --- .../layout/dropdown/components/DropdownMenuInput.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx index 034fc4ec05..5b84345e0c 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx @@ -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`