feat: Allow lazy-loaded SelectFields to change their options.

I.e. if a variable in the GQL query changed, after we've done the initial load.
homebound-team · Oct 10, 2023 · 9919970 · 9919970
1 parent 520794f
commit 9919970
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 99 deletions.
diff --git a/src/components/Filters/SingleFilter.tsx b/src/components/Filters/SingleFilter.tsx
@@ -37,7 +37,7 @@ class SingleFilter<O, V extends Key> extends BaseFilter<V, SingleFilterProps<O,
 
     const options = Array.isArray(maybeOptions)
       ? [allOption as O, ...maybeOptions]
-      : { ...maybeOptions, initial: [allOption as O, ...maybeOptions.initial] };
+      : { ...maybeOptions, initial: maybeOptions.initial };
 
     return (
       <SelectField<O, V>

diff --git a/src/inputs/SelectField.stories.tsx b/src/inputs/SelectField.stories.tsx
@@ -224,6 +224,7 @@ Contrast.args = { compact: true, contrast: true };
 const loadTestOptions: TestOption[] = zeroTo(1000).map((i) => ({ id: String(i), name: `Project ${i}` }));
 
 export function PerfTest() {
+  const [loaded, setLoaded] = useState<TestOption[]>([]);
   const [selectedValue, setSelectedValue] = useState<string | undefined>(loadTestOptions[2].id);
   return (
     <SelectField
@@ -232,13 +233,12 @@ export function PerfTest() {
       onSelect={setSelectedValue}
       errorMsg={selectedValue !== undefined ? "" : "Select an option. Plus more error text to force it to wrap."}
       options={{
-        initial: [loadTestOptions[2]],
+        initial: loadTestOptions[2],
         load: async () => {
-          return new Promise((resolve) => {
-            // @ts-ignore - believes `options` should be of type `never[]`
-            setTimeout(() => resolve({ options: loadTestOptions }), 1500);
-          });
+          await sleep(1500);
+          setLoaded(loadTestOptions);
         },
+        options: loaded,
       }}
       onBlur={action("onBlur")}
       onFocus={action("onFocus")}
@@ -248,6 +248,7 @@ export function PerfTest() {
 PerfTest.parameters = { chromatic: { disableSnapshot: true } };
 
 export function LazyLoadStateFields() {
+  const [loaded, setLoaded] = useState<TestOption[]>([]);
   const [selectedValue, setSelectedValue] = useState<string | undefined>(loadTestOptions[2].id);
   return (
     <>
@@ -257,13 +258,12 @@ export function LazyLoadStateFields() {
         onSelect={setSelectedValue}
         unsetLabel={"-"}
         options={{
-          initial: [loadTestOptions.find((o) => o.id === selectedValue)!],
+          initial: loadTestOptions.find((o) => o.id === selectedValue)!,
           load: async () => {
-            return new Promise((resolve) => {
-              // @ts-ignore - believes `options` should be of type `never[]`
-              setTimeout(() => resolve({ options: loadTestOptions }), 1500);
-            });
+            await sleep(1500);
+            setLoaded(loadTestOptions);
           },
+          options: loaded,
         }}
       />
       <SelectField
@@ -272,13 +272,12 @@ export function LazyLoadStateFields() {
         onSelect={setSelectedValue}
         unsetLabel={"-"}
         options={{
-          initial: [loadTestOptions.find((o) => o.id === selectedValue)!],
+          initial: loadTestOptions.find((o) => o.id === selectedValue)!,
           load: async () => {
-            return new Promise((resolve) => {
-              // @ts-ignore - believes `options` should be of type `never[]`
-              setTimeout(() => resolve({ options: loadTestOptions }), 1500);
-            });
+            await sleep(1500);
+            setLoaded(loadTestOptions);
           },
+          options: loaded,
         }}
       />
     </>
@@ -287,21 +286,20 @@ export function LazyLoadStateFields() {
 LazyLoadStateFields.parameters = { chromatic: { disableSnapshot: true } };
 
 export function LoadingState() {
+  const [loaded, setLoaded] = useState<TestOption[]>([]);
   const [selectedValue, setSelectedValue] = useState<string | undefined>(loadTestOptions[2].id);
-
   return (
     <SelectField
       label="Project"
       value={selectedValue}
       onSelect={setSelectedValue}
       options={{
-        initial: [loadTestOptions[2]],
+        initial: loadTestOptions[2],
         load: async () => {
-          return new Promise((resolve) => {
-            // @ts-ignore - believes `options` should be of type `never[]`
-            setTimeout(() => resolve({ options: loadTestOptions }), 5000);
-          });
+          await sleep(5000);
+          setLoaded(loadTestOptions);
         },
+        options: loadTestOptions,
       }}
     />
   );
@@ -392,3 +390,5 @@ function TestSelectField<T extends object, V extends Value>(
     </div>
   );
 }
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
diff --git a/src/inputs/SelectField.test.tsx b/src/inputs/SelectField.test.tsx
@@ -181,16 +181,25 @@ describe("SelectFieldTest", () => {
 
   it("can load options via options prop callback", async () => {
     // Given a Select Field with options that are loaded via a callback
-    const r = await render(
-      <TestSelectField
-        label="Age"
-        value="1"
-        options={{ initial: [options[0]], load: async () => ({ options }) }}
-        getOptionLabel={(o) => o.name}
-        getOptionValue={(o) => o.id}
-        data-testid="age"
-      />,
-    );
+    function Test() {
+      const [loaded, setLoaded] = useState<HasIdAndName[]>([]);
+      return (
+        <SelectField
+          label="Age"
+          value="1"
+          options={{
+            initial: options[0],
+            load: async () => setLoaded(options),
+            options: loaded,
+          }}
+          onSelect={() => {}}
+          getOptionLabel={(o) => o.name}
+          getOptionValue={(o) => o.id}
+          data-testid="age"
+        />
+      );
+    }
+    const r = await render(<Test />);
     // When opening the menu
     click(r.age);
     // Then expect to see the initial option and loading state
@@ -305,17 +314,25 @@ describe("SelectFieldTest", () => {
   it("can define and select 'unsetLabel' when options are lazily loaded", async () => {
     const onSelect = jest.fn();
     // Given a Select Field with options that are loaded lazily
-    const r = await render(
-      <TestSelectField
-        label="Age"
-        value="1"
-        unsetLabel="None"
-        options={{ initial: [labelValueOptions[0]], load: async () => ({ options: labelValueOptions }) }}
-        getOptionLabel={(o) => o.label}
-        getOptionValue={(o) => o.value}
-        onSelect={onSelect}
-      />,
-    );
+    function Test() {
+      const [loaded, setLoaded] = useState<HasLabelAndValue[]>([]);
+      return (
+        <TestSelectField
+          label="Age"
+          value="1"
+          unsetLabel="None"
+          options={{
+            initial: labelValueOptions[0],
+            load: async () => setLoaded(labelValueOptions),
+            options: loaded,
+          }}
+          getOptionLabel={(o) => o.label}
+          getOptionValue={(o) => o.value}
+          onSelect={onSelect}
+        />
+      );
+    }
+    const r = await render(<Test />);
     // When we click the field to open the menu
     await clickAndWait(r.age);
     // The 'unset' option is in the menu and we select it
@@ -442,11 +459,12 @@ describe("SelectFieldTest", () => {
     );
   }
 
-  function TestMultipleSelectField<O, V extends Value>(
+  function TestMultipleSelectField<O extends HasIdAndName, V extends Value>(
     props: Optional<SelectFieldProps<O, V>, "onSelect">,
   ): JSX.Element {
     const [selected, setSelected] = useState<V | undefined>(props.value);
     const init = options.find((o) => o.id === selected) as O;
+    const [loaded, setLoaded] = useState<O[]>([]);
     return (
       <>
         <SelectField<O, V>
@@ -455,13 +473,12 @@ describe("SelectFieldTest", () => {
           onSelect={setSelected}
           unsetLabel={"-"}
           options={{
-            initial: [init],
+            initial: init,
             load: async () => {
-              return new Promise((resolve) => {
-                // @ts-ignore - believes `options` should be of type `never[]`
-                setTimeout(() => resolve({ options }), 1500);
-              });
+              await sleep(1500);
+              setLoaded(props.options as O[]);
             },
+            options: loaded,
           }}
         />
         <SelectField<O, V>
@@ -470,16 +487,17 @@ describe("SelectFieldTest", () => {
           onSelect={setSelected}
           unsetLabel={"-"}
           options={{
-            initial: [init],
+            initial: init,
             load: async () => {
-              return new Promise((resolve) => {
-                // @ts-ignore - believes `options` should be of type `never[]`
-                setTimeout(() => resolve({ options }), 1500);
-              });
+              await sleep(1500);
+              setLoaded(props.options as O[]);
             },
+            options: loaded,
           }}
         />
       </>
     );
   }
 });
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
diff --git a/src/inputs/SelectField.tsx b/src/inputs/SelectField.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { Value } from "src/inputs";
 import { ComboBoxBase, ComboBoxBaseProps, unsetOption } from "src/inputs/internal/ComboBoxBase";
 import { HasIdAndName, Optional } from "src/types";
@@ -35,14 +36,14 @@ export function SelectField<O, V extends Value>(
     value,
     ...otherProps
   } = props;
-
+  const values = useMemo(() => [value], [value]);
   return (
     <ComboBoxBase
       {...otherProps}
       options={options}
       getOptionLabel={getOptionLabel}
       getOptionValue={getOptionValue}
-      values={[value]}
+      values={values}
       onSelect={(values, options) => {
         // If the user used `unsetLabel`, then values will be `[undefined]` and options `[unsetOption]`
         if (values.length > 0 && options.length > 0) {