fix(Select): show invalid state without passing error message

gravity-ui · Apr 27, 2024 · 5affb64 · 5affb64
1 parent 9e93c91
commit 5affb64
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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'],