From 882c9a9dbdae0d9bb0002b0a8a15515de42c48dc Mon Sep 17 00:00:00 2001
From: Filatov Dmitry <dfilatov@yandex-team.ru>
Date: Sat, 27 Apr 2024 17:20:59 +0300
Subject: [PATCH] fix(Select): show invalid state without passing error message
 (#1554)

---
 src/components/Select/Select.tsx                      | 6 +++---
 src/components/Select/__tests__/Select.error.test.tsx | 8 ++++++++
 src/components/Select/__tests__/utils.tsx             | 1 +
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 9ee92b4d17..a495e4cbb3 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -162,11 +162,11 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
     });
     const errorMessageId = useUniqId();
 
+    const isErrorStateVisible = validationState === 'invalid';
     const isErrorMsgVisible =
-        validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'outside';
+        isErrorStateVisible && Boolean(errorMessage) && errorPlacement === 'outside';
     const isErrorIconVisible =
-        validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'inside';
-    const isErrorStateVisible = isErrorMsgVisible || isErrorIconVisible;
+        isErrorStateVisible && Boolean(errorMessage) && errorPlacement === 'inside';
 
     const handleOptionClick = React.useCallback(
         (option?: FlattenOption) => {
diff --git a/src/components/Select/__tests__/Select.error.test.tsx b/src/components/Select/__tests__/Select.error.test.tsx
index db2727cbbb..372627ee03 100644
--- a/src/components/Select/__tests__/Select.error.test.tsx
+++ b/src/components/Select/__tests__/Select.error.test.tsx
@@ -4,7 +4,15 @@ import {render, screen} from '../../../../test-utils/utils';
 import {CONTROL_ERROR_MESSAGE_QA} from '../../controls/utils';
 import {Select} from '../Select';
 
+import {SELECT_CONTROL_BUTTON_ERROR_CLASS, TEST_QA, setup} from './utils';
+
 describe('Select error', () => {
+    test('render error appearance with invalid state and without errorMessage', () => {
+        const {getByTestId} = setup({validationState: 'invalid'});
+        const selectControl = getByTestId(TEST_QA);
+
+        expect(selectControl).toHaveClass(SELECT_CONTROL_BUTTON_ERROR_CLASS);
+    });
     test('render error message with error prop (if it is not an empty string)', () => {
         render(<Select error="Some Error" />);
 
diff --git a/src/components/Select/__tests__/utils.tsx b/src/components/Select/__tests__/utils.tsx
index c2238eac63..1e31b82b7f 100644
--- a/src/components/Select/__tests__/utils.tsx
+++ b/src/components/Select/__tests__/utils.tsx
@@ -15,6 +15,7 @@ export const OptionsListType = {
 export const TEST_QA = 'select-test-qa';
 export const SELECT_CONTROL_OPEN_CLASS = selectControlBlock({open: true});
 export const SELECT_CONTROL_BUTTON_OPEN_CLASS = selectControlButtonBlock({open: true});
+export const SELECT_CONTROL_BUTTON_ERROR_CLASS = selectControlButtonBlock({error: true});
 export const SELECT_LIST_VIRTUALIZED_CLASS = selectListBlock({virtualized: true});
 export const DEFAULT_OPTIONS = generateOptions([
     ['js', 'JavaScript'],