0207

src/components/WizardSearchForm.tsx

@@ -20,6 +20,7 @@ const WizardSearchForm: React.FC<WizardSearchFormProps> = ({
   const [error, setError] = useState<string>('');
   const [queries, setQueries] = useState<Record<string, string>>({});
   const buttonRefs = useRef<Record<string, React.RefObject<HTMLButtonElement | null>>>({});
+  const inputRefs = useRef<Record<string, React.RefObject<HTMLInputElement>>>({});
   const [showSearchButton, setShowSearchButton] = React.useState(true);
 
   const [getWizard2] = useLazyQuery(GET_LAXIMO_WIZARD2, {
@@ -220,14 +221,18 @@ const WizardSearchForm: React.FC<WizardSearchFormProps> = ({
               ? options.filter(option => option.value.toLowerCase().includes(query.toLowerCase()))
               : options;
             const buttonRef = buttonRefs.current[step.conditionid];
+            // Создаём ref для инпута, если его ещё нет
+            if (!inputRefs.current[step.conditionid]) {
+              inputRefs.current[step.conditionid] = React.createRef<HTMLInputElement>();
+            }
+            const inputRef = inputRefs.current[step.conditionid];
             // Определяем выбранный ключ
             const selectedKey = selectedParams[step.conditionid]?.key || (step.determined ? options.find(o => o.value === step.value)?.key : '');
             // Определяем отображаемый label
             const selectedLabel =
               options.find(o => o.key === selectedKey)?.value ||
               selectedParams[step.conditionid]?.value ||
-              step.value ||
-              '';
+              step.value || '';
 
             // Если единственный вариант уже выбран — не рендерим селект
             if (options.length === 1 && (selectedKey === options[0].key || step.determined)) {
@@ -252,7 +257,21 @@ const WizardSearchForm: React.FC<WizardSearchFormProps> = ({
                     disabled={isLoading || options.length === 0}
                   >
                     <div className="relative">
+                      {/* Невидимая кнопка поверх инпута */}
+                      <button
+                        type="button"
+                        className="absolute top-0 left-0 w-full h-full opacity-0 z-10 cursor-pointer"
+                        tabIndex={0}
+                        aria-label="Открыть список опций"
+                        onClick={() => {
+                          inputRef.current?.focus();
+                          if (inputRef.current) {
+                            inputRef.current.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+                          }
+                        }}
+                      />
                       <Combobox.Input
+                        ref={inputRef}
                         id={`wizard-combobox-${step.conditionid}`}
                         className={`w-full px-6 py-4 rounded text-sm text-gray-950 placeholder:text-neutral-500 outline-none focus:shadow-none transition-colors pr-12 ${selectedLabel ? 'bg-gray-50 border-gray-200' : 'bg-white border border-stone-300'}`}
                         displayValue={() => selectedLabel}
@@ -264,7 +283,7 @@ const WizardSearchForm: React.FC<WizardSearchFormProps> = ({
                       {selectedLabel ? (
                         <button
                           type="button"
-                          className="absolute inset-y-0 right-0 w-12 flex items-center justify-center text-gray-400 hover:text-red-600 focus:outline-none"
+                          className="absolute inset-y-0 right-0 w-12 flex items-center justify-center text-gray-400 hover:text-red-600 focus:outline-none z-10"
                           aria-label="Сбросить"
                           tabIndex={0}
                           onClick={() => handleParamReset(step)}
@@ -330,8 +349,8 @@ const WizardSearchForm: React.FC<WizardSearchFormProps> = ({
 
       {/* Информация о недостаточности параметров */}
       {!isLoading && !canListVehicles && wizardSteps.length > 0 && (
-        <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
-          <p className="text-yellow-800 text-sm">
+        <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
+          <p className="text-blue-800 text-sm">
             Выберите больше параметров для поиска автомобилей
           </p>
         </div>