MPDX-9943 - Offer a guaranteed None geographic option instead of clearing

src/components/HrTools/GoalCalculator/CalculatorSettings/Categories/InformationCategory/InformationCategory.test.tsx

@@ -1,4 +1,4 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
@@ -23,12 +23,14 @@
   single?: boolean;
   readOnly?: boolean;
   benefitsPlan?: MpdGoalBenefitsConstantPlanEnum;
+  geographicLocation?: string | null;
 }
 
 const TestComponent: React.FC<TestComponentProps> = ({
   single = false,
   readOnly = false,
   benefitsPlan = MpdGoalBenefitsConstantPlanEnum.Base,
+  geographicLocation = null,
 }) => (
   <GqlMockedProvider<{
     GoalCalculation: GoalCalculationQuery;
@@ -44,6 +46,7 @@
             ? MpdGoalBenefitsConstantSizeEnum.Single
             : MpdGoalBenefitsConstantSizeEnum.MarriedNoChildren,
           benefitsPlan,
+          geographicLocation,
         },
       },
       GoalCalculatorConstants: {
@@ -324,6 +327,59 @@
       );
     });
 
+    it('does not save while the Geographic Location is cleared by typing', async () => {
+      mutationSpy.mockClear();
+      const { getByRole } = render(
+        <TestComponent geographicLocation="Orlando, FL" />,
+      );
+
+      const input = getByRole('combobox', { name: 'Geographic Location' });
+      await waitFor(() => expect(input).toHaveValue('Orlando, FL'));
+
+      userEvent.clear(input);
+
+      // Yield to the microtask queue so any pending mutation would have fired.
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(mutationSpy).not.toHaveGraphqlOperation('UpdateGoalCalculation');
+      // The field stays empty instead of resetting mid-edit
+      expect(input).toHaveValue('');
+    });
+
+    it('reverts to the saved Geographic Location when the cleared field loses focus', async () => {
+      mutationSpy.mockClear();
+      const { getByRole } = render(
+        <TestComponent geographicLocation="Orlando, FL" />,
+      );
+
+      const input = getByRole('combobox', { name: 'Geographic Location' });
+      await waitFor(() => expect(input).toHaveValue('Orlando, FL'));
+
+      userEvent.clear(input);
+      userEvent.tab();
+
+      // The field is not clearable, so blurring restores the saved value
+      // without firing a mutation
+      await waitFor(() => expect(input).toHaveValue('Orlando, FL'));
+      expect(mutationSpy).not.toHaveGraphqlOperation('UpdateGoalCalculation');
+    });
+
+    it('defaults to None and does not save when cleared and blurred without a saved location', async () => {
+      mutationSpy.mockClear();
+      const { getByRole } = render(<TestComponent />);
+
+      const input = getByRole('combobox', { name: 'Geographic Location' });
+      await waitFor(() => expect(input).not.toBeDisabled());
+      // An unset location displays as None
+      await waitFor(() => expect(input).toHaveValue('None'));
+
+      userEvent.clear(input);
+      userEvent.tab();
+
+      // Yield to the microtask queue so any pending mutation would have fired.
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(mutationSpy).not.toHaveGraphqlOperation('UpdateGoalCalculation');
+    });
+
     it('shows errors and does not save when input is invalid', async () => {
       const { getByRole } = render(<TestComponent />);
 

src/components/HrTools/GoalCalculator/CalculatorSettings/Categories/InformationCategory/InformationCategoryForm/InformationCategoryPersonalForm.tsx

@@ -150,7 +150,10 @@
           <Grid size={12}>
             <Autocomplete
               options={locations}
-              value={geographicLocation ?? null}
+              // The None option takes the place of clearing the field, so
+              // emptying the input never fires a mid-typing null save
+              disableClearable
+              value={geographicLocation ?? 'None'}
               onChange={(_, newValue) =>
                 saveField({ geographicLocation: newValue })
               }

src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.test.tsx

@@ -1,4 +1,4 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {
@@ -344,6 +344,103 @@
     );
   });
 
