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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user