@travelswitchhq/flight-search-react 1.1.0 → 1.1.2

package/dist/index.mjs

@@ -1087,6 +1087,9 @@ padding-inline-start: 25px;
   font-size: 14px;
   line-height: 1;
 }
+.sw-container .sw-is-invalid{
+  border: 1px solid var(--sw-error);
+}
 .sw-checkbox-wrap .sw-star-checkbox {
   display: flex;
   align-items: center;
@@ -1124,17 +1127,17 @@ padding-inline-start: 25px;
   flex: 0 1 auto; 
   min-width: fit-content; 
 }
-  .MobileShow{
+  .sw-container .MobileShow{
     display: none;
 }
-.MobileHide{
+.sw-container .MobileHide{
     display: block;
 }
 @media screen and (max-width: 768px) {
-    .MobileShow{
+    .sw-container .MobileShow{
         display: block;
     }
-    .MobileHide{
+    .sw-container .MobileHide{
         display: none;
     }
     .sw-container{
@@ -1157,6 +1160,7 @@ padding-inline-start: 25px;
             display: none;
         }
     }
+
     .sw-container .sw-form-field {
         border-radius: var(--sw-radius);
     }
@@ -1226,6 +1230,7 @@ padding-inline-start: 25px;
         width: 100%;
         max-height: 100vh;
         overflow: auto;
+        display: block !important;
         -webkit-overflow-scrolling: touch;
         scroll-behavior: smooth;
         padding: 0 !important;
@@ -1314,6 +1319,9 @@ padding-inline-start: 25px;
     .sw-fsrh-chk-main{
         flex-wrap: wrap;
     }
+    .sw-custom-dropdown-trigger{
+      pointer-events: none;
+    }
 }
 `;
 
@@ -1619,6 +1627,23 @@ function FlightSearchWidget({
       [segmentIndex]: { ...prev[segmentIndex] ?? {}, [dropdownType]: false }
     }));
     closeAirportDropdown(dropdownType, segmentIndex);
+    setValidationErrors((prev) => {
+      const next = { ...prev };
+      const clearForSegment = (segIndex, type) => {
+        const segErr = next[segIndex];
+        if (!segErr) return;
+        const updatedSegErr = { ...segErr };
+        if (type === "origin") delete updatedSegErr.origin;
+        else delete updatedSegErr.destination;
+        if (Object.keys(updatedSegErr).length === 0) delete next[segIndex];
+        else next[segIndex] = updatedSegErr;
+      };
+      clearForSegment(segmentIndex, dropdownType);
+      if ((tripType === "multi-city" || tripType === "custom-search") && dropdownType === "destination") {
+        clearForSegment(segmentIndex + 1, "origin");
+      }
+      return next;
+    });
   }, [closeAirportDropdown, tripType]);
   const updateSelectedIndex = useCallback((segmentIndex, dropdownType, newIndex) => {
     setPredictiveSearchList((prev) => {
@@ -1852,19 +1877,6 @@ function FlightSearchWidget({
       }
       return updated;
     });
-    if (field === "origin" || field === "destination") {
-      setSegmentDropdowns((prev) => ({
-        ...prev,
-        [index]: { ...prev[index], [field]: false }
-      }));
-      const placeholder = field === "origin" ? "Origin" : "Destination";
-      if (isValidLocationValue(value, placeholder)) {
-        setValidationErrors((prev) => ({
-          ...prev,
-          [index]: { ...prev[index] ?? {}, [field]: false }
-        }));
-      }
-    }
   };
   const handleTravellerChange = (field, value) => {
     setSegments((prev) => {
@@ -1875,13 +1887,25 @@ function FlightSearchWidget({
     });
   };
   const toggleSegmentDropdown = (index, field) => {
-    setSegmentDropdowns((prev) => ({
-      ...prev,
-      [index]: {
-        ...prev[index] || { origin: false, destination: false },
-        [field]: !prev[index]?.[field]
+    setSegmentDropdowns((prev) => {
+      const shouldOpen = !prev[index]?.[field];
+      if (!shouldOpen) {
+        return {
+          ...prev,
+          [index]: {
+            ...prev[index] || { origin: false, destination: false },
+            [field]: false
+          }
+        };
       }
-    }));
+      const next = {};
+      Object.keys(prev).forEach((key) => {
+        const idx = Number.parseInt(key, 10);
+        next[idx] = { origin: false, destination: false };
+      });
+      next[index] = { origin: false, destination: false, [field]: true };
+      return next;
+    });
   };
   const swapSegmentLocations = (index) => {
     setSegments((prev) => {
@@ -2110,7 +2134,29 @@ function FlightSearchWidget({
           {
             type: "text",
             id: `${dropdownType}-${segmentIndex}`,
-            className: `sw-custom-dropdown-trigger ${value === placeholder || !value ? "sw-placeholder" : ""}`,
+            className: `sw-custom-dropdown-trigger MobileHide ${value === placeholder || !value ? "sw-placeholder" : ""}`,
+            value: value === placeholder ? "" : value ?? "",
+            placeholder,
+            onFocus: (e) => {
+              onOpen();
+              e.currentTarget.select();
+            },
+            onClick: (e) => e.currentTarget.select(),
+            onChange: (e) => {
+              const val = e.target.value;
+              handleSegmentFieldChange(segmentIndex, dropdownType, val);
+              triggerSearchAirport(segmentIndex, dropdownType, val);
+            },
+            onKeyDown: (e) => handleKeyDown(e, dropdownType, segmentIndex)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            readOnly: true,
+            id: `${dropdownType}-${segmentIndex}`,
+            className: `sw-custom-dropdown-trigger MobileShow ${value === placeholder || !value ? "sw-placeholder" : ""}`,
             value: value === placeholder ? "" : value ?? "",
             placeholder,
             onFocus: (e) => {
@@ -2134,7 +2180,7 @@ function FlightSearchWidget({
             ] }) }),
             /* @__PURE__ */ jsx("h4", { children: isOrigin ? "Origin" : "Destination" })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mobileSrgInput MobileShow", children: /* @__PURE__ */ jsx("input", { type: "text", placeholder: `Search ${isOrigin ? "Origin" : "Destination"}`, value: value ?? "", onChange: (e) => {
+          /* @__PURE__ */ jsx("div", { className: "mobileSrgInput MobileShow", children: /* @__PURE__ */ jsx("input", { type: "search", placeholder: `Search ${isOrigin ? "Origin" : "Destination"}`, value: value ?? "", onChange: (e) => {
             const val = e.target.value;
             handleSegmentFieldChange(segmentIndex, dropdownType, val);
             triggerSearchAirport(segmentIndex, dropdownType, val);
@@ -2196,6 +2242,7 @@ function FlightSearchWidget({
               numberOfMonths: 2,
               id: `departure-${index}`,
               appendTo: "self",
+              readOnlyInput: true,
               value: segment.departureDate ?? null,
               onChange: (e) => {
                 const raw = e.value;
@@ -2218,6 +2265,10 @@ function FlightSearchWidget({
               numberOfMonths: 10,
               id: `departure-${index}`,
               appendTo: "self",
+              ref: (el) => {
+                segmentCalendarRefs.current[index] = el;
+              },
+              readOnlyInput: true,
               value: segment.departureDate ?? null,
               onChange: (e) => {
                 const raw = e.value;
@@ -2235,7 +2286,7 @@ function FlightSearchWidget({
               headerTemplate: () => /* @__PURE__ */ jsxs("div", { className: "mobileHead MobileShow", children: [
                 /* @__PURE__ */ jsx("a", { type: "button", onClick: (e) => {
                   e.stopPropagation();
-                  mobileDateRangeCalendarRef.current?.hide?.();
+                  segmentCalendarRefs.current[index]?.hide?.();
                 }, children: /* @__PURE__ */ jsxs("svg", { width: "20px", height: "20px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
                   /* @__PURE__ */ jsx("path", { d: "M19 5L5 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
                   /* @__PURE__ */ jsx("path", { d: "M5 5L19 19", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -2249,7 +2300,7 @@ function FlightSearchWidget({
                   className: "sw-confirm-btn",
                   onClick: (e) => {
                     e.stopPropagation();
-                    mobileDateRangeCalendarRef.current?.hide?.();
+                    segmentCalendarRefs.current[index]?.hide?.();
                   },
                   children: "Confirm"
                 }