diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index c7eada21ba..9c6c5c41fd 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -3120,20 +3120,42 @@ test('renders with custom theme', () => {
).toEqual(primary);
});
-test('form validation with `required` prop', () => {
- const components = (value?: Option) => (
-
- );
+cases(
+ '`required` prop',
+ ({ props = BASIC_PROPS }) => {
+ const components = (value: Option | null | undefined = null) => (
+
+ );
- const { container, rerender } = render(components());
+ const { container, rerender } = render(components());
- expect(
- container.querySelector('#formTest')?.checkValidity()
- ).toEqual(false);
- rerender(components(BASIC_PROPS.options[0]));
- expect(
- container.querySelector('#formTest')?.checkValidity()
- ).toEqual(true);
-});
+ expect(
+ container.querySelector('#formTest')?.checkValidity()
+ ).toEqual(false);
+ rerender(components(props.options[0]));
+ expect(
+ container.querySelector('#formTest')?.checkValidity()
+ ).toEqual(true);
+ },
+ {
+ 'single select > should validate with value': {
+ props: {
+ ...BASIC_PROPS,
+ },
+ },
+ 'single select (isSearchable is false) > should validate with value': {
+ props: {
+ ...BASIC_PROPS,
+ isSearchable: false,
+ },
+ },
+ 'multi select > should validate with value': {
+ props: {
+ ...BASIC_PROPS,
+ isMulti: true,
+ },
+ },
+ }
+);
diff --git a/packages/react-select/src/__tests__/StateManaged.test.tsx b/packages/react-select/src/__tests__/StateManaged.test.tsx
index e61d7b074c..1f45f84041 100644
--- a/packages/react-select/src/__tests__/StateManaged.test.tsx
+++ b/packages/react-select/src/__tests__/StateManaged.test.tsx
@@ -475,3 +475,23 @@ cases(
},
}
);
+
+test('`required` prop > should validate', () => {
+ const { container } = render(
+
+ );
+
+ expect(
+ container.querySelector('#formTest')?.checkValidity()
+ ).toEqual(false);
+
+ let selectOption = container.querySelectorAll('div.react-select__option')[3];
+
+ userEvent.click(selectOption);
+
+ expect(
+ container.querySelector('#formTest')?.checkValidity()
+ ).toEqual(true);
+});