@qite/tide-booking-component 1.4.29 → 1.4.31

package/src/booking-wizard/features/sidebar/sidebar.tsx

@@ -31,6 +31,7 @@ interface SidebarProps {
   headerComponent?: JSX.Element;
   footerComponent?: JSX.Element;
   loaderComponent?: JSX.Element;
+  isUnavailable?: boolean;
 }
 
 const Sidebar: React.FC<SidebarProps> = ({
@@ -52,7 +53,8 @@ const Sidebar: React.FC<SidebarProps> = ({
   isOnRequest,
   headerComponent,
   footerComponent,
-  loaderComponent
+  loaderComponent,
+  isUnavailable
 }) => {
   const [active, setActive] = useState<boolean>(false);
   const translations = useSelector(selectTranslations);
@@ -75,127 +77,133 @@ const Sidebar: React.FC<SidebarProps> = ({
       <div className="booking__sidebar-frame">
         <ProductCard productName={productName} thumbnailUrl={thumbnailUrl} handleToggleClick={handleToggleClick} />
         <div className="pricing-summary">
-          <div className="pricing-summary__wrapper">
-            <div className={`pricing-summary__region ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
-              <div className="pricing-summary__group">
-                <h6 className="pricing-summary__title">{translations.SIDEBAR.TRAVEL_INFO}</h6>
-                {!isEmpty(travelerRooms) &&
-                  travelerRooms?.map((room, rIndex) => (
-                    <div className="pricing-summary__row" key={rIndex}>
-                      <div className="pricing-summary__property">
-                        {travelerRooms.length > 1 && `${translations.SHARED.ROOM} ${rIndex + 1}`}
-                        {travelerRooms.length === 1 && translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP}
+          {!isUnavailable ? (
+            <div className="pricing-summary__wrapper">
+              <div className={`pricing-summary__region ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
+                <div className="pricing-summary__group">
+                  <h6 className="pricing-summary__title">{translations.SIDEBAR.TRAVEL_INFO}</h6>
+                  {!isEmpty(travelerRooms) &&
+                    travelerRooms?.map((room, rIndex) => (
+                      <div className="pricing-summary__row" key={rIndex}>
+                        <div className="pricing-summary__property">
+                          {travelerRooms.length > 1 && `${translations.SHARED.ROOM} ${rIndex + 1}`}
+                          {travelerRooms.length === 1 && translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP}
+                        </div>
+
+                        <div className="pricing-summary__value">{room}</div>
                       </div>
+                    ))}
 
-                      <div className="pricing-summary__value">{room}</div>
+                  {startDateText && (
+                    <div className="pricing-summary__row">
+                      <div className="pricing-summary__property">
+                        {startDateText && endDateText ? translations.SIDEBAR.DEPARTURE : translations.SIDEBAR.DEPARTURE_SINGLE}
+                      </div>
+                      <div className="pricing-summary__value">{startDateText}</div>
                     </div>
-                  ))}
+                  )}
 
-                {startDateText && (
-                  <div className="pricing-summary__row">
-                    <div className="pricing-summary__property">
-                      {startDateText && endDateText ? translations.SIDEBAR.DEPARTURE : translations.SIDEBAR.DEPARTURE_SINGLE}
+                  {endDateText && (
+                    <div className="pricing-summary__row">
+                      <div className="pricing-summary__property">{translations.SIDEBAR.ARRIVAL}</div>
+                      <div className="pricing-summary__value">{endDateText}</div>
                     </div>
-                    <div className="pricing-summary__value">{startDateText}</div>
-                  </div>
-                )}
+                  )}
+                </div>
 
-                {endDateText && (
-                  <div className="pricing-summary__row">
-                    <div className="pricing-summary__property">{translations.SIDEBAR.ARRIVAL}</div>
-                    <div className="pricing-summary__value">{endDateText}</div>
-                  </div>
+                {isLoading && loaderComponent}
+                {!isLoading && departureFlightMetaData && (
+                  <SidebarFlight title={translations.SIDEBAR.DEPARTURE_FLIGHT} flightMetaData={departureFlightMetaData} />
                 )}
-              </div>
-
-              {isLoading && loaderComponent}
-              {!isLoading && departureFlightMetaData && (
-                <SidebarFlight title={translations.SIDEBAR.DEPARTURE_FLIGHT} flightMetaData={departureFlightMetaData} />
-              )}
 
-              {!isLoading && returnFlightMetaData && <SidebarFlight title={translations.SIDEBAR.ARRIVAL_FLIGHT} flightMetaData={returnFlightMetaData} />}
+                {!isLoading && returnFlightMetaData && <SidebarFlight title={translations.SIDEBAR.ARRIVAL_FLIGHT} flightMetaData={returnFlightMetaData} />}
 
-              {accommodations && (
-                <div className="pricing-summary__group">
-                  <h6 className="pricing-summary__title">{translations.SIDEBAR.ACCOMMODATION}</h6>
-                  {accommodations.map((accommodation) => {
-                    let option = accommodation.options.find((x) => x.isSelected);
-                    return (
-                      <div key={accommodation.index}>
-                        <div className="pricing-summary__row">
-                          <div className="pricing-summary__property">
-                            {option?.accommodationName}
-                            {isOnRequest ? ` (${translations.SIDEBAR.ON_REQUEST})` : ''}
-                            {option?.isOnRequest ? ` (${translations.SIDEBAR.ON_REQUEST})` : ''}
-                          </div>
-                          {/*<div className="pricing-summary__value">
+                {accommodations && (
+                  <div className="pricing-summary__group">
+                    <h6 className="pricing-summary__title">{translations.SIDEBAR.ACCOMMODATION}</h6>
+                    {accommodations.map((accommodation) => {
+                      let option = accommodation.options.find((x) => x.isSelected);
+                      return (
+                        <div key={accommodation.index}>
+                          <div className="pricing-summary__row">
+                            <div className="pricing-summary__property">
+                              {option?.accommodationName}
+                              {isOnRequest ? ` (${translations.SIDEBAR.ON_REQUEST})` : ''}
+                              {option?.isOnRequest ? ` (${translations.SIDEBAR.ON_REQUEST})` : ''}
+                            </div>
+                            {/*<div className="pricing-summary__value">
                               {option && option.price > 0 && formatPrice(option?.price)}
                             </div>*/}
+                          </div>
+                          <div className="pricing-summary__row">
+                            <div className="price-summarty__property">{option?.regimeName}</div>
+                            <div className="price-summary__value">{!isFlightOnly && getDatePeriodText(translations, option?.from, option?.to, true)}</div>
+                          </div>
                         </div>
-                        <div className="pricing-summary__row">
-                          <div className="price-summarty__property">{option?.regimeName}</div>
-                          <div className="price-summary__value">{!isFlightOnly && getDatePeriodText(option?.from, option?.to, true)}</div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+
+              {!isLoading && canShowPriceBreakdownSection && (
+                <div className={`pricing-summary__region ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
+                  {basePrice !== undefined && basePrice > 0 && (
+                    <div className="pricing-summary__group">
+                      <div className="pricing-summary__row">
+                        <div className="pricing-summary__property">
+                          <h6 className="pricing-summary__title">{translations.SIDEBAR.BASE_PRICE}</h6>
                         </div>
+                        <div className="pricing-summary__value">{formatPrice(basePrice, currencyCode)}</div>
                       </div>
-                    );
-                  })}
+                    </div>
+                  )}
+                  {!isEmpty(includedCosts) && (
+                    <div className="pricing-summary__group">
+                      <h6 className="pricing-summary__title">{translations.SIDEBAR.INCLUDED_COSTS}</h6>
+                      {includedCosts?.map((priceDetail, index) => (
+                        <React.Fragment key={compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_')}>
+                          <div className="pricing-summary__row">
+                            <div className="pricing-summary__property">{priceDetail.productName}</div>
+                            {priceDetail.showPrice && (
+                              <div className="pricing-summary__value">{formatPrice(priceDetail.price * priceDetail.amount, currencyCode)}</div>
+                            )}
+                          </div>
+                          <div className="pricing-summary__row">
+                            <div className="price-summary__property">{priceDetail.accommodationName ?? priceDetail.accommodationCode}</div>
+                          </div>
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  )}
+                  {!isEmpty(extraCosts) && (
+                    <div className="pricing-summary__group">
+                      <h6 className="pricing-summary__title">{translations.SIDEBAR.EXTRA_COSTS}</h6>
+                      {extraCosts?.map((priceDetail, index) => (
+                        <React.Fragment key={compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_')}>
+                          <div className="pricing-summary__row">
+                            <div className="pricing-summary__property">{priceDetail.productName}</div>
+                            {priceDetail.showPrice && (
+                              <div className="pricing-summary__value">{formatPrice(priceDetail.price * priceDetail.amount, currencyCode)}</div>
+                            )}
+                          </div>
+                          <div className="pricing-summary__row">
+                            <div className="price-summary__property">{priceDetail.accommodationName ?? priceDetail.accommodationCode}</div>
+                          </div>
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  )}
                 </div>
               )}
             </div>
+          ) : (
+            <div className="pricing-summary__region">
+              <h6 className="pricing-summary__title">{translations.SIDEBAR.PACKAGE_NOT_AVAILABLE}</h6>
+            </div>
+          )}
 
-            {!isLoading && canShowPriceBreakdownSection && (
-              <div className={`pricing-summary__region ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
-                {basePrice !== undefined && basePrice > 0 && (
-                  <div className="pricing-summary__group">
-                    <div className="pricing-summary__row">
-                      <div className="pricing-summary__property">
-                        <h6 className="pricing-summary__title">{translations.SIDEBAR.BASE_PRICE}</h6>
-                      </div>
-                      <div className="pricing-summary__value">{formatPrice(basePrice, currencyCode)}</div>
-                    </div>
-                  </div>
-                )}
-                {!isEmpty(includedCosts) && (
-                  <div className="pricing-summary__group">
-                    <h6 className="pricing-summary__title">{translations.SIDEBAR.INCLUDED_COSTS}</h6>
-                    {includedCosts?.map((priceDetail, index) => (
-                      <React.Fragment key={compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_')}>
-                        <div className="pricing-summary__row">
-                          <div className="pricing-summary__property">{priceDetail.productName}</div>
-                          {priceDetail.showPrice && (
-                            <div className="pricing-summary__value">{formatPrice(priceDetail.price * priceDetail.amount, currencyCode)}</div>
-                          )}
-                        </div>
-                        <div className="pricing-summary__row">
-                          <div className="price-summary__property">{priceDetail.accommodationName ?? priceDetail.accommodationCode}</div>
-                        </div>
-                      </React.Fragment>
-                    ))}
-                  </div>
-                )}
-                {!isEmpty(extraCosts) && (
-                  <div className="pricing-summary__group">
-                    <h6 className="pricing-summary__title">{translations.SIDEBAR.EXTRA_COSTS}</h6>
-                    {extraCosts?.map((priceDetail, index) => (
-                      <React.Fragment key={compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_')}>
-                        <div className="pricing-summary__row">
-                          <div className="pricing-summary__property">{priceDetail.productName}</div>
-                          {priceDetail.showPrice && (
-                            <div className="pricing-summary__value">{formatPrice(priceDetail.price * priceDetail.amount, currencyCode)}</div>
-                          )}
-                        </div>
-                        <div className="pricing-summary__row">
-                          <div className="price-summary__property">{priceDetail.accommodationName ?? priceDetail.accommodationCode}</div>
-                        </div>
-                      </React.Fragment>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-
-          {!isLoading && canShowTotalPriceSection && (
+          {!isLoading && canShowTotalPriceSection && !isUnavailable && (
             <div className={`pricing-summary__region pricing-summary__region--pricing ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
               {deposit && remainingAmount > 0 ? (
                 <div className="pricing-summary__group">

package/src/booking-wizard/features/travelers-form/travelers-form-slice.ts

@@ -6,6 +6,7 @@ import { TravelersFormValues, RoomTraveler } from '../../types';
 
 export interface TravelersFormState {
   formValues?: TravelersFormValues;
+  isTravelersFirst?: boolean;
 }
 
 export const CHILD_MAX_AGE = 17;

package/src/booking-wizard/features/travelers-form/travelers-form.tsx

@@ -1,7 +1,8 @@
 import { compact, get, sortBy } from 'lodash';
 import React, { useContext, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { setCurrentStep } from '../booking/booking-slice';
+import { fetchPackage, setCurrentStep, setHasMounted, setIsFetching } from '../booking/booking-slice';
+import { selectBookingAttributes, selectHasMounted, selectIsFetching, selectIsUnavailable, selectTravelersFirstStep } from '../booking/selectors';
 import { selectFormRooms, selectTravelersFormValues, setFormValues } from './travelers-form-slice';
 
 import { Link, navigate } from '@reach/router';
@@ -16,12 +17,12 @@ import SettingsContext from '../../settings-context';
 import { useAppDispatch } from '../../store';
 import { RoomTraveler, Traveler, TravelersFormValues } from '../../types';
 import { setBookingType } from '../booking/booking-slice';
-import { OPTIONS_FORM_STEP, SUMMARY_STEP } from '../booking/constants';
+import { FLIGHT_OPTIONS_FORM_STEP, OPTIONS_FORM_STEP, SUMMARY_STEP } from '../booking/constants';
 import { selectAgentAdressId, selectAgents, selectBookingQueryString, selectBookingType, selectStartDate, selectTranslations } from '../booking/selectors';
 import { fetchPriceDetails } from '../price-details/price-details-slice';
+import GenderControl from './controls/gender-control';
 import TypeAheadInput from './type-ahead-input';
 import validateForm from './validate-form';
-import GenderControl from './controls/gender-control';
 import PhoneInput from '../../components/phone-input';
 
 interface TravelersFormProps {}
@@ -94,6 +95,12 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
   const agents = useSelector(selectAgents);
   const agentAdressId = useSelector(selectAgentAdressId);
   const translations = useSelector(selectTranslations);
+  const travelersFirstStep = useSelector(selectTravelersFirstStep);
+  const isUnavailable = useSelector(selectIsUnavailable);
+  const bookingAttributes = useSelector(selectBookingAttributes);
+  const isFetching = useSelector(selectIsFetching);
+  const hasMounted = useSelector(selectHasMounted);
+
   const useCompactForm = !!settings.travellers.compactForm && !!settings.agentAdressId;
 
   const initialValues =
@@ -135,12 +142,20 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
           validateForm(values, settings.agentRequired, bookingType, translations, settings.travellers.formFields, settings.travellers.mainBookerFormFields),
         onSubmit: (values) => {
           dispatch(setFormValues(values));
-          dispatch(fetchPriceDetails());
+          dispatch(fetchPackage());
 
           if (settings.skipRouter) {
-            dispatch(setCurrentStep(SUMMARY_STEP));
+            if (travelersFirstStep) {
+              dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
+            } else {
+              dispatch(setCurrentStep(SUMMARY_STEP));
+            }
           } else {
-            navigate(`${settings.basePath}${settings.summary.pathSuffix}?${bookingQueryString}`);
+            if (travelersFirstStep) {
+              navigate(`${settings.basePath}${settings.flightOptions.pathSuffix}?${bookingQueryString}`);
+            } else {
+              navigate(`${settings.basePath}${settings.summary.pathSuffix}?${bookingQueryString}`);
+            }
           }
         }
       });
@@ -149,6 +164,51 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
     dispatch(fetchPriceDetails());
   }, []);
 
+  useEffect(() => {
+    if (!bookingAttributes?.rooms?.length || isFetching) return;
+
+    if (!hasMounted) {
+      dispatch(setHasMounted(true));
+      return;
+    }
+
+    const fetchAll = async () => {
+      dispatch(setIsFetching(true));
+
+      try {
+        await dispatch(fetchPackage());
+        await dispatch(fetchPriceDetails());
+      } finally {
+        dispatch(setIsFetching(false));
+      }
+    };
+
+    fetchAll();
+  }, [bookingAttributes?.rooms]);
+
+  // Update URL querystring when form data changes
+  useEffect(() => {
+    if (settings.skipRouter || !travelersFirstStep) return;
+    const params = new URLSearchParams(bookingQueryString);
+    params.delete('rooms');
+    const roomsString = formik.values.rooms
+      .map((room) => {
+        const adults = room.adults ? room.adults.length : 0;
+        const childAges = room.children && room.children.length ? room.children.map((c) => c.age).join(',') : '';
+        return `adults:${adults},childAges:(${childAges})`;
+      })
+      .map((s) => `(${s})`)
+      .join(',');
+    let query = params.toString();
+    if (query) {
+      query += `&rooms=(${roomsString})`;
+    } else {
+      query = `rooms=(${roomsString})`;
+    }
+    const newUrl = `${window.location.pathname}?${query}`;
+    navigate(newUrl, { replace: true });
+  }, [formik.values]);
+
   useEffect(() => {
     if (agents && settings.affiliateSlug) {
       const agent = agents.find((x) => x.affiliateSlug && x.affiliateSlug === settings.affiliateSlug);
@@ -206,6 +266,55 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
     dispatch(setBookingType('b2c'));
   };
 
+  const handleAddTraveler = (roomIndex: number) => {
+    const rooms = [...formik.values.rooms];
+    const newAdult = {
+      id: Date.now(),
+      firstName: '',
+      lastName: '',
+      birthDate: '',
+      gender: ''
+    };
+    rooms[roomIndex] = {
+      ...rooms[roomIndex],
+      adults: [...rooms[roomIndex].adults, newAdult]
+    };
+    formik.setFieldValue('rooms', rooms);
+  };
+
+  const handleRemoveTraveler = (roomIndex: number, travelerIndex: number) => {
+    const rooms = [...formik.values.rooms];
+    const adults = [...rooms[roomIndex].adults];
+    if (adults.length <= 1) {
+      return;
+    }
+    adults.splice(travelerIndex, 1);
+    rooms[roomIndex] = {
+      ...rooms[roomIndex],
+      adults
+    };
+    formik.setFieldValue('rooms', rooms);
+  };
+
+  const handleAddRoom = () => {
+    const rooms = [...formik.values.rooms];
+    const newAdult = {
+      id: Date.now(),
+      firstName: '',
+      lastName: '',
+      birthDate: '',
+      gender: ''
+    };
+    rooms.push({ adults: [newAdult], children: [] });
+    formik.setFieldValue('rooms', rooms);
+  };
+
+  const handleRemoveRoom = (roomIndex: number) => {
+    const rooms = [...formik.values.rooms];
+    rooms.splice(roomIndex, 1);
+    formik.setFieldValue('rooms', rooms);
+  };
+
   const toggleAgent = (value: boolean) => {
     setShowAgents(value);
 
@@ -440,6 +549,7 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
       ) : (
         <>
           <div className="form__travelers__wrapper">
+            {/* map each room */}
             {formik.values.rooms.map((room, rIndex) => (
               <div key={rIndex}>
                 {formik.values.rooms.length > 1 && (
@@ -460,8 +570,14 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                         ]).join('')}
                       </p>
                     </div>
+                    {travelersFirstStep && formik.values.rooms.length > 1 && (
+                      <button type="button" className="cta cta--secondary" onClick={() => handleRemoveRoom(rIndex)}>
+                        Verwijder reisgezelschap
+                      </button>
+                    )}
                   </div>
                 )}
+                {/* map adults here for the room */}
                 {room.adults.map((travelerValues, index) => (
                   <div className="form__region" key={travelerValues.id}>
                     <div className="form__region-header">
@@ -581,6 +697,11 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                             value={travelerValues.birthDate}
                           />
                         </div>
+                        {travelersFirstStep && room.adults.length > 1 && (
+                          <button type="button" className="cta cta--secondary" onClick={() => handleRemoveTraveler(rIndex, index)}>
+                            {translations.TRAVELERS_FORM.REMOVE_TRAVELER}
+                          </button>
+                        )}
                       </>
                     )}
                   </div>
@@ -694,6 +815,13 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
                     )}
                   </div>
                 ))}
+                {travelersFirstStep && (
+                  <div className="form__region">
+                    <button type="button" className="cta cta--select" onClick={() => handleAddTraveler(rIndex)}>
+                      {translations.TRAVELERS_FORM.ADD_TRAVELER}
+                    </button>
+                  </div>
+                )}
               </div>
             ))}
 
@@ -918,20 +1046,28 @@ const TravelersForm: React.FC<TravelersFormProps> = () => {
           )}
         </>
       )}
+      {travelersFirstStep && (
+        <div className="booking__navigator">
+          <button type="button" className="cta cta--select" onClick={handleAddRoom}>
+            {translations.TRAVELERS_FORM.ADD_ROOM}
+          </button>
+        </div>
+      )}
+
       <div className="booking__navigator">
-        {settings.skipRouter ? (
+        {!travelersFirstStep && settings.skipRouter ? (
           <button type="button" title={translations.STEPS.PREVIOUS} onClick={() => goPrevious()} className="cta cta--secondary">
             {translations.STEPS.PREVIOUS}
           </button>
-        ) : (
+        ) : !travelersFirstStep ? (
           <Link
             to={`${settings.basePath}${settings.options.pathSuffix}?${bookingQueryString}`}
             title={translations.STEPS.PREVIOUS}
             className="cta cta--secondary">
             {translations.STEPS.PREVIOUS}
           </Link>
-        )}
-        <button type="submit" title={translations.STEPS.NEXT} className="cta">
+        ) : null}
+        <button type="submit" title={translations.STEPS.NEXT} className={'cta' + (isUnavailable ? ' cta--disabled' : '')}>
           {translations.STEPS.NEXT}
         </button>
       </div>

package/src/booking-wizard/settings-context.ts

@@ -25,7 +25,8 @@ const SettingsContext = React.createContext<WizardSettingsContextProps>({
     reportPrintActionId: null
   },
   travellers: {
-    pathSuffix: '/reizigers'
+    pathSuffix: '/reizigers',
+    travelersFirstStep: false
   },
   summary: {
     pathSuffix: '/samenvatting',

package/src/booking-wizard/types.ts

@@ -25,6 +25,7 @@ export interface Settings {
     formFields?: FormField[];
     mainBookerFormFields?: FormField[];
     countries?: Country[];
+    travelersFirstStep?: boolean;
   };
   summary: {
     pathSuffix: string;

package/src/qsm/components/search-input-group/index.tsx

@@ -74,22 +74,30 @@ const SearchInputGroup: React.FC<Props> = ({
 
       if (small) return;
 
-      if (input.length === 3 && autoComplete) {
-        const exactIataMatch = findExactIataMatch(options, input);
+      dispatch(setActiveSearchField(fieldKey));
+      dispatch(setSearchResults(match(input)));
+    },
+    [dispatch, fieldKey, small, match, options]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!['Tab', 'Enter'].includes(e.key)) return;
+
+      if (value.length === 3 && autoComplete) {
+        const exactIataMatch = findExactIataMatch(options, value);
 
         if (exactIataMatch) {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+          }
           dispatch(setFieldValue({ fieldKey, value: exactIataMatch.value }));
           dispatch(setSearchResults([]));
           dispatch(setActiveSearchField(null));
-          return;
         }
       }
-
-      // Normal typeahead behavior
-      dispatch(setActiveSearchField(fieldKey));
-      dispatch(setSearchResults(match(input)));
     },
-    [dispatch, fieldKey, small, match, options]
+    [value, autoComplete, options, dispatch, fieldKey]
   );
 
   const handleOptionSelect = useCallback(
@@ -155,6 +163,7 @@ const SearchInputGroup: React.FC<Props> = ({
         readOnly={small}
         onFocus={click}
         onClick={(e) => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
         onChange={(e) => !small && !readOnlyForced && handleInputChange(e.target.value)}
         className={`qsm__input${isSecondInput ? ' qsm__input--splittable' : ' u-ps-2'}`}
         placeholder={placeholder}