+  it('does not save while the Geographic Multiplier is cleared by typing', async () => {
+    mutationSpy.mockClear();
+    const { findByRole } = renderSetup({
+      calculationMock: {
+        ...fullTimeSalariedMock,
+        geographicLocation: 'Orlando, FL',
+      },
+      onCall: mutationSpy,
+    });
+
+    const input = await findByRole('combobox', {
+      name: 'Geographic Multiplier',
+    });
+    await waitFor(() => expect(input).toHaveValue('Orlando, FL (6%)'));
+
+    userEvent.clear(input);
+
+    // Yield to the microtask queue so any pending mutation would have fired.
+    await new Promise((r) => setTimeout(r, 0));
+    expect(mutationSpy).not.toHaveGraphqlOperation('UpdatePdsGoalCalculation');
+    // The field stays empty instead of resetting to None mid-edit
+    expect(input).toHaveValue('');
+  });
+
+  it('reverts to the saved Geographic Multiplier when the cleared field loses focus', async () => {
+    mutationSpy.mockClear();
+    const { findByRole } = renderSetup({
+      calculationMock: {
+        ...fullTimeSalariedMock,
+        geographicLocation: 'Orlando, FL',
+      },
+      onCall: mutationSpy,
+    });
+
+    const input = await findByRole('combobox', {
+      name: 'Geographic Multiplier',
+    });
+    await waitFor(() => expect(input).toHaveValue('Orlando, FL (6%)'));
+
+    userEvent.clear(input);
+    userEvent.tab();
+
+    // The field is not clearable, so blurring restores the saved value
+    // without firing a mutation
+    await waitFor(() => expect(input).toHaveValue('Orlando, FL (6%)'));
+    expect(mutationSpy).not.toHaveGraphqlOperation('UpdatePdsGoalCalculation');
+  });
+
+  it('saves None when it is explicitly selected', async () => {
+    mutationSpy.mockClear();
+    const { findByRole } = renderSetup({
+      calculationMock: {
+        ...fullTimeSalariedMock,
+        geographicLocation: 'Orlando, FL',
+      },
+      onCall: mutationSpy,
+    });
+
+    const input = await findByRole('combobox', {
+      name: 'Geographic Multiplier',
+    });
+    await waitFor(() => expect(input).toHaveValue('Orlando, FL (6%)'));
+
+    userEvent.click(input);
+    userEvent.click(await findByRole('option', { name: 'None' }));
+
+    await waitFor(() =>
+      expect(mutationSpy).toHaveGraphqlOperation('UpdatePdsGoalCalculation', {
+        attributes: {
+          id: 'goal-1',
+          geographicLocation: 'None',
+        },
+      }),
+    );
+  });
+
+  it('does not save when a Geographic Multiplier of None is cleared and loses focus', async () => {
+    mutationSpy.mockClear();
+    const { findByRole } = renderSetup({
+      calculationMock: fullTimeSalariedMock,
+      onCall: mutationSpy,
+    });
+
+    const input = await findByRole('combobox', {
+      name: 'Geographic Multiplier',
+    });
+    await waitFor(() => expect(input).not.toBeDisabled());
+    await waitFor(() => expect(input).toHaveValue('None'));
+
+    userEvent.clear(input);
+    userEvent.tab();
+
+    // Yield to the microtask queue so any pending mutation would have fired.
+    await new Promise((r) => setTimeout(r, 0));
+    expect(mutationSpy).not.toHaveGraphqlOperation('UpdatePdsGoalCalculation');
+  });
+
   it('renders the Calculate my average hours button next to Hours Worked', async () => {
     const { findByRole } = renderSetup({
       calculationMock: fullTimeHourlyMock,

src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx

@@ -281,9 +281,12 @@
           <Grid size={12}>
             <Autocomplete
               options={locations}
+              // The None option takes the place of clearing the field, so
+              // emptying the input never fires a mid-typing null save
+              disableClearable
               getOptionLabel={getLocationLabel}
               value={calculation?.geographicLocation ?? 'None'}
-              onChange={(_, newValue: string | null) =>
+              onChange={(_, newValue) =>
                 saveField({ geographicLocation: newValue })
               }
               disabled={!calculation}

src/components/HrTools/SalaryCalculator/Autosave/AutosaveAutocomplete.tsx

@@ -10,29 +10,40 @@ import { useSaveField } from './useSaveField';
 
 export interface AutosaveAutocompleteProps
   extends Omit<
-    AutocompleteProps<string, false, false, false>,
+    AutocompleteProps<string, false, boolean, false>,
     'renderInput' | 'onChange' | 'value'
   > {
   fieldName: string;
   label: string;
   textFieldProps?: Partial<TextFieldProps>;
+  /**
+   * Option displayed when the field has no saved value, e.g. 'None'. Must be
+   * one of the options. When set, the field is not clearable — selecting the
+   * empty-value option takes the place of clearing.
+   */
+  emptyValue?: string;
 }
 
 export const AutosaveAutocomplete: React.FC<AutosaveAutocompleteProps> = ({
   fieldName,
   label,
   options,
   textFieldProps,
+  emptyValue,
   ...props
 }) => {
   const saveField = useSaveField();
   const { calculation } = useSalaryCalculator();
 
-  const value = calculation?.[fieldName] ?? null;
+  const value = calculation?.[fieldName] ?? emptyValue ?? null;
 
   return (
     <Autocomplete
       options={options}
+      // With an emptyValue option there is nothing to clear to, and disabling
+      // clearing also stops MUI from firing a mid-typing null save when the
+      // input is emptied
+      disableClearable={emptyValue !== undefined}
       value={value}
       onChange={(_, newValue) => saveField({ [fieldName]: newValue })}
       disabled={!calculation}

src/components/HrTools/SalaryCalculator/YourInformation/PersonalInformationSection/PersonalInformationSection.test.tsx

@@ -12,11 +12,13 @@ const TestComponent: React.FC<{
   hasSpouse?: boolean;
   requestMock?: SalaryRequestMock;
   payrollDates?: SalaryCalculatorTestWrapperProps['payrollDates'];
-}> = ({ hasSpouse, requestMock, payrollDates }) => (
+  onCall?: SalaryCalculatorTestWrapperProps['onCall'];
+}> = ({ hasSpouse, requestMock, payrollDates, onCall }) => (
   <SalaryCalculatorTestWrapper
     hasSpouse={hasSpouse}
     salaryRequestMock={requestMock}
     payrollDates={payrollDates}
+    onCall={onCall}
   >
     <PersonalInformationSection />
   </SalaryCalculatorTestWrapper>
@@ -68,10 +70,10 @@ describe('PersonalInformationSection', () => {
   });
 
   it('should display married personal information values correctly', async () => {
-    // Explicitly clear the saved location so the combobox is empty. (MUI v7's
-    // Autocomplete renders a controlled `value` even when it isn't one of the
-    // `options`, so relying on the auto-generated mock string would populate
-    // the field.)
+    // Explicitly clear the saved location so the combobox falls back to None.
+    // (MUI v7's Autocomplete renders a controlled `value` even when it isn't
+    // one of the `options`, so relying on the auto-generated mock string would
+    // populate the field.)
     const { findByRole } = render(
       <TestComponent requestMock={{ location: null }} />,
     );
@@ -80,7 +82,7 @@ describe('PersonalInformationSection', () => {
       name: 'Nearest Geographic Multiplier Location',
     });
     await waitFor(() => {
-      expect(locationCombobox).toHaveValue('');
+      expect(locationCombobox).toHaveValue('None');
     });
 
     expect(await findByRole('cell', { name: '4 years' })).toBeInTheDocument();
@@ -112,7 +114,39 @@ describe('PersonalInformationSection', () => {
 
     userEvent.click(await findByRole('button', { name: 'Open' }));
 
-    expect(await findAllByRole('option')).toHaveLength(2);
+    // The two mocked locations plus the guaranteed None option
+    expect(await findAllByRole('option')).toHaveLength(3);
+  });
+
+  it('does not save while the location is cleared by typing and reverts on blur', async () => {
+    const mutationSpy = jest.fn();
+    const { findByRole } = render(
+      <TestComponent
+        requestMock={{ location: 'Miami, FL' }}
+        onCall={mutationSpy}
+      />,
+    );
+
+    const locationCombobox = await findByRole('combobox', {
+      name: 'Nearest Geographic Multiplier Location',
+    });
+    await waitFor(() => {
+      expect(locationCombobox).toHaveValue('Miami, FL');
+    });
+
+    userEvent.clear(locationCombobox);
+
+    // Yield to the microtask queue so any pending mutation would have fired.
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(mutationSpy).not.toHaveGraphqlOperation('UpdateSalaryCalculation');
+    expect(locationCombobox).toHaveValue('');
+
+    userEvent.tab();
+
+    // The field is not clearable, so blurring restores the saved value
+    // without firing a mutation
+    await waitFor(() => expect(locationCombobox).toHaveValue('Miami, FL'));
+    expect(mutationSpy).not.toHaveGraphqlOperation('UpdateSalaryCalculation');
   });
 
   it('should render the effective paycheck note when payroll dates match', async () => {

src/components/HrTools/SalaryCalculator/YourInformation/PersonalInformationSection/PersonalInformationSection.tsx

@@ -69,6 +69,7 @@ export const PersonalInformationSection: React.FC = () => {
                   label={t('Nearest Geographic Multiplier Location')}
                   fieldName="location"
                   options={locations}
+                  emptyValue="None"
                   textFieldProps={{
                     InputLabelProps: {
                       sx: { fontSize: theme.typography.body2.fontSize },