From 82bc2f46cbf3f991efd50ec38c341ba180d74732 Mon Sep 17 00:00:00 2001
From: Andrey Medvedev <andr.medv.spb@gmail.com>
Date: Fri, 19 Jan 2024 13:02:26 +0300
Subject: [PATCH] Pass required prop to native select instead of search input
 (#6373) (#6408)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

В старой реализации CustomSelect (v5.9.3) мы передавали required на div, тем самым он вообще не был задействован в обработке формы.
В v5.10.0 мы поломали это поведение и `required` стал передаваться на input, используемый для поиска.

Исправляем это передавая `required` на спрятанный нативный селект.
---
 .../CustomSelect/CustomSelect.test.tsx        | 24 ++++++++++++++++++-
 .../components/CustomSelect/CustomSelect.tsx  |  2 ++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx b/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx
index 0c9e78c702..31d48a41ec 100644
--- a/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx
+++ b/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx
@@ -1061,7 +1061,6 @@ describe('CustomSelect', () => {
   });
 
   it('native select is reachable via nativeSelectTestId', () => {
-    // Это позволяет скринридеру зачитывать placeholder, если опция не выбрана.
     render(
       <CustomSelect
         nativeSelectTestId="nativeSelectTestId"
@@ -1078,4 +1077,27 @@ describe('CustomSelect', () => {
     const nativeSelect = screen.getByTestId<HTMLSelectElement>('nativeSelectTestId');
     expect(nativeSelect.value).toBe('1');
   });
+
+  it('passes required prop to native select, not input', () => {
+    render(
+      <CustomSelect
+        nativeSelectTestId="nativeSelectTestId"
+        data-testid="inputTestId"
+        options={[
+          { value: 0, label: 'Mike' },
+          { value: 1, label: 'Josh' },
+        ]}
+        placeholder="Не выбрано"
+        allowClearButton
+        defaultValue={1}
+        required
+      />,
+    );
+
+    const nativeSelect = screen.getByTestId<HTMLSelectElement>('nativeSelectTestId');
+    expect(nativeSelect.required).toBeTruthy();
+
+    const input = screen.getByTestId<HTMLInputElement>('inputTestId');
+    expect(input.required).toBeFalsy();
+  });
 });
diff --git a/packages/vkui/src/components/CustomSelect/CustomSelect.tsx b/packages/vkui/src/components/CustomSelect/CustomSelect.tsx
index 22f520c9f2..546c09856a 100644
--- a/packages/vkui/src/components/CustomSelect/CustomSelect.tsx
+++ b/packages/vkui/src/components/CustomSelect/CustomSelect.tsx
@@ -253,6 +253,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     clearButtonTestId,
     nativeSelectTestId,
     defaultValue,
+    required,
     ...restProps
   } = props;
 
@@ -890,6 +891,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         aria-hidden
         className={styles['CustomSelect__control']}
         data-testid={nativeSelectTestId}
+        required={required}
       >
         {allowClearButton && <option key="" value="" />}
         {optionsProp.map((item) => (