FlightsMapFilter: reset toggles when departure cleared; add disabled-title hint

Angular's FlightsMapFiltersStateService.setDeparture(undefined) also
resets domestic/international/connections to false — none of them make
sense without a departure anchor. React now mirrors that reset on clear
so a re-opened filter doesn't show phantom 'on' toggles.

Also added a `title` attribute on each disabled toggle that points
users to the missing city input. The toggles are still disabled (per
Angular behavior) but the hint explains *why* they can't be toggled,
which was the source of confusion in the 'feature not fully
implemented' report.
This commit is contained in:
2026-04-20 12:03:57 +03:00
parent d2f418f494
commit 2ce6164b13
@@ -152,11 +152,23 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
placeholder={t("FLIGHTS-MAP.FILTER_DEPARTURE_PLACEHOLDER")}
value={value.departure ?? ""}
onChange={(code) => {
onChange({
...value,
departure: code || undefined,
arrival: undefined,
});
// Mirrors Angular FlightsMapFiltersStateService.setDeparture:
// clearing departure also resets the three toggles (domestic,
// international, connections) back to false since none of them
// apply without a departure anchor. Keeping them on would leave
// the disabled chip in an "on" visual state after re-opening.
if (!code) {
onChange({
...value,
departure: undefined,
arrival: undefined,
domestic: false,
international: false,
connections: false,
});
return;
}
onChange({ ...value, departure: code, arrival: undefined });
}}
dictionaries={dictionaries}
onLocate={handleLocate}
@@ -207,8 +219,15 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
</div>
<div className="flights-map-filter__toggles">
{/* Mirrors Angular: domestic/international toggles require a
departure city; the connections toggle also requires an
arrival city (you can only route-search with both cities).
We add `title` hints so disabled toggles explain why they
can't be toggled — Angular's toggle-switch doesn't surface
this, but the hint is a pure UX win at no parity cost. */}
<label
className={`flights-map-filter__toggle${!value.departure ? " flights-map-filter__toggle--disabled" : ""}`}
title={!value.departure ? t("FLIGHTS-MAP.FILTER_DEPARTURE_PLACEHOLDER") : undefined}
>
<input
type="checkbox"
@@ -223,6 +242,7 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
<label
className={`flights-map-filter__toggle${!value.departure ? " flights-map-filter__toggle--disabled" : ""}`}
title={!value.departure ? t("FLIGHTS-MAP.FILTER_DEPARTURE_PLACEHOLDER") : undefined}
>
<input
type="checkbox"
@@ -237,6 +257,13 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
<label
className={`flights-map-filter__toggle${!(value.departure && value.arrival) ? " flights-map-filter__toggle--disabled" : ""}`}
title={
!value.departure
? t("FLIGHTS-MAP.FILTER_DEPARTURE_PLACEHOLDER")
: !value.arrival
? t("FLIGHTS-MAP.FILTER_ARRIVAL_PLACEHOLDER")
: undefined
}
>
<input
type="checkbox"